How to Use Contact Form 7 in WordPress

Contact Form 7 is one of the most popular plugins in WordPress. It is very easy to use. In this article, I will show you how you can use Contact Form 7 plugin on your WordPress websites or blog.

how to use contact form 7 in wordpress

Here I will cover topics related to contact form7 and how to use it in WordPress. Here is the list of the  topics

How to Install Contact Form 7
Display Contact Form 7 on Your Website
Contact Form 7 Form Fields Overview
Contact Form 7 Form Fields Explanations
Add a New Form Field in Contact Form 7 Form
Contact Form 7 Placeholder and icons
Contact Form 7 Email Validation

How to install contact form 7

1. log into the WordPress Admin Dashboard
2. Navigate to PluginsAdd New and then type “Contact Form 7” in the search box.
3. Once found, click on install and activate the plugin by clicking on Install → then Activate. As shown in the image below.

How to install Contact Form 7 in wordpress

How to display contact form 7 on your website

To display a form on your site, on the left side of your WordPress dashboard, open ContactContact Forms. Now here you can manage multiple forms from this location.
A contact form is already available for immediate use, it is a default form provided by the contact form7 plugin. Right next to the name Contact form 1, you can see the shortcode [contact-form-7 404 "Not Found"]. In your case, the id=”xxx” maybe something else. Copy this shortcode and paste it anywhere on your site where you want to show the contact form. Suppose you want to use contact form on Contact Us Page, So edit the page and paste the code.

contact form 7 shortcode

Paste Shortcode in your Contact Page Like below:

use contact form 7 shortcode

 

How it will look on your site?

After pasting the shortcode, Hit the Update button and save the page. Now you can view the Contact Us page to see the contact form and here it will look like. The look may be different on your site. because of your current theme styling.

contact form 7 default look

Contact Form 7 Form Fields Overview

Ok so now you have a very basic contact form live on your site. I am sure you may need some other fields too like phone number some drop down boxes to choose or maybe something else as per your requirements. So here is a list of 14 fields that contact form7 support bt default.

1) text
2) email
3) URL
4) tel
5) number
6) date
7) text area
8) drop-down menu
9) checkboxes
10) radio buttons
11) acceptance
12) quiz
13) file
14) submit

Contact Form 7 Form Field Explanations

1) TEXT: This is the text field. You can add First name, Last name, name, place, etc for simple input.
2) EMAIL: This field is used for Email Id only.
3) URL: This field is used for the Website URL.
4) TEL: This field is used for a Telephone number only. You can add a number only here.
5) NUMBER: In this field, there are two options i.e Spinbox and slider. See below:

contact form 7 number field

You need to add a range for this field like 0 to 9, 0 to 1000, etc.


6) DATE: This field is used for the date. You can also add a range for this.
7) TEXT AREA: This field is used for messages, comments, bio, etc.
8) DROP-DOWN MENU: This field is used to select. Like Choose your country, Choose any number, etc.
9) CHECKBOX: This field is used to select more than one option. Like Choose your subject-math, English, chemistry, etc
10) RADIO BUTTON: This field is select only one option. Like Gender etc
11) ACCEPTANCE: This is used for confirmation of the user. Like term and conditions
12) QUIZ: This is used for the quiz. You can add a question and answer here.
13) FILE: This is used for upload files. Like, upload your resume, etc.
14) Submit: This is submitting a button. You can use SEND, CLICK, etc

How to add a new form field

1) Click on the field name. Then a popup will be opened. After that fill the given options then click on Insert tag. See below:

add new form field in contact form 7

You can add any fields that you want. Like below:


2) Add inserted tag also in the message body like below. The message body is the set of text which will be sent to the site owner.

contact form 7 message body

3) Check the preview:

How to use Placeholder and icons in the Contact Form7 Plugin?

Now you know how to add extra form fields. And now you need some fancy look there? am I right? Ok, so its time to add some icons and labels to the contact form 7.

First of all, you need to install this plugin, it is free. Install Cf7 Icons and Labels plugin in your WordPress dashboard and activate it. This plugin can be used to add font-awesome icons and labels to Contact Form 7. This is very easy to use. Let’s do it-

Go to your Dashboard and search “Cf7 Icons”. Like below Screenshot:

contact form 7 place holders and icons

Then Install and Activate it.
After activating the CF7 icons and labels plugin, Edit your contact form and then add a class for icon and placeholder. Here is an example, to add place holder and icon or Name field

“class:cf7-fa-icon-fa-user class:cf7-label-full_name”. See below Screenshot:

contact form 7 icons and placeholders

I have used an example only. You can get more icons from here: https://fontawesome.com/v4.7.0/cheatsheet/

placeholders and icons contact form7

Now Check the preview of the contact form after adding labels and icons

use of placeholder and icons

How to use Contact Form 7 Email Validation

Contact form7 email validation is a very useful plugin. It accepts only valid emails like helloworld@mail.com etc. This plugin, do not accept any spam email. This plugin adds a customized functionality to add an email field validation checkpoint to the popular Contact Form7 plugin. A DNS verification validation is used to verify an email address from a valid domain.

When anybody adds invalid email id then it will display error “Email address entered is not valid, DNS resolution failed”. So by this, a real address goes through without any issue.

Installation Steps:

1) Go to the admin dashboard- Add new plugin – search for “Contact Form 7 Email Validation”.

contact form7 email validation

2) Install and activate the plugin. Now have a look on the screenshot, it will show an error message if anybody will enter a wrong or non-existed mail id.


Now you can check your contact form output. It is very easy to use, you don’t need to add any shortcode or any setting. Just install and activate it. I hope this article is useful to you. Please comment and ask if any doubt.

About the Author: Arvind Panwar

avatar
  Subscribe  
Notify of