How to Add Contact Forms Using Plugin - P2: Use WPForms
Tags: wordpress
Published: 2020-11-02 02:40:28

In the <a href="https://gretathemes.com/add-contact-form-p1-contactform7/">previous article</a> of the "<a href="https://gretathemes.com/series/how-to-add-contact-form-using-plugin/">How to Add Contact Forms Using Plugin</a>" series, we've learned what a contact form is and how to use Contact Form 7 plugin. As promised, I wrote another tutorial with WPForms and I'm going to show you in this article.

<!--more-->

WPForms is a freemium drag-and-drop contact form plugin with a real-time preview. In my experience, it's easy and convenient to work with this plugin.

Do you remember this university registration form sample that we've created in <a href="https://gretathemes.com/add-contact-form-p1-contactform7/">part 1</a> of this series? Now, we're going to create the same one with WPForms.

<img class="aligncenter" src="https://i.imgur.com/9Vb3gRz.png" alt="Create a university registration contact form with WPForms plugin" width="691" height="484" />

<h2>Step 1: Install and Activate WPForms Plugin</h2>

This plugin has a free version on wordpress.org, so you just need to <a href="https://gretathemes.com/install-wordpress-plugin/">install and activate the plugin</a> right on the <strong>Admin Dashboard</strong>.

![](https://cdn-images-1.medium.com/max/800/1*lsbbhK0KwDnWAn_Jbmrf0g.png)
<h2>Step 2: Create a New Contact Form and Choose a Template</h2>

On your <strong>Admin Dashboard</strong>, go to <strong>WPForms</strong> &gt; <strong>Add New</strong>.

<img class="aligncenter" src="https://i.imgur.com/8PahfNN.png" alt="Create a New Contact Form with WPForms plugin" width="1348" height="625" />

Here is the interface that you have to work with:

<img class="aligncenter" src="https://i.imgur.com/5W6o32M.png" alt="The contact form interface of WPForms plugin" width="1920" height="903" />

In the left sidebar, you can see 5 sections:

<ol>

   <li><strong>Setup</strong>: Name the contact form and choose its template.</li>

   <li><strong>Fields</strong>: Add and customize fields for the contact form.</li>

   <li><strong>Settings</strong>: Configure the notifications, confirmations, and general settings.</li>

   <li><strong>Marketing</strong>: Link with email marketing tools such as Constant Contact, Campaign Monitor, <a href="https://gretathemes.com/mailchimp-send-wordpress-blog-post-email/">Mailchimp</a>, ...</li>

   <li><strong>Payments</strong>: <a href="https://gretathemes.com/add-payment-card-accept-credit-card/">Add payment</a> from PayPal Standard, Stripe, and Authorize.Net.</li>

</ol>

<strong>Note</strong>: I don't run any email marketing campaign and my form doesn't require payment information. Therefore, I don't need the <strong>Marketing</strong> and <strong>Payments</strong> sections.

In the <strong>Setup</strong> section, enter your form name and select your desired template.

<img class="aligncenter" src="https://i.imgur.com/mqrloXH.png" alt="Select the desired template for your contact form." width="1366" height="625" />

There are four default templates:

<ul>

   <li>Simple Contact Form</li>

   <li>Newsletter Signup Form</li>

   <li>Suggestion For</li>

   <li>Blank Form</li>

</ul>

Excluding <strong>Blank Form</strong>, other templates have their own pre-built fields that you can utilize to build contact forms faster. In addition, you can install <a href="https://wpforms.com/demo/">WPForms addons</a> (only available on paid versions) to get more templates.

In this article, I choose the <strong>Blank Form</strong> template to build a contact form step by step from the beginning. This will help you understand everything more easily and deeply.

<img class="aligncenter" src="https://i.imgur.com/YvjzWPR.png" alt="Create a university registration contact form with a blank form" width="915" height="445" />

<h2>Step 3: Add Fields for the Contact Form</h2>

<h3>Add Fields</h3>

After choosing the <strong>Blank Form</strong> template in step 2, you'll be moved to the <strong>Fields</strong> section.

<img class="aligncenter" src="https://i.imgur.com/xjZH4o9.png" alt="The fields section of WPForms plugin" width="1366" height="625" />

To add fields for your contact form, drag the desired fields from the <strong>Add Fields</strong> tab and drop them into the contact form.

<img class="aligncenter" src="https://i.imgur.com/LMjjvHY.gif" alt="Drag and drop the fields to the contact form" width="1366" height="625" />

Next, to customize a field, click it, and then edit its parameters in the <strong>Fields Options</strong> tab.

<img class="aligncenter" src="https://i.imgur.com/lw2Mume.png" alt="Customize fields of the university registration form with WPForms plugin" width="1920" height="903" />

Besides, you can delete or duplicate a field by hovering over it and click the desired buttons.

<img class="aligncenter" src="https://i.imgur.com/maWzCC6.png" alt="Duplicate and remove fields in the contact form with WPForms plugin" width="967" height="387" />

In this article, I need to add the following fields:

<table style="width: 97.3863%; height: 418px;">

<tbody>

<tr>

<td style="width: 49.0196%;"><b>Field name</b></td>

<td style="width: 49.0196%;"><b>Field type</b></td>

</tr>

<tr>

<td style="width: 49.0196%;"><span style="font-weight: 400;">Your Name</span></td>

<td style="width: 49.5544%;"><span style="font-weight: 400;">Single Line Text</span></td>

</tr>

<tr>

<td style="width: 49.0196%;"><span style="font-weight: 400;">Your Phone Number</span></td>

<td style="width: 49.5544%;"><span style="font-weight: 400;">Numbers</span></td>

</tr>

<tr>

<td style="width: 49.0196%;"><span style="font-weight: 400;">Your Email</span></td>

<td style="width: 49.5544%;"><span style="font-weight: 400;">Email</span></td>

</tr>

<tr>

<td style="width: 49.0196%;"><span style="font-weight: 400;">Location to Study</span></td>

<td style="width: 49.5544%;"><span style="font-weight: 400;">Dropdown</span></td>

</tr>

<tr>

<td style="width: 49.0196%;"><span style="font-weight: 400;">Major</span></td>

<td style="width: 49.5544%;"><span style="font-weight: 400;">Dropdown</span></td>

</tr>

<tr>

<td style="width: 49.0196%;"><span style="font-weight: 400;">Register to</span></td>

<td style="width: 49.5544%;"><span style="font-weight: 400;">Checkboxes</span></td>

</tr>

</tbody>

</table>

After adding all these fields, you need to customize each field in the next steps.

<h3>Customize General Options for Each Field</h3>

In general, there are two kinds of option to customize each field:

<strong>Basic options</strong>: all fields contain these options and you should absolutely work with them to make your contact form clear and understandable.

<ul>

   <li><strong>Label</strong>: Enter the field name that you want to display.</li>

   <li><strong>Description</strong>: This is the text display below the field to tell users what to do.</li>

   <li><strong>Required</strong>: It's optional! Tick it to make this field compulsory to be filled.</li>

</ul>

In the next steps, when I mention "basic information", it means you need to deal with these basic options.

<strong>Advanced options</strong>: there are some advanced features for each field. It's optional for you to deal with them, but there are some important things you should look at:

<ul>

   <li><strong>Placeholder text</strong>: Display a text inside the fields before users enter data. This text can be used as a guide or example to help users easily understand what they need to fill in. For example, you can set the <strong>Placeholder text</strong> of the email field as "Enter your email".</li>

   <li><strong>Default value</strong>: If there're many people who have the same answer, you can set a default answer to save time and effort of users. For example, you make a contact form for people who live in New York, so you can enter a default value of "New York" in the "Location" field.</li>

   <li><strong>CSS Classes</strong>: Enter CSS classes in this box to style the field. In the next step, I will include code in this section to style the contact form.</li>

</ul>

<strong>Note</strong>:

<ul>

   <li>In Contact Form 7, you can use the default value as the placeholder text. But it's more convenient in WPForms because you have the separated <strong>Placeholder Text</strong> section. Besides, WPForms has the <strong>Description</strong> section that displays the text under the field. I use this way because it makes my contact form look better.</li>

</ul>

<img class="aligncenter" src="https://i.imgur.com/6RzRg9w.png" alt="WPForms has the Description section that displays the text under the field." width="627" height="387" />

<ul>

   <li>You can click the question mark button beside the options / fields to read the instruction of WPForms for them.</li>

</ul>

<img class="aligncenter" src="https://i.imgur.com/ilZbFpe.png" alt="click the question mark button to read the instruction of WPForms" width="855" height="485" />

Additionally, there are some different options depending on each field. Let's find out what they are!

<h3>Customize "Your Name" Field</h3>

Select the <strong>Simple Line Text</strong> field and just fill in the basic information:

<img class="aligncenter" src="https://i.imgur.com/8m5UnRo.png" alt="Customize "Your Name" Field" width="705" height="484" />

In this field, there are 2 more options in the <strong>Advanced Options</strong> section:

<ul>

   <li><strong>Limit length</strong>: Check it to choose a limit for the maximum of characters that can be entered in the field.</li>

   <li><strong>Input Mask</strong>: Enter input masks to require specific formats for the field. Read more details <a href="https://wpforms.com/docs/how-to-use-custom-input-masks/">here</a>.</li>

</ul>

<img class="aligncenter" src="https://i.imgur.com/foo1swg.png" alt="Advanced Options of the single line text field" width="897" height="583" />

<h3>Customize "Your Phone Number" Field</h3>

This field has nothing special. Just select the <strong>Numbers</strong> field and fill in the basic information:

<img class="aligncenter" src="https://i.imgur.com/dduD2JJ.png" alt="Customize "Your Phone Number" Field" width="747" height="474" />

<h3>Customize "Your Email" Field</h3>

Select the <strong>Email</strong> field and fill in the basic information for the field:

<img class="aligncenter" src="https://i.imgur.com/RAIYdUq.png" alt="Customize "Your Email" Field" width="682" height="481" />

This field has one more basic option: <strong>Enable Email Confirmation</strong>. You can check it to ask users to provide their email address twice. This makes sure that their email is correct.

<h3>Customize "Location to Study" and "Major" Fields</h3>

First, choose the <strong>Dropdown</strong> field. In the Choices section, enter the options for the field. You can click <strong>(+) (-)</strong> to add / remove choices.

<img class="aligncenter" src="https://i.imgur.com/DSBVKky.png" alt="Customize "Location to Study" and "Major" Fields" width="792" height="571" />

In addition, you can also click the <strong>Bulk Add</strong> button to add many choices at once. In the <strong>Add Choices</strong> box, fill in the choices in the desired order (each choice is a line) and then click <strong>Add New Choices</strong>.

<img class="aligncenter" src="https://i.imgur.com/rI6pthT.png" alt="Add choices to the drop-down menu of the contact form" width="773" height="572" />

In addition, in this field, there are 2 advanced options that you should care about:

<ul>

   <li><strong>Style</strong>: You can style your drop-down menu with two options: classic and modern. The modern style allows you to search by keywords. Therefore, it works well on menus with a lot of options (more than 10 options).</li>

   <li><strong>Dynamic Choices</strong>: Allow users to select choices from <a href="https://metabox.io/create-wordpress-custom-post-types/" rel="follow">post types</a> or <a href="https://metabox.io/how-to-add-custom-taxonomy-using-codes-and-plugins-in-wordpress/" rel="follow">taxonomies</a>. For example, if you choose <strong>Dynamic Post Type Source </strong>as <strong>Posts</strong>, each choice in the drop-down menu is a post on your website.</li>

</ul>

<img class="aligncenter" src="https://i.imgur.com/9DVyKBV.png" alt="advanced options of the drop-down field" width="1044" height="585" />

<h3>Customize "Register to" Field</h3>

Select the <strong>Checkboxes</strong> fields and enter choices like the <strong>Dropdown</strong> fields.

<img class="aligncenter" src="https://i.imgur.com/HidWYM7.png" alt="Customize "Register to" Field" width="1182" height="638" />

In this field, there are 2 advanced options that you should care about:

<ul>

   <li><strong>Use image choices</strong>: You can use it to illustrate your choices and make your contact form more attractive and visualized.</li>

   <li><strong>Random Choices</strong>: This can avoid people from choosing a choice only because it's the first one.</li>

</ul>

<h2>Step 4: Configure the Contact Form</h2>

After creating a contact form, we need to configure it. In the free version of WPForms, you can configure three sections below:

<h3>Configure General Settings</h3>

WPForms plugin has specific instructions for each option in this part. You should click the question mark button, read it carefully, and pay attention to these fields:

<ul>

   <li><strong>Submit Button Text</strong>: In Contact Form 7, you have to create the <strong>Submit</strong> field. But in WPForms, the submit button is built-in. You can change the text of this button in this section to whatever you want, such as Register to, Send Email, ...</li>

   <li><strong>Enable anti-spam protection</strong>: Sometimes spammers may bother you through tons of "trash form". In that case, you should turn on this feature of anti-spam.</li>

</ul>

<img class="aligncenter" src="https://i.imgur.com/xuaqhry.png" alt="Configure General Settings of WPForms" width="1085" height="498" />

<h3>Configure the Notifications</h3>

If you want to receive an email notification whenever a user submits a contact form, move to <strong>Settings</strong> &gt; <strong>Notifications</strong>.

You can add "<a href="https://wpforms.com/docs/how-to-use-smart-tags-in-wpforms/">smart tags</a>" or text to the fields in this section to manage the email you receive when a user submits a contact form more easily.

<strong>Note</strong>: Smart tags can add information to your contact form notifications automatically.

This is an example of my settings:

<img class="aligncenter" src="https://i.imgur.com/D6q7Ds5.png" alt="Configure the Notifications of WPForms plugin" width="1366" height="657" />

<h3>Configure the Confirmations</h3>

In the <strong>Confirmation</strong> section, you can configure the messages that users receive after they submit contact forms.

<img class="aligncenter" src="https://i.imgur.com/qK6eAQ3.png" alt="Configure the Confirmations of WPForms plugin" width="1321" height="560" />

When you finish all the configuration, just click <strong>Save</strong>.

<img class="aligncenter" src="https://i.imgur.com/h81iSZ8.png" alt="Save the settings of WPForms" width="969" height="510" />

<h2>Step 5: Display the Form on Pages / Posts</h2>

To display your forms on pages / posts, there are 2 ways.

The first way is clicking <strong>Embed</strong> to display your form on a page:

<img class="aligncenter" src="https://i.imgur.com/4Iwj9Kv.png" alt="Display the university registration form on pages / posts of your WordPress website" width="984" height="502" />

After that, embed the contact form in a new page or an existing page on your site.

<img class="aligncenter" src="https://i.imgur.com/86DcZrh.png" alt="Embed contact form in a page of your WordPress website" width="1366" height="625" />

The second way is inserting the shortcode of the contact form to pages / posts. I recommend that you should choose the second way because it can <strong>display the contact form both on posts and pages</strong>. To do it, on the <strong>Admin Dashboard</strong>, go to <strong>WPForms</strong> &gt; <strong>All Forms</strong>, find your contact form, and copy its shortcode.

<img class="aligncenter" src="https://i.imgur.com/YF9NOkL.png" alt="Copy the shortcode of the university registration form" width="1920" height="903" />

Next, paste this shortcode to the desired posts / pages.

<img class="aligncenter" src="https://i.imgur.com/WwMBHHV.png" alt="Paste the shortcode in a post of your WordPress website" width="1346" height="649" />

And here is the result:

<img class="aligncenter" src="https://i.imgur.com/fQago6m.png" alt="The university registration form" width="368" height="495" />

It doesn't look like the contact form sample yet, so I have to style it a bit.

<h2>Step 6: Style the Form</h2>

On the <strong>Admin Dashboard</strong>, head to <strong>WPForms</strong> &gt; <strong>All Forms</strong>, find your contact form and then click <strong>Edit</strong>.

<img class="aligncenter" src="https://i.imgur.com/1G4Qxuv.png" alt="Style the contact form" width="864" height="605" />

Now, click each field, go to <strong>Advanced Options</strong> &gt; <strong>CSS Classes</strong>, and add the following values:

<ul>

   <li><strong>Your Name</strong> and <strong>Register to</strong>: <code>ip-100</code></li>

   <li><strong>Your Phone Number</strong>, <strong>Email</strong>, <strong>Location to Study</strong>, <strong>Major</strong>: <code>ip-50</code></li>

</ul>

Next, go to <strong>Customizer</strong> &gt; <strong>Addition CSS</strong>, add this code:

<pre>.wpforms-field-container {

    display: flex;

    flex-wrap: wrap;

justify-content: space-between

}

.ip-50 {

    width: 48%!important;

}

.ip-100{

width: 100%!important;

}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,

div.wpforms-container-full .wpforms-form select.wpforms-field-medium {

max-width: 100%;

}

.ip-100 ul {

display: flex;

justify-content: space-between;

}

div.wpforms-container-full {

    margin-bottom: 24px;

    background: #eeeeee;

    padding: 20px;

}</pre>

Finally, click <strong>Publish</strong>.

And here's the final result:

<img class="aligncenter" src="https://i.imgur.com/IWmfknC.png" alt="The contact form after styling" width="576" height="351" />

The contact form looks better now, isn't it? Well, we have just finished the last steps to have a completely similar form to my sample.

<h2>Last Words</h2>

In my experience, using the drag-and-drop interface like in WPForms is easier and faster than using Contact Form 7. Besides, it has the pre-built submit button and 2 more useful sections as <strong>Placeholder Text</strong> and <strong>Description</strong>. The live preview is also very convenient. It helps me to detect mistakes more easily when creating and customizing the form.

To learn how to use more contact form plugins, follow our upcoming article of this series! If you have any questions about WPForms or suggest any contact form plugin, feel free to leave it in the comment section.
 --- --- --- 

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