How to Customize Your Contact Form 7 Style the Easy Way
Contact form is a very important element of every website. We use them to collect and share various types of information and therefore have to take care that they look just as well as the rest of our website. A contact form that is too plain, with a style that simply seems like it doesn’t belong with the page can not instill the feeling of trust in your users, and it would be a pity to lose your audience just when they wanted to take a step further and leave some of their data in your contact form.
A very popular way to create a contact form is with a Contact Form 7 plugin, a practical and easy-to-use tool that is often included for free with many WordPress themes that allows you to create all kinds of contact forms easily. This plugin covers all the technical aspects of creating a contact form – to style it you’ll need additional skills or another plugin.
In this article, we will show you how easily you can style your contact forms to match your website design with a free tool.
Stay tuned to learn more about:
Qi Addons for Elementor is a feature-rich plugin that comes with 60 free and 40+ premium widgets and includes a Contact Form 7 widget that is specifically created to help you with stylizing your forms and it’s free. The plugin requires zero coding knowledge and literally, anyone can use it comfortably. It doesn’t provide you with the option to create contact form, but if you are using Contact Form 7 plugin, with Qi you will be able to customize and redesign your forms in such a way that they perfectly match your website style.
Qi Addons for Elementor is easy to install and configure, and the procedure is pretty much the same as for any other plugin.
After you install it, go to the page where the contact form you want to style is and choose to edit it in Elementor.
Then type Contact Form 7 in the search field in the left hand menu to find the Contact Form 7 widget.
Now, when you got it, click on it and hover over the place where you want your contact form to be.
The form you are adding this way is the form you created with the Contact Form 7 plugin, this widget is made just to help you style the form, you can not create a form with it. So, now you have your contact form placed where you wanted it to be, and you can see the Contact Form 7 widget settings in the left-hand menu.
The first tab in the menu provides you with the option to choose which type of contact form you want to have on the page. We can choose between three options – Contact form 1, Newsletter, and Contact Us, you can, of course, choose any of the forms you previously created for your site. Let’s now show you how we customized the Contact Us form on our site.
To open the options for styling the form, click on the Style tab.
The first option refers to Label typography, where you can set the font, the size of the font, spacing between words of the label, font style, spacing between the letters in words and the great thing is that you get to see all the changes live immediately so you are not doing anything blindly.
In the picture below you can see precisely how our choices reflected on the label typography.
Next option refers to the label color.
You can create your own shade, depending on your needs. We choose dark blue for our label as it fits fine with the background color of the page.
Now, when you are all set with the label style, the next settings refer to input style.
You will also have similar options here – you can choose the input typography font style, size and color. You can also set the background color of the input field if you don’t want it be white as it is per default. You will also find settings for adjusting the border style of the input fields here and you can choose between solid, dashed, grooved, dotted, double or none and for each of the options you can make additional adjustments.
You can also set different styles when the input fields are active. All the same options are at your disposal, but will be applied only when the input fields are active.
Next settings refer to the checkbox style. This tiny element is very important in a contact form and it should look neat and easily accessible as this is the step where you offer some kind of choice to yout website users.
With Qi, you will easily make this element look perfect. You get to set the checkbox input size, you can leave more or less space between two checkboxes as well as between checkboxes and other input fields. You can see clearly in the photo below how our choices affect the contact form in this case:
The next settings that are important to know about are the Button Style settings.
You can change the color of the button background, set the border around the button to be in different color and style (solid, dashed or dotted). You can also change the color of the text in the button by choosing the desired color in the Button color option. All the changes are visible immediately so you can easily understand which of the settings refers to which element of the contact form.
If you want the style of the button to change on hover, click the Active tab and adjust the settings – you can adjust the button hover color, button hover background color, button hover border color etc.
When you are satisfied with the look of the contact form you can now adjust the spacing by opening the settings in the Spacing Style tab. You can adjust the spacing for every element of the contact form here.
The Global Style settings refer to the alignment style of the contact form. You can choose between left, center and right alignment.
Error Style settings allow you to control the style of the error message that is displayed when someone doesn’t type the correct data into the form. You can set the error message position, typography and color easily.
The Response Style settings allow you to fine tune the details of the responses that are inserted in the contact form. You can control the font, color of the font, set response padding and response margin as well as border type.
This is how our form looks like after someone has sent the message:
And, just like that, you have a an elegant contact form on your page, ready to work for you.
Wrapping It All Up
The great thing about Qi Addons for Elementor is that you can see all the changes you make live so you can quickly move through different options and learn how to use them intuitively. Although adding contact forms is not a particularly creative task, this plugin allows you to be creative even in that case. The look of your contact forms can hugely impact the way your users perceive you, and if you manage to deliver the same standard in this department too, it will be a huge plus for your website, your brand, and your business.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
