If you also struggled to find a way to properly style Contact Form 7 to look like a Bootstrap form, look no longer. I spent quite some time researching but I never found a satisfactory answer.
Things to bare in mind before we get started:
-
- You need to be familiar with the LESS, the CSS pre-processor used by Bootstrap
-
- The
:not()CSS selector is supported by all latest browsers but not supported in IE8 (read more)
- The
-
- There’s no point in styling a form created with Contact Form 7 if your theme is not built with Boostrap…
How does it work?
You have two options:
-
- Use LESS. The main advantage is that you can style existing forms without editing the form markup
-
- Edit the form markup to add Boostrap classes. The main advantage is that you’re able to change the form layout
1) Using LES
What’s awesome with LESS and other CSS pre-processors is the flexibility it offers. Variables, mixins and functions are missing ingredients in CSS. Using LESS, I have the ability to “apply” Bootstrap styles to whatever element without editing the markup. I’m simply going to list all form elements and apply the relevant style:
Then you need to compile it. Performance-wise, it’s best to @import this in your theme’s main LESS stylesheet. But you can also compile it as a separate CSS file that would need to enqueue.
2) Changing the form markup
Compared to the previous, you have even more control on the style and layout. But it can be a pain in the ass if you have a large amount of forms to edit. Therefore, it’s not as easy to main as the LESS technique.
To create an horizontal form, we would do the following:
To create a form without label, you can do:
How about a WordPress plugin?
A tiny WordPress plugin could be useful for users who don’t have knowledge of LESS and simply want to style their Contact forms 7. But hey, we’re pretty busy at the time, so probably not for now. The plugin should do the following: