How to Install and Configure Contact Form 7 on Blog

When customer facing a problem and unable to find information on your blog, they definitely will contact you. Apart from direct contact, they might use the contact form as the medium to communicate.

On the previous post, I already share 3 Types of Form You Can Create Using Contact Form 7 Plugin. You may read the benefits using the form on that article.

Then, in this post, I will show you how to install and configure Contact Form 7 on your blog. It’s quite straightforward. The difficult part may be on configuring the form since it uses coding instead of the drag-and-drop feature.

Follow step-by-step below:

1. Login to your WordPress blog.

2. Go to Plugin -> Add New.

3. Search for Contact Form 7.

4. Click Install Now and it will start to install.

5. Once completed installation, click Activate.

6. On your Dashboard, you should see a menu called “Contact”. That’s the configuration page for Contact Form 7.

7. The are four panels on the form which is Form, Mail, Message and Additional Setting.

8. On the Form panel, you will see the coding. The downfall of Contact Form 7 is all in coding without drag-and-drop function. It’s quite challenging at the beginning but trusts me, it’s simple coding and you also can do it.

9. Click on the Contact then create Add New.

Note: In this post, I will show how to create a request for quotation for t-shirt printing business. That’s the form I’m created on one of my business blogs. You may customize according to your business need. The concept is almost same.

10. Name your form. I named it Quotation Form. Click  Save.

11. After you click Save, the plugin will provide with shortcode. You need to copy and paste to blog Pages, Post or Widget which your form will be published.

12. I decided to publish on a Pages called “Request for Quotation”. Then I create a new page name for it.

13. Paste the shortcode on the Request for Quotation page.
Types of Form You Can Create Using Contact Form 7 Plugin

14. Click Preview to view the form.

15. Now you can see the live preview of the form. It’s not yet complete as you need to fulfill your requirement.

16. Go back to the Contact Form 7 and click Edit the Quotation Form.Type of Form Using Contact

17. So in this form, I want to have field include:

  • Customer name
  • Customer contact email
  • Customer phone number
  • Customer address
  • T-shirt quantity
  • Type of service (silkscreen printing/heatpress printing/embroidery)
  • Printing area (front/back/sleeve)
  • Type of shirt (100% cotton/microfiber/corporate shirt)
  • Design (to upload on the form)
  • Expected to receive
  • Future information – any info or request by the customer.

18. It needs time to create a complete form. You may try and error. For example, after you amend the coding, click Preview on the pages. You can see the changes on the form.

Form tab

19. Let find below code as I created for the Quotation Form:

<p>Name*<br />
 [text* your-name] </p>

<p>Email*<br />
 [email* your-email] </p>

<p>Phone*<br />
 [tel* tel-393] </p>

<p>Address<br />
 [textarea address-695]</p>

<p>T-shirt Quantity*<br />
 [text* quantity-548]</p>

<p>Printing Type<br />
[select type-858 "Printing(Silkscreen)" "Embroidery"]
</p>

<p>Printing Section<br />
 [select section-840 "Front only" "Bac only" "Front and Back"]</p>

<p>Type of T-shirt<br />
 [select tshirttype-840 "Round Neck 100% Cotton" "T-shirt I AM" "Round Neck Quick Dry" "Muslimah" "Honey Comb" "Cotton Interlock" "Single Jersey" "Corporate F1"]</p>

<p>Expected to Receive(example: 31/06/2018)<br />
 [text date-45]</p>

<p>Upload your design* (We accept format Adobe Photoshop(.psd), Adobe Ilustrator(.ai), jpeg, png, doc<br />
<p>Design 1<br />
 [file* design-484 filetypes:psd|ai|jpeg|jpg|png|doc|docx limit:15mb]</p>

<p>Design 2<br />
[file file2-333 filetypes:psd|ai |jpeg|jpg|png|doc|docx limit:5mb]</p>

<p>Additional Info (please specify)<br />
 [textarea extra-151] </p>

<p>Information with * is compulsory.</p>

<p>[submit "Submit"]</p>

<p>Note: After click Submit, please wait for a while (loading) while the file uploading to system</p>

20. As for reference, you also can use Form tag generator to create a new form field.
form tag generator

21. The symbol * represents the compulsory information. The customer needs to fulfill the * text field.

22. The code sitting between [] symbol. You can create any name for the code as long you know the code belongs to which area.

Mail tab

1. The mail tab uses to configure the information which will be received in your email inbox. It’s recommended to send all the data provided by the customer to your email.

2. Contact Form 7 already provide the mail-tags base on your Form field set on the previous step.

3. Let’s find out the example below:

Install and Configure Contact Form 7

Install and Configure Contact Form 7-infoCongratulation, you form is ready to use!

How Contact Forms 7 work?

In order to verify your form is working fine, you have to test. Create dummy input to the field you created and send the form. Finally, check your email inbox either you receive the submitted form or not.

Below is the information gathered from the form I created before.

contact form 7 submit email

If you received an email with the information you already set, means you form is working fine. If some information is missing, you can edit on email tab according to your need.

That’s the step-by-step on how to install and configure Contact Form 7. Hopefully can give you an idea to create your own form.

Have you had experience using Contact Form 7 or other form plugins? Share with me.

ZAINI

Remove term: Install and Configure Contact Form 7 Install and Configure Contact Form 7

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.