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.
Post Contents
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.
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 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.
<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.
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.
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.
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.
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
