How to use Contact Form 7 WordPress Plugin

Contact Form 7 by Takayuki Miyoshiis one of the most powerful and most popular plugins for building contact form in¬†WordPress. It is a dynamic form builder, and it can generate as much style as you need. No limitation on creating a Form for your WordPress website. So let’s figure it out how to use Contact Form 7 WordPress Plugin.

how to use contact form 7 WordPress Plugin

How to use Contact Form 7: Downloading Plugin

To download contact form 7 WordPress plugin, please go to Dashboard > Plugins > Add New and search with the keyword “Contact Form 7”. Then you will see some form plugins. Select the right contact form plugin exactly which is “Contact Form 7,” and you can quickly identify it by checking the total active installations.

 

How to download Contact Form 7

You may also download the plugin from their official website. Download Contact Form 7 WordPress Plugin

How to use contact form 7 WordPress Plugin:

To apply contact form 7, you should go to Dashboard > Contact > Add New, and after clicking add new, you will see a Form has been created automatically. You can use that default form or either you can modify the structure according to your needs. So it is entirely up to you.

How to add contact form 7 in WordPress

How to create a form in Contact Form 7:

Creating a structure in contact form 7 is easy. I am going to share some necessary codes, and a default example Form for your contact form.

How to add new contact form 7

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Subject
[text your-subject] </label>

<label> Your Message
[textarea your-message] </label>

[submit "Send"]

These are the basic codes. Therefore you can generate more codes for more fields. Let me share the codes with you for your reference. There are more fields such as:

1. Text ==> It means a normal text.
2. Email ==> It means Email. A valid Email.
3. URL ==> It means a valid URL. Simply a website link.
4. Tel ==> It means a Telephone Number.
5. Number ==> It also means a telephone number.
6. Date ==> It means a valid date.
7. Test Area ==> It means a text area to write something as a paragraph.
8. Drop Down Menu ==> It means a Dropdown menu to select something from multiple options.
9. Checkboxes ==> It means to select something using checkboxes.
10. Radio Buttons ==> It means to select something from a radio button.
11. Acceptance ==> Acceptance means to show something as user agreement. Such as “I agree terms of conditions”.
12. Quiz ==> If would like to show any Quiz.
13. Recaptcha ==> To enable additional verification with ReCaptcha.
14. File ==> To enable file uploading.
15. Submit ==> To submit the form.

All example form with all fields type

[text* yourtext]
[email* youremail]
[url url]
[tel telephone]
[number number]
[date date]
[textarea textarea]
[select dropdownmenu "Dropdown1" "Dropdown2"]
[checkbox checkbox "Checkbox1" "Checkbox2"]
[radio radio default:1 "Radio1" "Radio2"]
[acceptance acceptance]

[file file filetypes:jpeg|png|jpg]
[submit "Submit Level"]

You can generate your contact form 7 fields with other options too. Seems like there are some ways to enable and disable some options. To create a Field for contact form 7, please check the screenshots below.

How to create a contact form 7 field in WordPress
How to create a contact form 7 field in WordPress

After generating a Contact form, press Save and after saving successfully, you will find a Shortcode which is very important. You have to use the Shortcode to place the contact form. Please remember, each contact form have a particular Shortcode. The shortcodes are not same for every form. In conclusion, The Shortcode will look like

[contact-form-/7 id="311" title="Untitled"]

<!-- Please remove the slash before 7. -->

 

You can use this Shortcode to show the contact form in your post, on your page, and in your sidebars. And you can display it in your footer too. Just place the code where you exactly need to show the form.

Use shortcode of Contact Form 7

How to use Contact Form 7 with your custom HTML form:

It is also possible, and it is not so complicated to do. Now, I am going to share the proper way of using your custom form with Contact Form 7 with you. I will use a pre-designed Form.

Here is our pre-designed HTML form where we want to include Contact Form 7.

<section id="contact">
<div class="container">
<form name="htmlform" method="post" action="toyousender.php">
<input type="text" name="first_name" placeholder="NAME" required>
<input type="email" name="email" placeholder="MAIL" required>
<textarea name="comments" placeholder="MESSAGE" required ></textarea>
<button name="send" type="submit" class="submit">SEND</button>
</form>
</div>
</section>

 

CSS Codes of this form:

#contact {width:100%; height:100%; margin 0 auto; background: #DDD; }

.container {width:960px; height:auto; margin: 0 auto; padding: 50px 0;}

#contact .container form input,
#contact .container form textarea {
width:97.4%;
height:30px;
padding:5px 10px;
font-size: 12px;
color:#999;
letter-spacing:1px;
background: #FFF;
border:2px solid #FFF;
margin-bottom:25px;
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-ms-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;}

#contact .container form input:focus,
#contact .container form textarea:focus {
border:2px solid #dd4545;
color:#999;}

#contact .container form textarea {
height:150px;}

#contact .container form .submit {
width:100%;
padding:5px 10px;
font-size: 12px;
letter-spacing:1px;
background:#dd4545;
height:40px;
text-transform:uppercase;
letter-spacing:1px;
color:#FFF;
border:2px solid #b43838;
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-ms-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;}

#contact .container form .submit:hover {
color:#FFF;
border:2px solid #dd4545;
background: #b43838;
cursor:pointer;}

#contact .container form .required {
color:#b43838;}

 

So we will try to integrate this form with Contact Form 7 now. Here are the code snippets with the integration of Contact form.

<section id="contact">
<div class="container">
<form name="htmlform" method="post" action="toyousender.php">
[text* first_name placeholder "Name"]
[text* email placeholder "MAIL"]
[textarea comments placeholder "MESSAGE"]
[submit class:submit "Send"]
</form>
</div>
</section>

 

CSS codes will be same. So we only need to integrate the HTML Code.

How to use contact form 7: Configure Mail Senders and Receivers:

Finally, It is crucial to receive and send email using the contact form. If you are unable to integrate this mail fields properly maybe you will not be able to send emails successfully, and you will not get emails using this form too. To receive email correctly, please enter your To, From, Subject, Message Body precisely and finally press Save.

How to configure mails in Contact Form 7

Configure “After Submission Messages”:

It means the customization of the messages that will appear just right after the form submission. Therefore can set your message for each form. Please refer the image below for more understanding.

How to configure after submission messages in Contact Form 7

If you are a beginner and non-techie, you can check the beginner guide to create a website from here: How to to create a website for beginners. Hope you got the in-depth tutorial on using your contact form 7. If you have any hesitation, please don’t forget to comment below because our LLN Team will try to investigate your query and answer it as soon as possible.

You may also read our previous post: How to use Duplicate Post WordPress Plugin

Summary
Review Date
Reviewed Item
How to use Contact Form 7 Plugin
Author Rating
51star1star1star1star1star
LLN Team

About The Author : LLN Team

We are LLN Team promise you to provide you useful information about website and blog creation. We will focus on WordPress and other essential needs. Keep browsing Lets Learn Now. Cheers

Leave a Reply

Your email address will not be published.

Please post a relevant comment and make the conversion informative.