How to use Contact Form 7 Plugin

The plugin, Contact form 7 is very simple to use and easy to install for making forms. In this post I am going to teach you how to use the contact form 7 plugin and all different types of forms you can create using this plugin.

The reason it’s popular is because of various options available using which you can make custom forms quickly. Thus, though this plugin is favorable for all but it’s especially useful for anyone who is new to the blogging community. And it is one of the main reasons that I included this plugin in my list of useful WordPress plugins prior to your 1st post.

In this Post you will learn about:

  • How to add basic form in WordPress using contact form 7
  • Advance options available in contact form 7
  • How to add reCAPTCHA in contact form 7 plugin
  • Mail Settings in Contact form 7
  • Response Messages in Contact form 7

Let’s learn about them one-by-one…

 

How to Add a form in WordPress: Contact Form 7 Plugin

Contact Form 7

Contact form 7 Plugin comes with a pre-made basic form which covers all the basic requirements for a creating contact form page. Let’s learn how to add a basic contact form with contact form 7

Step 1: Login to your WordPress website using the Admin Credentials

Step 2: Go to Plugins section.

Step 3: Click on the “Add New” button.

Step 4: Search for “Contact form 7” and click on install.

Step 5: Now click on “Activate” button.

As you will activate the plugin, there will be another option in the left sidebar of the admin dashboard.

Step 6: Go to Contact section from the left sidebar of the main dashboard.

Step 7: Now click on “Add New” button.

As you click on the button, you will find a pre-configured contact form.

Step 8: Go to “Mail” tab and change the mail accordingly.

By default, it’s the same email ID which you used while configuring the WordPress.

Step 9: Lastly, click on “Save” button.

As you click on the save button there will be a short code generated over the form below the title section of the tab which is something like this “[contact-form-7 404 "Not Found"]”

Step 10: Then, copy this Short Code and past it in the Contact Page. Finally, Save the Page.

This is how you can easily add the pre-configured contact form in this 10 easy steps. You can also check the live version of this pre-configured contact form on the contact page of techsparker.com (except the reCAPTCHA)

 

Advanced Options Available in Contact form 7 Plugin:

There are various options available in the plugin which can be used in various combination to make different types of forms.

Contact Form 7 - Form Options

Available Options:

  • Text Fields
  • Number Fields
  • Date Field
  • Setting Placeholder Text
  • Submit Button
  • reCAPTCHA
  • Really simple captcha
  • Checkboxes, Radio Buttons, and Menus
  • Acceptance Checkbox
  • Max & Min Length Options and Character Count
  • Getting Default Values from the Context
  • Quiz
  • File Uploading and Attachment
  • Setting Default Values for the Logged-In User

 

Text Field:

Text fields are the most common fields in any type of form. Text fields in contact form 7 includes two basic HTML input methods which are <input type=text> for single line and <textarea> for multi-line text box.

Text, Email, URL, Telephone number field and text area are the available text fields in the plugin. Among which, Text can be used for simple text inputs such as name. The Email field can be used for email addresses. The Telephone number field is used for accepting telephone numbers from the user and Textarea can be used for accepting message from the user.

Text Fields in Contact Form 7

Number Field:

Number fields are used to accept the numeric input from the user. There are two ways you can use the number field in contact form 7, in which one is for basic numeric input and other is for accepting a range of number from the user.

 

Date Field:

The date field is used for collecting the date input from the user in the YYYY-MM-DD format. There are some old browsers which might not support the use of this type of input. But in most of the case, this option works perfectly fine.

 

Checkbox, radio buttons, and menus:

These fields are used for getting input from the users, which is to be selected from the different options that you would provide.

In Checkbox, there are two types of options, either you can opt for multiple selection checkbox or single selection checkbox.

Whereas, in Radio button, the user can select only one from the given options.

In menus, your user can select any value from the given menu. Again, there are two types of menu options in the plugin. One of them is a drop-down menu and another is list menu.

checkbox radio buttons and menu in contact form 7

File Uploading and Attachment:

This is a good option for many of you if you want your users to upload some kind of document or image via the contact forms. To setup this with your contact form you have to follow 2 steps.

  • Adding Upload fields in your Contact form
  • Setting your mail for attaching the uploaded files.

For adding upload field in the form you just have to click on the file button from the options available in the menu above the form as shown in the above image. As you click on the button, it will prompt you for additional setting such as file type and limit of the file. Set it according to your requirements and add it to the form. For more information, please check the original documentation on how to setup file uploading and attachments in the plugin documentation.

 

Acceptance Checkbox:

You can use this option if you want your users to accept your terms and conditions or something similar. There are two options available in this, either your user has to check (tick-mark) the box for acceptance or uncheck (untick) for acceptance.

acceptance checkbox - contact from 7

Setting Placeholder Text:

Placeholder text is a way of explaining to your users what they have to enter in the given text field. And as your user clicks on the text field, the placeholder text disappears.

placeholder-text-in-contact-from-7

Submit Button:

Submit button is most important part of the contact form as without it, your users would not be able to submit the details to contact you.

 

Security Options in Contact form 7:

  • Really Simple Captcha
  • Quiz
  • reCAPTCHA

 

Really Simple CAPTCHA:

Really simple captcha is an add-on plugin which you have to download before using it. It is a good security option which can be used to prevent bots or automated scripts from spamming your contact forms. For this security function to work properly you must have GD and FreeType PHP libraries installed on your server to create CAPTCHA images

Really Simple CAPTCHA in contact form 7

Quiz:

This is another option you can use for protecting spams by bots. This is a good option because, in most of the case with CAPTCHA, it is really hard to identify the image and give the answer. This issue is solved here. You can create any question you want with it and your user has to answer that question. Only then he/she can submit the form.

Quiz in Contact form 7

[quiz capital-quiz “The capital of Japan?|Tokyo”]

Here the capital of japan is the question and the text after ‘|’ is the answer and in this case its Tokyo.

You can also add many questions and set it on random so that every time user comes on the contact page, the question will be randomized.

Quiz Options in Contact Form 7

How to Add reCAPTCHA in Contact form 7:

The reCAPTCHA option is the most secure way to protect your contact forms from bots. To add reCAPTCHA in your contact form, you would need a Google Account to register for your API keys.

Adding Google reCAPTCHA in contact form 7

  • Login to your Google Account.
  • Go to https://www.google.com/recaptcha/admin
  • Register your Website/s
  • Get Your Secret Key and Site key.
  • Open new tab and Login to your WordPress Admin Panel.
  • Go to Contact >> Integration.
  • Select reCAPTCHA and click on Configure keys.
  • Copy the Site Key and Paste it in the site key field.
  • Copy the Secret Key and paste it in the secret key field.
  • Add [recaptcha] shortcode to your contact form and click on “Save” or “Update” button.

 

Mail Setting in Contact Form 7:

You can configure your email settings in contact form 7 in order to receive the contact response in your inbox. This plugin comes with pre-configured email settings in which you will receive a response directly to the same email id which you used while installing WordPress on your server. But you can change the settings and get the contact response on any email ID you wish.

If you want to change the Email for receiving the contact response, then you have to change the email in the “To” field of the mail settings.

Mail settings are completely changeable and you can change TO, FROM, Message Body, Subject, etc. and customize it as your wish to.

My Recommendation is not to change anything except the email if you want to change that email and let everything be the same as it is.

Setting Customized Messages:

You can set customized messages which trigger on various situations while your user is filling out the form. By default, there are pre-defined messages for every situation and I use the pre-defined ones on my site. But if you want to be a bit creative and interactive with your users , then you can change messages as per your wish.

You can also set custom Error Message, Successful message, Validation Errors and many other messages for different situations. Overall there are 22 situations defined in the form where most of the situations are applicable only if you are using the form option which triggers that situation.

 

Information and Images from Plugin Documentation page

 

— Please Share the Knowledge You Just Gained —

Leave a Reply

Your email address will not be published. Required fields are marked *