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.

We are Australian WordPress specialists, MailChimp experts and Constant Contact solution sroviders
OrganicWeb are WordPress specialists, MailChimp Experts and Constant Contact Solution Providers.
We deliver results for small and large organizations worldwide.

Speak Your Mind

Your email address will not be published. Required fields are marked *