Contact Forms

Check across multiple browsers the added their own styles to checkboxes and input fields
The anatomy of the Beaver Builder contact form. IDs and Class selectors.
/*Background for the module and/or the form */
.fl-module-content { background-color:gainsboro; padding: 2%;}
.fl-contact-form{ background-color: ghostWhite; padding: 5%;}
/*Main form sections*/
.fl-input-group {border:4px solid magenta; }
.fl-input-group INPUT {border:5px solid white; border-radius:0; } /*excludes text areas*/
TEXTAREA {border:5px solid white; border-radius:0; }
/*covers input and title areas - see IDs below*/
.fl-name {background-color: chocolate;} 
.fl-subject {background-color: coral;} 
.fl-email {background-color: crimson;}
.fl-phone {background-color: darkcyan;}
.fl-message {background-color: plum;}
.fl-terms-checkbox{background-color: slateblue;}
.fl-terms-checkbox-text {color:peachpuff;}

/* There are ID's as well as classes that single out the input areas
Here I have used background-color to make the default transparent */

#fl-name {background-color: rgba(0,0,0,0.0);}
#fl-subject {background-color: rgba(0,0,0,0.0);}
#fl-email {background-color: rgba(0,0,0,0.0);}
#fl-phone {background-color: rgba(0,0,0,0.0);}
#fl-message {background-color: rgba(0,0,0,0.0);}

/*Use this below when changing to one shared color
#fl-name, #fl-subject, #fl-email, #fl-phone, #fl-message {} */
LABEL {color: white;}

/* Placeholder styling for Chrome and Edge*/
.fl-input-group INPUT::placeholder {color: #000; background-color: pink;} /*BB defaults to a readable grey on black or white */
TEXTAREA::placeholder {color: #000; background-color: pink; }
/* Custom Success message and errors */
.fl-module-content SPAN.fl-success-msg P {background-color: tomato; color: #FFFFFF; padding: 30%; }
.fl-contact-form .fl-contact-error{color: thistle; font-weight: bold;}
.fl-contact-form .fl-success-none { color: green;} /* When "none" is selected for success action*/

/* Remember the focus state. Below the inputs have a grey background we need to specify also on focus */

.fl-input-group INPUT, .fl-contact-form TEXTAREA {padding: 2%; background-color: #444; color: #fff; border-radius:0;}
.fl-input-group INPUT:focus, .fl-contact-form TEXTAREA:focus{ background-color: #444; color: white;}
.fl-contact-form TEXTAREA {height: 260px;}
TUTORIAL HERE ➤