Styling Gravity Forms with Bootstrap

Bootstrap Logo

I use Bootstrap frequently for projects that need rapid deployment. It’s an excellent framework that’s proven itself reliable in many situations. Because most of my development work is in WordPress, I also use Gravity Forms as one of my go-to plugins, because it handles even the most complex and customized form needs easily, does the heavy lifting for me and speeds up development time exponentially. In fact, if a client has any form requirements beyond a simple contact form (and frequently, even then), I just build a Gravity Forms license into my estimate for the project. This is a plugin that has become an indispensable tool in WordPress development.

If you’ve used Gravity Forms with Bootstrap more than once in your WordPress development, you’ve discovered that applying Bootstrap’s responsive form styling to your Gravity Forms isn’t easy. The reason is that Gravity Forms generates forms with multiple containing elements that confuses Bootstrap’s descendent class selectors and prevents the framework from applying its responsive goodness. The nuts and bolts of it look sort of like this:

Gravity Forms Elements

Gravity Forms gives you the option of outputting the plugin’s CSS with your forms. The styling that’s included with the forms is relatively basic, and, like any other plugin, is dependent upon the classes and descendent selectors just as is Bootstrap’s. Gravity Form wraps its form elements in an unordered list, the <li> ‘s of which contain classes such as  “gfield”, with additional containing <div> ‘s inside the <li>’s with a class of “ginput_container.” These classes and additional elements wreak havok on Bootstrap’s styling. When working in Bootstrap, select the option for Gravity Forms to not output CSS (see below).

Bootstrap’s Elements

Bootstrap has simple requirements to handle your forms responsively, as well as apply its focus effects and other styles. Essentially, this involves wrapping the form’s labels and inputs inside of a containing <div> with a class of “form-group”, giving most inputs a class of  “form-control,” and, of course, using Bootstrap’s “btn” and/or “btn-default” classes for the submit button. Simple enough when you’re coding the form yourself, but it doesn’t match up with what Gravity Forms is generating for you.

A Balancing Act

I’ve run into this problem a couple of times, most recently on this very site. For me, especially when I’m working on a tight deadline (and, honestly, when is that ever not the case?), the easy integration that Gravity Forms provides for even complicated forms, and the development time in building my own forms that it removes from the process, is worth the styling issues. With that decision made, I have two choices. One is to handle the responsive styling of the form(s) myself. That’s not necessarily a complex thing to do, but it can be time consuming. If you’re so inclined, go for it. Call me stubborn, but, if I’m using an excellent framework like Bootstrap to handle the heavy lifting of responsive development out-of-the-box, then I think the framework should take care of this. The good thing is that, after a little research and some additional CSS, it’s easy to get your Gravity Form to behave in Bootstrap’s framework, and it’s faster than doing the responsive styling by hand. Here’s how I did it.

A “Raw” Gravity Form in Bootstrap 3

After building the contact form for this site in Gravity Forms, and placing it on a basic page in the current version of Bootstrap’s framework, I received this:

Screenshot of Gravity Form with CSS output disabled

 

Not pretty at all. That extra field sitting at the bottom is the honeypot, which I prefer as a spam prevention method to something like a Captcha. That won’t appear if you don’t select that option in your form. By the way, as I mentioned before, this rendered on the page this way because I set the CSS output to “off” in my Gravity Forms settings. You can do this in Forms > Settings, and select the appropriate option under General Settings:

Screenshot of Gravity Forms settings options

 A Little CSS Love

Next,  with a little digging, I took the source code that was generated by Gravity Forms and identified the corresponding elements accounted for in Bootstrap’s styles. I then created a separate stylesheet that I called “gravity_bootstrap.css” for these styles. This is a personal preference…I like to keep my styles separated in different files, but you can place this wherever you like. Just make sure that these styles are far enough down the cascade to take effect appropriately, so as to avoid the semantic nightmare of placing important flags on everything. My cascade was this: Bootstraps’ core CSS files (“bootstrap-theme.css”, and “bootstrap-min.css”), then the “style.css” file for my custom theme, then “gravity_bootstrap.css”. I needed to place a custom class on the form elements, which I called gr_bs_form. This allowed me to achieve the correct descendant selectors in the gravity_bootstrap stylesheet. You can add this custom class via the Gravity Forms interface easily enough by selecting the “Appearance” tab when editing any given form element.

Screenshot of Gravity Forms Custom CSS Class

Because the first form you place on your site generally receives the same treatment by Gravity Forms, your code will likely look  much the same as mine, with some tweaks for personal preferences. Here’s my “gravity_bootstrap.css” file:

Note: This is the raw CSS…I’m not using Sass for this demo

Just as when you do your research into your custom build when downloading Bootstrap, the time in researching these connections paid off, and I had a styled, responsive form.

Bonus: Some Love for the Comment Form

Of course, I wanted the comment forms to have a consistent style with the contact form. If your project is using WordPress’s out-of-the-box comment template (most of mine do), then you just need to get Bootstrap’s classes applied to the various elements for the framework’s styles to take effect. Because of the target audience for this site, I’m not concerned about many browsers hitting it without JavaScript, so I handled this by adding the classes to WordPress’ markup on page load with a couple of lines in the main JavaScript file for my custom theme:

This is a really simple solution to get the best forms plugin for WordPress and the most popular responsive framework for your front end to play nicely together in your custom theme.

20 Thoughts

      • Hi, Rhys

        Glad you found this useful! I have this running in Sass, but thank you for offering. I keeping meaning to write a follow-up post to this with a Sass version 🙂

        Thanks for reading!

  • I installed gravity forms on my site not and hadn’t realised that they were not responsive. As I am not an experienced coder can you advise an easy fix for this problem as they are not functioning on mobile at all. tks

    • Hi, Rob

      Thanks for reading! I took a look at your site. For the contact form on your front page, it looks like the problem that you’re running into is the styling for the column that is containing the form. When you reach a mobile screen width (767px and below), the containing element is given a width of 24%. If I remove that width in my inspector, the form takes 100% width because it’s containing element takes 100% width and isn’t constraining it any longer. That style is coming from a custom stylesheet, the same one that is setting the styles for your Gravity Forms elements.

      Is this a custom theme, a child theme, or an unmodified theme that you purchased?

  • Hi Dave,

    Love the site!

    I am using gravity forms to create some online questionnaires (myvisa.com.au/pre-consultation-questionnaire). Obviously gravity forms isn’t responsive so the formatting on my mobile devices looks very poor – questions are crammed together so it is almost illegible. I’ve tried everything to make it responsive – custom css, using the goodspace style sheet. I’m a novice coder:) I’m running the goodspace theme. Everything I try does not seem to work. I tried this your CSS formula above but it still looks quite dodgy and looks particularly bad on the laptop although it does make it responsive.

    Any ideas/suggestions?
    Much appreciated, Julian.

    • Hi, Julian

      Thanks for reading!

      When I view the page source for your site, I see a couple of things. First, your theme is built on an older version of the Skeleton responsive framework. The demo for this post is for using Gravity Forms with the Twitter Bootstrap framework. Still, if you’re not seeing your CSS take effect, that needs to be fixed, but be aware that adding Bootstrap styling to Skeleton’s framework may result in some visual inconsistencies or unexpected results.

      Second, I see that Gravity Forms is still loading it’s CSS. Disabling the Gravity Forms’ CSS would be a good place to start. The styles that I used in the post were written assuming that the Gravity Forms plugin styles were disabled.

      To disable Gravity Forms styles, go to Forms > Settings, and de-select “Output CSS.” I detail this in the “A Raw Gravity Form in Bootstrap 3” section of my post.

      Also, you’re using form elements that I didn’t account for in my demo above…radio buttons, for example. These may require you to do further adaptation. However, Skeleton has some nice out-of-the-box styling for forms, so I would begin by shutting down Gravity Forms’ CSS and seeing if that helps. You might then start removing your custom CSS and let Skeleton’s handle the form.

      Be aware that, once you disable Gravity Forms’ CSS, you’ll need to manually style things like validation fields that need to be hidden from view.

      If you try this but are still having problems, let me know and we can talk offline about how we can get this fixed for you.

      • Hi Dave,

        Thanks for the quick reply! Sorry I haven’t been in the office to respond.

        I already tried disabling the Output CSS and this only ruins the format and makes it almost impossible to use on the laptop. I can make it responsive through this method but it looks very poor.

        Are you sure I am using Skeleton? I was under the impression I was using Goodspace, or is Goodspace just a program of Skeleton’s…?

        I’m not sure what to do. I fully understand if you cannot help me, thanks for the support and for replying.

        • Hi, Julian

          Yep, you’re definitely using Skeleton 🙂

          Goodspace is the theme that you’re using. The developers who built Goodspace have used Skeleton as a framework for the front end. Skeleton is a very nice framework, and I use it a lot. It’s a popular choice among developers.

          If you’re disabling Gravity Forms’ CSS output and still seeing issues, then there’s something else going on that I can’t see from the outside. The fact that your custom styles aren’t taking effect means that they’re either being overridden (by an important flag, higher specificity, or just something further down the cascade), or aren’t targeting the elements correctly. I’d need to actually log in and look “under the hood” to get an idea of where the styles are breaking. It shouldn’t be too difficult to fix, but I can only give ideas without being able to do proper tests.

          I’m happy to send you my contact information if you want to talk further about it.

  • Hi Dave,

    Thank you so much for providing the code to highlight around the field input along with border radius.

    It is perfect.

    I attempted to do the same and my code only half worked.

    If I show you what I have, would you be able to be so kind and enable your code to activate along with the rest of my code?

    This is what I attempted (below):
    I think where I am off course is that I am not able to your added code to my gravity form id 2.
    Any suggestions would be very helpful.
    Thank you very much and even if you are too busy to get this.
    Best
    janet

    /* GRAVITY FORM (mr id 2): March 29, 2015 
    ——————————————— */
    body #gform_wrapper_2 .gform_body {
    background-color: #ff11c3;
    border-radius: 5px;
    border: 3px;
    font-size: 14px;
    padding-left: 22px;
    padding-right: 18px;
    padding-top: 18px;
    padding-bottom: 18px;
    }
    body #gform_wrapper_2 .gform_body > .ginput_container > textarea{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    height: auto;
    overflow: auto;
    }
    .gr_bs_form > .ginput_container > input:focus, .gr_bs_form > .ginput_container > textarea:focus{
       border-color: #66afe9;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    – See more at: http://www.davidbrown-portfolio.com/styling-gravity-forms-bootstrap/#sthash.wXMIH9Lf.dpuf
    ::-webkit-input-placeholder {
       color: #afafaf;
    }
    :-moz-placeholder {
       color: #afafaf;
    }
    :-ms-input-placeholder {
       border-color: #67b7e1;
       color: #afafaf;
    }
    /* BUTTON (mr id 2): March 29, 2015 
    ——————————————— */
    body #gform_wrapper_2 .gform_footer input[type=submit] {
    background-color: #67b7e1;
    border: 3px solid #67b7e13;
    }

    • Hi, Janet

      It’s difficult for me to know what’s going on without seeing the page. If you can send me a URL, I can take a look and get a better idea of what might be missing. If you don’t want to place it in the comments here, you can send it via email, also.

      Thanks!

  • Hi Dave,

    Thank you so much for responding. Would you please be so kind and respond back via email.

    (I did click your email link) but it took me to your contact form.)

    Many thanks.
    Janet

    • Hi, Janet.

      Yes, please use the contact form and I’ll get the message and be certain to respond. However, in looking at your initial comment again (it was really late the first time I read this), I realize that you have an extra string in the middle of your code:

      “– See more at: http://www.davidbrown-portfolio.com/styling-gravity-forms-bootstrap/#sthash.wXMIH9Lf.dpuf

      That gets appended when you copy and paste directly from the post (I actually need to disable that, but that’s another issue). If that string is actually sitting the middle of your stylesheet, then it’s breaking anything that’s happening after. Try removing that and let me know how that works.

  • Hi Rob,

    Great article thanks.

    I’m having the same problem with gravity forms. Here is the link http://www.travisraab.com/contact

    Can you tell me where I’m supposed to paste this code you wrote to get my form to look neat like yours? I’m very unfamiliar with the process.

    Thanks!
    Travis

    • Hi, Travis

      Thanks for for reading. The styles that I included here are specifically intended to work with the Twitter Bootstrap framework. I took a look at your site, and it doesn’t appear that your site is using Bootstrap, so be aware that these styles may appear inconsistent with the rest of your site.

      As I indicated in the post, I made a completely separate stylesheet for this, and enqueued it last so that it’s furthest down the cascade (which is to prevent it from being over-ridden by other styles). You can still try this and see what you get, but be aware that you’ll be using Bootstrap styles outside of Bootstrap. I would think about using something more custom in your position, or perhaps just borrowing the form styles from something like Topcoat. That would just involve adding the extra stylesheet, and adding their classes to the Gravity Forms fields.

Leave a Reply to Janet Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.