Setting Up Contact Form 7 On Your Website

Email marketing has been for quite a long time now and even in 2021 it still holds the same importance for website owners. Email marketing methods have evolved over the years and those using WordPress websites can use a plethora of WordPress plugins like contact form/ninja form etc to build up their email database. In this article, we will focus on setting up contact form 7 on your website.

How To Use Contact Form 7 In WordPress

You should know why it is necessary to contact form 7 on your WordPress site. It will always be a better option to use the contact form instead of directly display your email address.  

Protect Your Email From Spam: If you are running a WordPress site and using blog posts then you might have noticed that many spammers will automatically scan your website for getting an unprotected email address and use it to their mailing list. Contact Form will help in preventing the same.                         

Get Right Information: You can ask the users to provide the right information that you need. Using a contact form you are allowed to filter all inquiries which helps you to reduce a lot of back and forth work. 

Inform Your Customer: You can use the contact form as the first point of information where you get contact details regarding your clients or customers. This can also reduce multiple emails from the same customer. 

Key Features Contact Form 7 

Let us understand the key features of content form 7 on WordPress 

  • Easily Install Through The WordPress Dashboard
  • Multiple Options To Build A Contact Form
  • Comes With A Modern WordPress Theme
  • Support reCaptcha To Avoid Spam Submissions
  • No Paid Upgrade Required, As It Is Completely Free
  • Using Shortcode Insert Contact Form To Any Page Or Post
  • Simple Markup Used To Alter Mail Content
  • For Additional Functionality Third Party Extensions Are Used

How to Install Contact Form 7 Plugin In WordPress 

Follow these simple steps to install the plugin and setting up contact form 7 on your website.

Step1: Open wp-admin dashboard and select Plugin just on the left-hand side.

How To Use Contact Form 7

Step2: Now Search Contact Form 7 in the search bar for plugins. Choose the first one as shown below:

How To Edit Contact Form 7 In WordPress

Step3: Now install Contact Form 7 in your website’s dashboard and activate the plugin that will appear on the left side of the menu. 

How to customize contact form 7

How To Use Contact Form 7 

How To style Contact form 7

You have options to create multiple forms using Contact Form with each different option in it. This is one of the huge advantages of using contact form 7 on your WordPress site. 

Step1: Select the Contact form left side of the menu, as shown in the above image. Here you get a default contact form 1 to optimize for a particular page or you can create a new contact form as per your need.

How to set up contact form 7

Step 2: Choosing the contact form for editing you will get a default script written on your screen as shown below

How To Add placeholder in contact form 7

Contact Form 7 From Field

Here you have four options to edit a contact form:

  • Form: You are allowed to customize your contact form template with a variety of options like “text”, “Checkboxes”, “email”, “Last Name”, etc.

Form customization

  • Mail: For notification emails, you can customize the entire settings or templates. 

Mail tag in contact form 7

  • Messages: You can set a particular thanksgiving message that will be displayed to your customers after submission.

How To redirect contact form 7 after submit

  • Additional Settings: Specify snippets that will help you to enable additional features like subscribers-only mode, demo mode, and mail skipping.

Add Additional Setting in contact form 7

Step3: Now you have various preset buttons to generate shortcodes for usual HTML tags. These shortcodes are shown in the image mentioned in step 2.

  • Text- Those Text-Based Snippets That Do Not Require Multiple Lines I.E. First Name, Last Name, And So On.

How to add text tag in contact form 7

  • Email- You Can Use Or Create A Tag For Your Email Address.

How to add email tag in contact form 7

  • URL- Create Tag For A Particular URL

How to set URL tag in Contact form 7

  • Tel- Tag For Inserting Telephone Number
  • Number- This Creates A Tag For Numeric Digits Unlike “Text” Or “Text Area”.  

how to add number tag in contact from 7

  • Date- Simply Create A Tag For Displaying The Date.
  • Text Area Create A Tag For The Text Area That Require Multiple Lines Of Text.
  • Drop Down Menu-Tag For A Drop-Down Menu
  • Check-Box-  Create A Tag For Checkboxes
  • Radio Buttons- Create A Form Tag For Radio Buttons   
  • Acceptance- Tag For Acceptance Checkbox
  • Quiz-Design Tag For Question-Answer Pair

Add Quiz Tag in Contact Form 7

  • File- Create A Form For Uploading File Field
  • Submit- A Simple Tag For Submitting Button   

Step4: Customize the whole form by placing the required HTML tags you want like date number so on and save the changes.

Step5: Now there is the shortcode for your contact form just below the title of the form. To use this code you have to create a page where you want to display this contact form and then paste the shortcode.

Step6: Add the created page to the menu bar and save the changes.

Step7: Now reload your website and check the recent page in the menu section.

Contact Form 7 Mail Settings

Step8: The most important step is to configure the mail where the message has to be sent. For this, open the “Mail” option given above the contact form. 

Step9: In the section “TO” put the email address where you want to receive the mails or we can say admin’s email address.

Contact Form 7 Email Template

Step10: It is important to know, in the “from” section you have to insert that email address which you had received during the purchase of hosting i.e. business email address.

Step11: Next, in the message body you have default options such as:

From: [your name]<[your-email]>

Subject: [your-subject]

Message Body:

[your message]

This email was sent from a contact  form on XYZ | (https://xyz.com)

Now configure the message body as with your name and email address for example:

Message Body:

Name: [your name] [text 6] (that you have made on the starting of the form for the last name)

Email: [your-email]

Message: [your-message]

This is all done to recognize you to the customers or clients with your details and message. Lastly, click the button  (Use HTML content type), it will work whether you use any HTML tag in the message box. And then save the changes.

Step 12: Now go to the page where the shortcode of this has been inserted and try to send any message just to test all the above changes we have done on the form is working or not.

Step13: Go to your email account ( that has been submitted during the form creation) and check whether you receive any mail or not and also see the subject or message that you have sent if correct or not. 

And here done with contact 7 form. There are various fields given in the form that you may explore as per your requirement. 

Setting Up Contact Form 7 In WordPress

You’re probably already familiar with reCAPTCHA, a technology developed by Google to detect artificial bot behavior if you’ve ever submitted a form on the Internet. Older versions of reCAPTCHA (V2) required users to pass puzzles or challenges.

No user interaction is expected in the latest version of reCAPTCHA (V3). Instead, to differentiate between human and bot visitors, it tracks user behavior transparently in the background.

Secure Your Contact 7 Form Using reCAPTCHA

Generate the API key for reCAPTCHA Setting. 

Label– Try to specify your label before making any choice.

Domain- Add the non-www and www versions of your domain if your site uses a root domain. If a subdomain is used on your web, just add the subdomain. 

Owner- By default, the email address associated with your Google account will be added as an owner. Feel free, if necessary, to add additional email addresses.

reCAPTCHA- ReCAPTCHA v3 is enabled by Contact Form 7, so pick that version

After doing this process click on the Contact in your WordPress Dashboard sidebar and select Integration. Select the reCAPTCHA option, and paste your site key and secret key to the respective field. And SAVE changes, Check whether the reCAPTCHA is activated. 

Final Thoughts

The most common contact form plugin is Contact Form 7. From simple contact forms to question-answer quizzes, also from complex forms supporting file attachments and drop-down menus, it can be used to build anything. Therefore, setting up contact form 7 on your website is not a difficult task just follow the above-mentioned steps. 

As contact form 7 comes with integrated reCAPTCHA support so that your website is protected from spammers.

Contact Form 7 plugin – Frequently Asked Question

What Is Contact Form 7?

Multiple contact forms can be handled by Contact Form 7, plus you can flexibly customize the form and mail content with simple markup. Ajax-powered submission, reCAPTCHA, Akismet spam filtering, and so on are provided by the Contact form 7.

How Do I Add A Contact Form To My Website?

Simply follow the above-mentioned procedure step by step for setting up contact form 7 on your website.

What Does A Contact Us Page Look Like?

Both an email address and a contact form for visitors to fill are included on the contact page. You can also opt to provide a business address, telephone number, or specific contact details for employees/departments.

Webtechcoupons.com
Logo