Tutorial & code

Styled Contact Forms

The Beaver Builder contact forms with CSS styling. Also with the anatomy of the Beaver Builder form CSS selectors.

Minimum BB plugin required: Standard Saved under: Rows
Skill level: Advanced Contributor: David Waumsley

Template Location

Video

Notes

For most client project I use Gravity Forms , but this is a heavy plugin when a site is only collecting basic contact details.

Deliverability, email logging and spam

If using Beaver Builder default contact module it is recommended you use a SMTP plugin. You may also want to install a mail logging plugin so all messages are recorded and deleted after a period of time. One plugin that covers most circumstances is Fluent SMTP ( with very minimal and buried promotion of their premium offerings).

I personally use MailGun to deliver emails and use their own plugin, For logging mail I now use WP Mail Catcher. Combined these are smaller than Fluent SMPT.

For anti-spam Beaver Builder supported reCAPTCHA v3 very early on (October 2019), but I found (and tested) LH Zero Spam and like how it works. It is based on work by David Walsh where any browser that disables JavaScript will not be able to fill in forms on the site. I have used the same method via Gravity Form Zero Spam. It has been the most effect way for us for many years.

Icons on input fields

I will cover this in another video as the technique can be applied to other forms, but the CSS for Beaver Builder is included below. I use this site which conveniently provides a data URL: https://remixicon.com/

See the Styled Contact Forms template in action.

Example

Code

CSS

/*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;}

/*-------------------------------------------------------------------------------------------------------
The CSS below uses SVGs converted to Data URLs to add background icons to input fields. This is easily done via https://remixicon.com/
Data URLs seem not to work properly in the Ace Editor used by Beaver Builder. Best to put the code in styles.css 
in your child theme or in the WordPress customizer.
----------------------------------------------------------------------------------------------------------- */

.custom-contact #fl-name { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M20 22H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12 6 6 0 0 1 0 12z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 95% 50%;
}

.custom-contact #fl-email { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555 7.581-6.56-1.308-1.513-6.285 5.439z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 95% 50%;
}

.custom-contact #fl-phone { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M21 16.42v3.536a1 1 0 0 1-.93.998c-.437.03-.794.046-1.07.046-8.837 0-16-7.163-16-16 0-.276.015-.633.046-1.07A1 1 0 0 1 4.044 3H7.58a.5.5 0 0 1 .498.45c.023.23.044.413.064.552A13.901 13.901 0 0 0 9.35 8.003c.095.2.033.439-.147.567l-2.158 1.542a13.047 13.047 0 0 0 6.844 6.844l1.54-2.154a.462.462 0 0 1 .573-.149 13.901 13.901 0 0 0 4 1.205c.139.02.322.042.55.064a.5.5 0 0 1 .449.498z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 95% 50%;
}


.custom-contact #fl-message { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zM7 10v2h2v-2H7zm4 0v2h2v-2h-2zm4 0v2h2v-2h-2z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 95% 6%;
}

Discounts On These Two Lifetime Deals:

MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off

--------------------------------------------------------------

Get the Beaver Junction Plugins here

Get it now

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.