Genesis – Style Gravity Forms Email Field

In my opinion, the two best WordPress contact form plugins are Contact Form 7 and Gravity Forms. Gravity Forms styling is often WordPress tips and tricks by the Australian WordPress expertsconfigured into theme CSS these days such as in StudioPress themes. A problem I’ve encountered however is occasionally the email field of Gravity Forms doesn’t display the same as the other fields in Genesis framework themes.

Fortunately it’s a quick and easy fix to make the email field look the same as the name field, message field and so on.

How to make the Gravity Forms email field look the same as other fields

Just follow these steps to get your email form fields looking consistent with other fields.

  1. From the WordPress dashboard go to Appearance -> Editor. You’ll now be viewing your theme stylesheet.
  2. Search for .gform_wrapper input[type="text"].
  3. Copy the styling under .gform_wrapper input[type="text"]. As an example, for the StudioPress Metro Pro theme, the styling to copy is:
    {
     font-size: 16px;
     font-size: 1.6rem;
     padding: 16px;
     padding: 1.6rem;
    }
    
    
  4. Go to edit a custom CSS file that you’ve created (or just install a Plugin such as PC Custom CSS which allows the inputting of custom CSS).
  5. Add the class .gform_wrapper input[type=email] with the copied CSS script and save the custom CSS. The new entry will look something like
    .gform_wrapper input[type=email] {
     font-size: 16px;
     font-size: 1.6rem ;
     padding: 16px;
     padding: 1.6rem ;
    }
    
    

That’s all there is to it. Your form fields will now look the same as each other.

Australian WordPress Specialist

Australian WordPress Specialists.

OrganicWeb provides leading WordPress solutions. Specialities include developing high converting Websites built with SEO from the ground up. Contact us to get more customers from your Website.

Leave a Reply