How to Add Contact Forms Using Plugin - P1: Use Contact Form 7
Tags: wordpress
Published: 2020-10-12 07:30:35

Contact form is one of the most important elements if you want to have a professional website. It's even not difficult to create and set up a contact form if you use dedicated plugins. To help you create contact forms with plugins easily and quickly, we've compiled and written instructions on how to use the most popular [contact form plugins](https://gretathemes.com/best-wordpress-contact-form-plugins/).

In the first part of the series "Create Contact Form Using Plugins", let's find out:

-   What is contact form?
-   Benefits of contact form
-   How to use the Contact Form 7 plugin to create a form?

### What is Contact Form and Its Benefits?

### What is Contact Form?

Contact form is a term that is familiar to marketers. Using contact form, users can send emails and contact you right on the website without knowing your email address.

A contact form usually has many fields for users to fill in the required information such as email, phone number, name, email content, ... Besides, it is usually placed on a Contact page or the area where you need to get customers' contact information. Here is an example:

![A contact form is in a contact page of WordPress website.](https://cdn-images-1.medium.com/max/800/0*A7VkDTKQ9a1upFCa.png)

### Benefits of Contact Form

Because users can use the contact form to send information to the site owner (to leave their contact information, to send support requests or other requests, ...) right on that website, it makes the contact much more convenient and quick.

In addition, using a contact form can keep your email private as well as reduce spam and security threats. Therefore, you won't have to deal with the mailbox full of spam and trash every day.

Also, contact forms help you collect users' information more easily because they have to fill in the information you request in the form. This is one of the strategies to [get more leads](https://metabox.io/lead-generation-strategies-in-2020/).

In general, to build a professional website and gain more benefits for your business, you should use contact forms.

### How to Create a Contact Form

You can code to create fields and forms as you like. However, if you aren't a coder then this isn't possible. Or you have to pay a sum of money hiring a coder to do this.

Hence, the most useful solution to create contact forms for non-tech users, or even developers (to save time and effort) is using a plugin. Now, there are a lot of contact form plugins that are simple, easy, fast, and free. So, there's no reason for not using them to create a contact form, right?

In all the articles of this series, I'll show you how to create a university registration form as follows:

![I create a university registration contact form](https://cdn-images-1.medium.com/max/800/0*lU4yPeh5NNFVOIEq.png)

### Create a Form Using Contact Form 7

In this first article of the series "Create Contact Form Using Plugins", I use Contact Form 7 --- one of the most popular free contact form plugins available today.

First of all, download and install this plugin from the plugin repository on wordpress.org, or go to **Dashboard** > **Plugin** > **Add New** to install and activate it.

![](https://cdn-images-1.medium.com/max/800/0*DG-iGBGhKTAxiyAg.png)

Here are specific instructions to create the university registration form above with this plugin.

### Interface

Go to **Dashboard** > **Contact** > **Add New** to create a new contact form. Here is the interface that you'll work with:

![The interface of Contact Form 7 plugin.The interface of Contact Form 7 plugin.](https://cdn-images-1.medium.com/max/800/0*076i-HTp-5Dexzzo.png)

(1): Enter the name of the contact form\
(2): Tabs to create and set up a contact form, including:

-   **Form** tab: create fields for the contact form
-   **Mail** tab: set up emails you receive from contact form
-   **Message** tab: include notifications that users receive when there is an error of imputing data, form can't be sent, submitting form successfully, ...
-   **Additional** **Settings** tab: add other elements to the contact form.

### Create Fields for Contact Form

As I mentioned, a contact form contains fields that allow users to enter information or interact with it. Here is the **Form** tab that is used to create these fields:

![](https://cdn-images-1.medium.com/max/800/0*EbTdAETGF3p285vR.png)

(1) consists of fields to add to the form such as name, email, number, send button, ... To add any field, just click the corresponding field's name.

(2) is the area for displaying the form structure in HTML format. When creating a new contact form, you'll have the default structure for a basic form with simple fields such as email, name, subject, and submit button. You can use this form immediately or create a new form based on it.

#### General Instruction for Fields

After choosing the desired field, a popup where you enter the necessary information in the field will show up. Each field requires different information, but in general, they all have the following sections:

**Name**: name attribute\
**Default value**: the default value of the field\
**Id attribute**: ID of the field\
**Class attribute**: the class of the field

**Note**: the **ID attribute** and **Class attribute** are optional and you can enter your custom information there. If you want the following steps of styling the contact form easier, you should fill in these 2 sections.

After filling in this information, you'll see the **Tag of the field you've created** at the bottom of this box. Click **Insert Tag** to insert this field into the HTML of the form.

![](https://cdn-images-1.medium.com/max/800/0*zq7RcBKjsEEjU2JK.png)

Normally, the tag of each field in a contact form created with Contact Form 7 will have the following structure:

<pre>[field* name_attribute id:field_id class:field_class "the default value of field"]</pre>

**Explanations:**

-   `field *` is the type of field you choose. This is the most important and must-have part of a field.
-   `*` means that this field is required. If you don't want to force users to enter it, remove the `*`.

To understand more about the structure of a field tag in Contact Form 7, refer to [this documentation](https://contactform7.com/tag-syntax/). Understanding the meaning and HTML structure of a contact form will make it easier for you to edit, create, and add new fields using code. Especially with coders, they can write HTML code to create the form according to the above syntax. However, with non-coder, it may be difficult, so I recommend following these steps below.

With contact forms in this series, I need to choose the following fields:

**Fields' nameFields' type**Your nametextYour phone numbernumberYour emailemailLocation to studydrop-down menuMajordrop-down menuRegister tocheck boxSubmitsubmit

All fields have the common information that I said above. Therefore, I just guide the specific parts of each field now.

Below are detailed instructions for each field.

#### Create a Field for Entering Name

Select the **text** field and enter the basic information for the field into the box:

![](https://cdn-images-1.medium.com/max/800/0*pvcyoCZKTjCAfuLx.png)

In the **Field type** section, you can choose **require** so that this field is compulsory to be filled (this is optional).

**Note**: In the **Default value** section, choose **Use this text as the placeholder of the field** to display this content on the field before users enter data. You should use this mode to explain to users what they need to fill in the field.

The **Akismet** section is related to the Akismet plugin --- an anti-spam plugin. If you don't have this plugin then don't care about this section.

#### Create a Field For Entering Phone Number

Select the **number** field and fill in the basic information for the field.

![](https://cdn-images-1.medium.com/max/800/0*D20DvqRQeZKXXQiU.png)

In the **Field** **type** section, choose a type for this field. There are two types of fields: **Spinbox** and **Slider**.

The **Slider** will display a scale for choosing number as follows:

![](https://cdn-images-1.medium.com/max/800/0*1YI7cyHF-Xq9ej89.png)

This style is suitable for scoring or choosing numbers based on a specific scale.

Meanwhile, **Spinbox** allows you to enter any number, the sequence of numbers in the field such as phone number, card number, ID card number, ... So in this example I choose Spinbox.

The **Range** section allows you to choose a limit for the number. In this example, I don't need this section so I didn't fill in anything.

#### Create a Field for Selecting Majors and Study Locations

With this field, select **drop-down menu**.

![](https://cdn-images-1.medium.com/max/800/0*9nsmaDKi0pLw_C3a.png)

Now, fill in options for majors and locations in the **Options** section, keep in mind that each option is a line.

If you want to allow users to select multiple options at once, click **Allow multiple selections**.

#### Create a Field for Choosing the Purpose of Registration

Select the **checkbox** field.

![](https://cdn-images-1.medium.com/max/800/0*6UAambwCYHESeyWd.png)

The **Options** section is similar to the one in the **drop-down** **menu** field above. Additionally, there're more options for checkboxes as follows

-   **Put a label first, a checkbox last**
-   **Wrap each item with label element**
-   **Make checkboxes exclusive** (you're only allowed to choose 1 option).

#### Create the Submitting Button

Finally, select the **submit** field and just fill in the information as the following requirement (note that **Label** is the word that will show up on this button, eg "Submit", "Register", "Confirm").

![](https://cdn-images-1.medium.com/max/800/0*bk0QO3iSg-xG3Air.png)

Notably, when creating a new form, this plugin has already automatically created a submitted field. Therefore, you can use this field without making a new one.

### Add Labels for Fields

Now you've finished creating fields for the contact form. However, your fields haven't had a name to display on the contact form as follows:

![](https://cdn-images-1.medium.com/max/800/0*qYcCZ7H1ZuZt2bT7.png)

Therefore, you need to add **labels** to fields by inserting the following code structure in the HTML part of the form:

<pre>&lt;label&gt; Field Label

[Field's tag] &lt;/label&gt;</pre>

Next, write the label of the field in the **Field Label** section. Then fill in all the above information, click **Save**.

After creating the fields, my contact form has the following code structure, note that I have arranged the fields to display them in the desired position on the front end:

<pre>&lt;label&gt; Your Name (required)

[text* your-name "enter your name"] &lt;/label&gt;

&lt;label&gt; Your Phone Number

[number phone placeholder "enter your phone number"] &lt;/label&gt; &lt;label&gt; Your Email (required)

[email* your-email "enter your email"] &lt;/label&gt;

&lt;label&gt; Major

[select* major "Computer science" "Linguistics" "Agriculture" "Engineering" "eCommerce"] &lt;/label&gt;

&lt;label&gt; Location to study 

[select* Location-to-study "New York" "Chicago" "Los Angeles" "Washington D.C" "Houston" "Philadelphia"] &lt;/label&gt;

&lt;/label&gt; Register to

[checkbox* register label_first "Study" "Take a tour" "Consult"] &lt;/label&gt;

[submit "Submit"]</pre>

This time, your contact form still doesn't show up on the website. You need to do some more steps to display it on the front end.

### Contact Form Settings

#### Set Up Email

The **Mail** tab allows you to customize the content of the email that you'll receive when contact forms are sent by users. To set up this section, you need to insert [mail-tags](https://contactform7.com/tag-syntax/#mail_tag) of the fields in the contact form that you've just created. Here is an example:

![](https://cdn-images-1.medium.com/max/800/0*i3rcctqUolGtTgWK.png)

**Explanations:**

-   **To**: Enter the email of the person that is in charge of checking the contact form.
-   **From** and **Subject**: You should set a name here to determine who sends this contact form.
-   **Message** **Body**: add mail-tags here to ensure that when you receive emails from the contact form, it'll display all the information that you request from users.

#### Other Settings

**Message tab**

![](https://cdn-images-1.medium.com/max/800/0*F8ObjrhdhLYFsVFP.png)

Enter messages that are used in the situations as you can see in the tab description. For example, after users submit the form successfully or fail to submit it, you should add a message to let them know about this. Or when users forget a required field, you should also add a message so users can come back to fill in that field. Although these are small details, you should pay attention to enhance the user experience.

**Additional Settings Tab**

![](https://cdn-images-1.medium.com/max/800/0*DmRkyTjmQvpc5gZR.png)

This tab helps you to add code snippets to install the following:

-   Subscribers-only mode
-   Demo mode
-   Skipping mail
-   Acceptance as validation
-   Flamingo settings
-   Suppressing message storage
-   JavaScript code

There are some quite useful parts that you should use such as:

-   **Subscribers-only mode**: This mode allows only logged-in users of your website to submit the contact form. This eliminates spam messages and it is only for those who really want to contact you.
-   **Acceptance as validation**: add a feature to display notifications for the **Acceptance checkbox** when users don't check this box but move to another field. Because by default, if users don't check the Acceptance checkbox, the error message will only display after they submit the form. This Acceptance checkbox is often used to create fields like "I agree with the website terms" but in case you create other content types, you may need to add **Acceptance as validation**.

To learn more about the other features in the **Additional Settings** tab, you can read more [here](https://contactform7.com/additional-settings/).

### Display the Contact Form on the Website

The final step is displaying the contact form that you've just created on the website.

Still at the interface to create a new form, copy the shortcode and paste it on the desired page or post.

![](https://cdn-images-1.medium.com/max/800/0*4d5ClqtLPSB2EuUb.png)

Here are my final results:

![](https://cdn-images-1.medium.com/max/800/0*dZ-i2cpTPxHjmogo.png)

However, my contact form doesn't look very good, so I need to style it a bit.

If you want to re-style the contact form like the template that I gave at the beginning of this article, you'll need to edit the HTML of the form as follows to make it easier to style:

<pre><span style="font-weight: 400;">&lt;div class="form__field form__full-width"&gt;</span>

<span style="font-weight: 400;">    &lt;label&gt;Your Name (required)</span>

<span style="font-weight: 400;">        [text* your-name placeholder "enter your name"]</span>

<span style="font-weight: 400;">    &lt;/label&gt; </span>

<span style="font-weight: 400;">&lt;/div&gt;</span>

<span style="font-weight: 400;">&lt;div class="form__field"&gt;</span>

<span style="font-weight: 400;">    &lt;label&gt;Your Phone Number</span>

<span style="font-weight: 400;">        [number phone placeholder "enter your phone number"] </span>

<span style="font-weight: 400;">    &lt;/label&gt;</span>

<span style="font-weight: 400;">&lt;/div&gt;</span>

<span style="font-weight: 400;">&lt;div class="form__field"&gt;</span>

<span style="font-weight: 400;">    &lt;label&gt;Your Email (required)</span>

<span style="font-weight: 400;">        [email* your-email placeholder "enter your email"]</span>

<span style="font-weight: 400;">    &lt;/label&gt;</span>

<span style="font-weight: 400;">&lt;/div&gt;</span>

<span style="font-weight: 400;">&lt;div class="form__field"&gt;</span>

<span style="font-weight: 400;">    &lt;label&gt;Major</span>

<span style="font-weight: 400;">        [select* major "Computer science" "Linguistics" "Agriculture" "Engineering" "eCommerce"]</span>

<span style="font-weight: 400;">    &lt;/label&gt;</span>

<span style="font-weight: 400;">&lt;/div&gt;</span>

<span style="font-weight: 400;">&lt;div class="form__field"&gt;</span>

<span style="font-weight: 400;">    &lt;label&gt;Location to study </span>

<span style="font-weight: 400;">        [select* Location-to-study "New York" "Chicago" "Los Angeles" "Washington D.C" "Houston" "Philadelphia"]</span>

<span style="font-weight: 400;">    &lt;/label&gt;</span>

<span style="font-weight: 400;">&lt;/div&gt;</span>

<span style="font-weight: 400;">&lt;div class="form__field form__full-width"&gt;</span>

<span style="font-weight: 400;">    &lt;label&gt;Register to</span>

<span style="font-weight: 400;">        [checkbox* register use_label_element "Study" "Take a tour" "Consult"]</span>

<span style="font-weight: 400;">    &lt;/label&gt;</span>

<span style="font-weight: 400;">&lt;/div&gt;</span>

<span style="font-weight: 400;">&lt;div class="form__field form__full-width"&gt;</span>

<span style="font-weight: 400;">[submit "Submit"]&lt;/div&gt;</span></pre>

Then go to your theme's **Customizer** > **Additional CSS** and paste in the following code:

```
#wpcf7-f330-p104-o1 .wpcf7-form {        display: flex;        flex-wrap: wrap;        margin: 0 -15px;        padding: 20px;        background: #eeeeee;}.form__field {        width: 50%;        padding: 0 15px;        margin-bottom: 20px;}        .form__field.form__full-width {        width: 100%;}.form__field input:focus::placeholder {        opacity: 0;}.form__field input,.form__field select {        width: 100%;        color: #77818e;        font-style: italic;}.form__field input::placeholder,.form__field select::placeholder {        color: #77818e;}.form__field input[type="submit"] {        color: #4299e1;        width: auto;        background: #fff;        border: 1px solid #4299e1;}.form__field span.wpcf7-list-item {        margin: 10px 20px 0 0;        display: block;}.form__field span.wpcf7-list-item input {        width: auto;}.wpcf7-checkbox {        display: flex;        justify-content: space-between;}
```

Finally, click **Publish** to save.

![Style the contact form for better display](https://cdn-images-1.medium.com/max/800/0*6evCZ0q6a0RUfF0j.png)

### Last Words

When you first use Contact Form 7, you may find it unfamiliar with HTML if you aren't a coder. However, after reading this tutorial, I think everything has become easier, right?

If you want to try creating a contact form with some other tools, look forward to my upcoming article of this series. Which plugin do you want to suggest? Leave a comment under this article!

--- --- ---

The publication at [GretaThemes](https://gretathemes.com/add-contact-form-p1-contactform7/).