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 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:
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:
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.
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
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.