A good while back I wrote a detailed tutorial post showing you how to add some custom CSS to your Gravity forms and buttons.
You can view that post here if you are using Gravity Forms on your WordPress website.
In this tutorial I’m going to show you how to add some simple CSS to style your Contact Form 7 forms.
If you need to install the Contact Form 7 plugin you can find it here. Once activated you can begin to create and customize your forms accordingly.
Once you have created your forms, don’t forget you will need to paste the shortcode for each on you create, in which ever page you’d like the forms to appear.
For this tutorial, we’ll just assume that you have the shortcode embedded in your Contact Us page.
Right, let’s get to it.
The CSS snippets below can be added to your theme’s style.css sheet.
If you’re using a Genesis Child Theme, you can simply go to Appearance > Editor > Stylesheet (style.css) for the theme you’re using.
If you’re using a Thrive Theme, you can go to Thrive Dashboard > Theme Options > Style & Layout Settings and use the Custom CSS box provided.
If you’re embedding the shortcode into a page built using Thrive Content Builder, just use the Custom CSS widget provided in the options sidebar in The Content Builder Editor.
The following CSS code below will style your Contact Form 7 container backgrounds and borders site wide. So that means all the forms on your website.
If you don’t wish to add a custom background or border, just don’t bother adding this code.
If you use the code below as is, you should end up with a light grey background with a thin dark grey border. You can adjust the values to your liking.
The following CSS code will style the font size, form input fields, text area, background color, font color, form width and padding. You can adjust these values to your preference.
If you use the code below as it is, you should see each of the form field in a light grey shade.
The following CSS code below will style the Submit Button of your Contact Form 7 forms.
There are three rules here: input, input:hover and input:active. Let me explain what each one does if you’re not too sure.
So you can change the values for each of these to style to your liking. Check out this post for tips on how to create ghost buttons if you’d like to use them.
If you use the code below as it is, you should see a red button, and it should change to a grey shade when you hover your mouse pointer over the top of it.
If you are using a custom background and border with your form fields inside of these, you might have noticed your input fields are too close to the edge of the container border.
If you’d like to add some spacing around these, use the following CSS code.
You can adjust these to your liking. Increasing the px value will increase the space around your form fields, and the edge of your background container.
If you use all of the above CSS codes as it is without modifying anything, your forms should look something like this.
So there you have it, a quick and easy tutorial for adding some simple custom CSS to your Contact Form 7 forms to make them unique to your site.
If you have some basic knowledge of CSS, you can play around with the values to really personalise your contact forms.
Of course if you don’t want to be messing about with CSS snippets, and don’t mind installing yet another plugin into your WordPress blog, there is an alternative solution.
You can download and install the Contact Form 7 Style plugin.
This plugin has all the necessary options to help you customize your forms with a simple click of the mouse.
I will be updating this tutorial post in the near future with more styling tips, so be sure to subscribe to my email newsletter for updates.
For now though, enjoy.
If you have any questions, please leave them in the comment section below as always.