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.

For 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 ».

2. Contact Form 7 Skins

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

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

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

3. Material Design for Contact Form

These styles are based on the style of Material Design.

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.

Contact Form 7 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.

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.

I 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:

Here is the code:

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 plugins of Contact form the most popular on WordPress. It offers many features such as submission to multiple recipients, support for animations, unlimited form creation, different styles, and a wide variety of additional customization options.

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.

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 WordPress extension quite simple and lightweight 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.

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

Recommended Resources

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

• 6 WordPress plugins for verification by CAPTCHA on your forms
• How to Add a Contact Form in WordPress with Contact Form 7
• How to create GDPR compliant forms on WordPress

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.

...