Skip to Main Content

How to customize the Contact Form 7

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Contact Form 7 is a plugin WordPress incredibly popular for creating contact forms. It allows you to create forms without HTML coding. These forms can offer features such as the CAPTCHA, downloading files, survey fields etc ...

Although the default Contact Form 7 style is sufficient for most basic contact forms, you often have to change it.

This changes the default form structure to make it more accessible. He also adds the shortcode [responsive] above the form so that if there is an error when submitting the form, it is indicated on the form.

If you've never created a WordPress website, find out How to install a WordPress blog with an FTP client

For the standard form, the code generated by the plugin is:

[response] Your Name (required) [text * your-name id: your-name] Your Email (required) [email * your-email id: your-email] Your subject [text your-subject id: your-subject] Your Message [textarea your-message id: your-message] [submit "Send"]

Some plugins to customize the Contact Form 7

1. Contact Form 7 Style

the plugin Contact Form 7 Style has a number of styles to choose from.

Contact styles list of 6For users of the Twenty Fifteen theme, there is also a compatible style.

To apply a style, go to " Contact Styles> Quick Edit Check the form in which you want to apply the style, then click on " Update profile ».

Example of a wordpress contact form2. Contact Form 7 Skins

To use Skins Contact Form 7, create a new contact form and scroll down to the Skins section. You can choose a template and a style for your form.

You will find models dedicated to the forms ofevents, registration and notice.

Contact form page wordpress template

This is what the survey form looks like with the Topaz style using the Twenty Fifteen theme.

Example of a contact form 7 inquiry form

3. Material Design for Contact Form

These styles are based on the style of Material Design.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

This plugin suggests that you delete the default form and use its shortcodes.

Here is an example with the Hestia theme. Note the floating label when the pointer is moved into a field on the form.

Material design example contact form 77 Contact Form Test on some WordPress Themes

Contact Form with ColorMag WordPress Theme

Most of the time, Contact Form 7 will inherit the style of your WordPress theme. This is the case with the theme Coral Dark.

Coral dark contact form

Contact form with the WordPress ColorMag theme

Here is the form without custom style. He inherits the color of the blue button ColorMag WordPress theme.

Contact form with colormag themeI started by uploading a photo to use as the background image for the form and changing the code of the form's labels from gray to white with a blue shadow on the text.

The following changes were to increase the margins between form labels and form fields, modify the subtraction button and add a border when the pointer enters the form fields.

The display of error / success messages when the form is submitted should also be changed so that they display correctly.

The GIF rotating when the form is submitted didn't show up correctly, I found an alternative to Loading.io and referenced it with CSS.

Here is the resulting form:

Customization result of a contact form 7Here is the code:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

div.wpcf7 {margin: 0; padding: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wpcf7 label, .wpcf7-submit {color: white; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; text-align: center; width: 92.5%; margin: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; display: inline-block; width: auto; padding: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); width: 50px; height: 50px; }

If you don't need to scribble in the code, we suggest you take a look at our 10 WordPress plugins to create a contact form on your blog

Discover also 3 premium alternatives that will help you create your contact forms. 

1. W8 Contact Form

W8 Contact Form is one of the most popular contact form plugins on WordPress. It offers lots of features such as submission to multiple recipients, animation support, unlimited form creation, different styles, and a wide variety of additional customization options.

W8 contact form wordpress contact form plugin

In addition, it offers your website or blog a professional system to make it easier to get in touch with your customers. You will be able to personalize all of your forms according to your needs and your tastes.

Download | Demo | Web hosting

2. Contact Us Form

Contact Us Form is a responsive WordPress plugin and a simple tool but rich in customization options that allows you to display a clear and encouraging form, on which your visitors can contact you by leaving their message.

Contact us form wordpress contact form plugin

You will be able to define the necessary fields, choose the best layout of the fields and customize it completely to encourage your customers or visitors to leave their suggestions or messages.

Just set up the e-mail address where you want to receive the messages and use it to grow your business in the most profitable direction.

Download | Demo | Web hosting

3. Slick Popup Pro

Slick Popup Pro is a fairly simple and lightweight WordPress plugin that converts any form created by the plugin Contact Form 7 in a popup. She uses the form and converts it into a beautiful and perfectly responsive popup.Wordpress popup plugin slick popup pro

The popup form can have several uses including: an information collection form, a contact form, a registration form, a quote form, a suggestion / complaint form and others.

Download | Demo | Web hosting

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Recommended Resources

Check out other recommended resources that will help you better create and manage contact forms on your website or blog. 

Conclusion

Here is ! That's all for this tutorial, I hope you'll have more ideas to customize your contact form. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...  

This article features 2 comments

  1. To create a professional website you have to be precise and concise to quickly convince the user. We offer you the opportunity to create a professional website, be it the subject of the manufacture of a showcase site or a portfolio. The manufacture of an online site or professional website is now within the reach of all. That's why your orson website adds all these features by nature.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
106 shares
Share4
tweet
Save102