Skip to Main Content

How to Add a Contact Form in WordPress with Contact Form 7

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.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 certainly the Plugin most used on WordPress when 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 have come to 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 to 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: « get in touch ». 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
  • E-mail: allows you to modify the shape of thee-mail 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 ».

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

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]

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 ".

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]

Remark : 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 that 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 HTML 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

Easily create your Online Store

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

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 create your contact page with the free Contact Form 7 WordPress plugin. Feel free to post a comment.

This article features 10 comments

  1. I have done the installation many times over the months, it looks fine to me, but when I try I get the following message "An error occurred while sending your message. Please try again later ”…
    I don't see what's wrong ...
    I notice that my form on the site does not bear a name even though I gave it some ...

    thank you,

    Sincerely

  2. Hello,
    I integrated the code mentioned above in the contact form (access via the "contact us" button in the header of the home page). Everything is displayed in the "messaging" page I fill in all the fields but the e-mail I receive only contains the name, subject and e-mail, not the phone number 🙁
    Where did I go wrong ??? Thanks in advance if you can help me

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
1 shares
Share
tweet
Save1