Contact Form 7 is certainly the Plugin the most used on WordPress when it comes to creating Contact form. Its main advantage is the simplicity it offers when it is necessary to create a form and the integration into different pages, articles or widgets, syears forgetting the fact that it is available in French.

contact-form-7

If you want to learn how to use this Plugin, then you are in the right place, because in this tutorial I will show you where to download Contact Form 7 and how to use it to add a Contact form on your WordPress site.

If you don't understand something about this article, then please let us know using the comments form. If the article helps you, share it with your friends on social media.

How to install Plugin Contact Form 7

Contact Form 7 is available on WordPress.org, which means you can install it directly from your WordPress dashboard by entering the terms " Contact Form 7“, The occurrence with the same name will be the correct one. However, if you wish to have this Plugin, You can download it directly As a file .ZIP.

After installing it, you will notice that a new link is available on your dashboard, this is the menu: « contact ». He owns two submenus : « Contact forms«  (which brings together all the forms you have created, you can manage your various forms on this site) et « create a form« .

How to create a new form

A small command of the HTML language will be a plus to the understanding of this PluginTo create a new form, navigate to the following location: « Contact >> create a form ». On this site you will see 6 sections:

  • The first (on top) contains the name of the form
  • form: is the workspace where we will create our forms
  • Email: allows you to modify the shape of theEmail which will be sent to the administrator
  • Email In 2: allows you to send the sender a copy of the message he sent (you can disable this option)
  • messages: gives you the possibility to modify the messages likely to appear during the sending of a Contact form. We will not modify these fields, since they are already translated into French
  • complementary settings: this is the text field where codes can be added to produce precise behavior.

We will therefore start by adding a name to our form, which we will name as follows: « New Form ».

Please note: : to add a name to this form, you will have to double-click on the text " Untitled ", A text field will appear.

how-create-a-new-form

In the section " form ", the text field on the left already offers some default fields. Each field starts with an opening tag " <p>», and ends with a closing tag ».

Further down the section online form, you will notice that there is a text field on the left pre-filled and on the right, a drop-down menu containing the different fields that we can add.

Suppose we want to add a field for the phone number, we will choose the option " phone number »On the drop-down menu, which will bring up a meta box with the options of the field we want to add.

The indispensable field here is certainly the name of the field. You can change it, but I suggest you let the extension handle these names unless you know what you're doing. You may need to add watermark text to the new field. To do this, check the box « Use this text as a watermark? » And add the text to the field " default value ".

Please note: : You can determine that a field is mandatory, by checking the box « Required Field ? ».

After finishing, the field « Copy the code below and paste it in the form on the left », Will contain the code of our new field. Copy this value and add it especially before the line of code:

[submit "Send"]

 which is the send button.

My new field is worth the following:

[tel tel-711 placeholder "Your phone number"]

I wrapped it in a tag " " (as mentioned above), with an indicative text, to have a final code identical to this one:

Your phone number : [tel tel-711 placeholder "Your phone number"]

Of course, you can modify the email you will receive, and the sending notification email that the author of the message will receive, but for that, you need to have a good command of the HTML language to achieve satisfactory results. .

When the modification of the form is complete, don't forget to save the form. Only after having done it, you will be able to recover its shortcode (shortcut) and add it on a page, article or even in a text widget.

how the copy-shortcode-of-a-Form

i tried it, and it works pretty well. You can also test at home the various emails sent to users as well as those you receive.

newly-added-the-field form

That's all for this tutorial, I hope it will help you to create your contact page thanks to the WordPress Plugin free Contact Form 7. Feel free to post a comment.