#main-header,#main-header .nav li ul,.et-search-form,#main-header .et_mobile_menu{background-color:#4297ff}.et_header_style_centered .mobile_nav .select_page,.et_header_style_split .mobile_nav .select_page,.et_nav_text_color_light #top-menu>li>a,.et_nav_text_color_dark #top-menu>li>a,#top-menu a,.et_mobile_menu li a,.et_nav_text_color_light .et_mobile_menu li a,.et_nav_text_color_dark .et_mobile_menu li a,#et_search_icon:before,.et_search_form_container input,span.et_close_search_field:after,#et-top-navigation .et-cart-info{color:#ffffff}.et_search_form_container input::-moz-placeholder{color:#ffffff}.et_search_form_container input::-webkit-input-placeholder{color:#ffffff}.et_search_form_container input:-ms-input-placeholder{color:#ffffff}#top-menu li a{font-size:15px}body.et_vertical_nav .container.et_search_form_container .et-search-form input{font-size:15px!important}#footer-widgets .footer-widget a,#footer-widgets .footer-widget li a,#footer-widgets .footer-widget li a:hover{color:#ffffff}.footer-widget{color:#ffffff}.et-fixed-header#main-header{box-shadow:none!important}.et_slide_in_menu_container,.et_slide_in_menu_container .et-search-field{letter-spacing:px}.et_slide_in_menu_container .et-search-field::-moz-placeholder{letter-spacing:px}.et_slide_in_menu_container .et-search-field::-webkit-input-placeholder{letter-spacing:px}.et_slide_in_menu_container .et-search-field:-ms-input-placeholder{letter-spacing:px}@media only screen and (min-width:981px){.et_header_style_left #et-top-navigation,.et_header_style_split #et-top-navigation{padding:18px 0 0 0}.et_header_style_left #et-top-navigation nav>ul>li>a,.et_header_style_split #et-top-navigation nav>ul>li>a{padding-bottom:18px}.et_header_style_split .centered-inline-logo-wrap{width:35px;margin:-35px 0}.et_header_style_split .centered-inline-logo-wrap #logo{max-height:35px}.et_pb_svg_logo.et_header_style_split .centered-inline-logo-wrap #logo{height:35px}.et_header_style_centered #top-menu>li>a{padding-bottom:6px}.et_header_style_slide #et-top-navigation,.et_header_style_fullscreen #et-top-navigation{padding:9px 0 9px 0!important}.et_header_style_centered #main-header .logo_container{height:35px}.et_header_style_centered.et_hide_primary_logo #main-header:not(.et-fixed-header) .logo_container,.et_header_style_centered.et_hide_fixed_logo #main-header.et-fixed-header .logo_container{height:6.3px}.et_header_style_left .et-fixed-header #et-top-navigation,.et_header_style_split .et-fixed-header #et-top-navigation{padding:18px 0 0 0}.et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a,.et_header_style_split .et-fixed-header #et-top-navigation nav>ul>li>a{padding-bottom:18px}.et_header_style_centered header#main-header.et-fixed-header .logo_container{height:35px}.et_header_style_split .et-fixed-header .centered-inline-logo-wrap{width:35px;margin:-35px 0}.et_header_style_split .et-fixed-header .centered-inline-logo-wrap #logo{max-height:35px}.et_pb_svg_logo.et_header_style_split .et-fixed-header .centered-inline-logo-wrap #logo{height:35px}.et_header_style_slide .et-fixed-header #et-top-navigation,.et_header_style_fullscreen .et-fixed-header #et-top-navigation{padding:9px 0 9px 0!important}.et-fixed-header#main-header,.et-fixed-header#main-header .nav li ul,.et-fixed-header .et-search-form{background-color:rgba(255,255,255,0.47)}.et-fixed-header #top-menu a,.et-fixed-header #et_search_icon:before,.et-fixed-header #et_top_search .et-search-form input,.et-fixed-header .et_search_form_container input,.et-fixed-header .et_close_search_field:after,.et-fixed-header #et-top-navigation .et-cart-info{color:#ffffff!important}.et-fixed-header .et_search_form_container input::-moz-placeholder{color:#ffffff!important}.et-fixed-header .et_search_form_container input::-webkit-input-placeholder{color:#ffffff!important}.et-fixed-header .et_search_form_container input:-ms-input-placeholder{color:#ffffff!important}}@media only screen and (min-width:1350px){.et_pb_row{padding:27px 0}.et_pb_section{padding:54px 0}.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper{padding-top:81px}.et_pb_fullwidth_section{padding:0}}Elegant Themes
How to Style Gravity Forms to Look Like Divi (+Bonus Looks!)
Posted on March 8,2017 by Leslie Bernal in Divi Resources | 45 comments
How to Style Gravity Forms to Look Like Divi (+Bonus Looks!)
When it comes to WordPress form plugins there are quite a few options to choose from. In a previous Elegant Themes tutorial I shared some CSS snippets for styling the Caldera Forms plugin. Caldera is a great free form builder plugin option,but today we’re going to be sharing some styling tips for Gravity Forms. Gravity Forms is one of the (if not the) most popular premium form builder plugins for WordPress websites.
Since this post is really a design tutorial I’m not going to go in-depth about the plugin itself,but there are already several really good posts on our blog that do that:Gravity Forms – A Detailed Look at the Personal Edition
Gravity Forms:A Complete Forms Solution for WordPress
15 Best WordPress Forms Plugins Compared
Why Style Your Forms in the First Place?
So you may be wondering why anyone would need or want to style their form from the default look in the first place. Here are just a few reasons:Having your forms match the look and feel of your website — While most plugin forms come with a clean look that could really fit into any website well,they tend to be very generic looking. Matching elements of your site to each other show that you are giving attention to detail and care about tying everything together on an aesthetic level.
To give your form a more custom look — Any time you can customize parts of your website to differentiate yourself and give a bit of uniqueness the better.
Uniqueness can show authority or skill level — If you are a web design agency or freelancer of course showing your skills on your own site shows your visitors that you are capable of some level of design customization,which in turn can lead to acquiring more clients.
To learn! — Anytime you use CSS snippets from our blog to style any element of your site you are opening yourself up to a way to learn coding. You may not have a vested interest in that,and that’s fine,but if you do it’s great to read the comments in the CSS and learn which bits of code are controlling which part of the look on the frontend.
On to the Styling!
Subscribe To Our Youtube Channel
Style 1:The Divi Look
The first style we’ll be implementing is of course the Divi style. Divi has become well known for it’s clean and minimal approach to design and many users would like their forms built using a third-party plugin to look like Divi. Using our first chunk of CSS snippets this is the look you will achieve.
Pre-CSS Setup
Gravity Forms is a drag-n-drop form builder so you should have your Name,Email,and Message (paragraph text) fields dragged over to the appropriate spots. Your form may look something like this in the backend:The first step at achieving this look actually comes before adding any CSS. We are going to limit the field to just one name field,so in the General tab select only the First field to show.
As you saw from our example image above the labels are inside the field,these are referred to as “placeholders.” So next go to the Appearance tab>enter the placeholder text you want to appear.
I’m also going to be using two of Gravity’s ready classes to make columns (by default every field is one column wide). With these I’m telling the form what goes into a left column and what field goes into a right column. Since I want the name on the left I’m entering the class “gf_left_half” into the Custom CSS Class field.
I’m going to do the same with the email field but this time I want it in a right column,so I’ll use the class “gf_right_half”
The CSS Code
The following goes in your Divi Options>Custom CSS box (at the bottom of the page) or your child stylesheet.
.gform_wrapper .top_label .gfield_label,.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label{display:none}input[type=text],textarea{background:#eee;border:none;border-radius:0;color:#999!important;padding:15px!important}.gform_wrapper .gform_footer input.button{float:right;background:transparent;border:2px solid #2ea3f2;border-color:#7c4f28;font-size:22px;color:#7c4f28;padding:12px 23px;border-radius:5px;letter-spacing:2px;cursor:pointer}.gform_wrapper .gform_footer input.button:hover{background:rgba(0,0,0,0.05);border:2px solid transparent;color:#7c4f28}