A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Customize Your Contact Form 7 Style the Easy Way

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:

Using Qi Addons for Elementor for Stylizing Your Contact Forms

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.

Choose to edit Contact form in Elementor

Then type Contact Form 7 in the search field in the left hand menu to find the Contact Form 7 widget.

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.

Add CF widget to your page

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.

Contact form style settings

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.

Chooce Contact Form

Setting the Contact Form Style

To open the options for styling the form, click on the Style tab.

Contact Form 7 style options

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.

Label Typography options

In the picture below you can see precisely how our choices reflected on the label typography.

Label Typography example

Next option refers to the label color.

Label color options

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.

Label color

Now, when you are all set with the label style, the next settings refer to input style.

Imput style settings Contact Form

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.

Impu style example Contact Form

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.

Style for active fields

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.

Checkbox style contact form

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:

Contact form checkbox example

The next settings that are important to know about are the Button Style settings.

Contact Form 7 button style

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.

Button example Contact form 7

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.

Spacing stile CF7 plugin

The Global Style settings refer to the alignment style of the contact form. You can choose between left, center and right alignment.

Global Style Contact Form 7

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.

Contact Form 7 error settings

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.

Response Style settings Contact form 7

This is how our form looks like after someone has sent the message:

Contact Form 7 stilization Qi Addons

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!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply