Lucid Gen’s Contact Form 7 configuration guide will help you have a contact form as you like. You will be notified by email and you can get data from Contact Form 7 by Connecting Contact Form 7 with Google Sheet . I find this very convenient for reusing data later. If your website is using WordPress , what are you waiting for, see how to use Contact Form 7 right below.
Related posts
What is Contact Form 7
Contact Form 7 is a completely and most popular free form creation plugin for WordPress. This will help WordPress add the ability to create contact forms and insert forms on any page you want. Configure Contact Form 7 allows you to customize a variety of information and title fields. Notification when there is data can be sent to many emails at the same time. Because of its popularity, there are a lot of other developers who added special features to it with plug-in plugins.
Instructions on how to use Contact Form 7 include the following main points:
- Instructions for configuring WordPress Contact Form 7 to have a desired form.
- Configure SMTP for Contact Form 7.
- Connect Contact Form 7 with Google Sheet to get data from Contact Form 7.
- Finally, we share some beautiful Contact Form 7 templates.
How to configure the super standard Contact Form 7
You access website administration. Go to Plugin> Install New to install Contact Form 7 .
You go to the Contact Form> Form List will see a default form available. You can either Create a new form or Modify this default form.
Configure Contact Form 7 content
Before guiding the configuration of Contact Form 7 WordPress, I want to explain the meaning of the types of content and when it is appropriate to use them.
The most commonly used content:
- Short text: it is a short field of information, it is most common. Can substitute for content from 2 to 5 too. Especially should be used as a substitute for Phone Number to reduce difficulties when entering phone numbers for customers. Vietnam’s prefixes are quite diverse, not to mention +84 and 0, some customers like to copy and paste so it may contain dots, spaces, the form will error. Let guests feel free to enter their own phone number.
- Long text: is the box to fill in information like long paragraph. Suitable for contact pages, not suitable for landing pages because it takes up a lot of space on the form.
- Email: is the box to enter the email address. Nothing to note.
- Phone number: is the box to enter the phone number. But you should use Short Text instead.
- Date: is in the date format. Suitable for appointment booking forms.
- List menu : is a menu that shows a list, guests can choose only 1 value.
- Checkbox option: there are many options, guests are ticked with many values.
- Radio options: There are many options, guests can choose only 1 value.
- Send: just send button.
The content is rarely used:
- URL: the box to enter a website link. Suitable for website consulting form, or form requesting social networking information.
- Number: is the cell where only the number is entered. Suitable for form with order quantity.
- Terms of acceptance: next.
- Question: next.
- File: is a button to upload an attached file. Suitable for recruitment form.
To make it easy to understand, I will take an example that I want to create a real estate consulting form . I want to use Contact Form 7 to get customer information, including:
- Name
- phone number
- Options: View sample house, Get a quote, or Consult now.
Step 1: You delete the redundant parts in the content of the form. Notice we’re missing the box for numbers and options.
Step 2: Click on Short Text to insert the Phone Number box.
Step 3: You check the box This field is required , then you enter a name for this box (words without accents). Done then click the Insert button below.
This is the result of step 3. But comparing to the cells above, the label <label> Phone Number </label> is missing . Please add it yourself.
Step 4: After the warehouse, add labels to the cell phone number box is finished. You click the button Options checkbox to add options for the customer.
Step 5: You name this content (eg: tuychon), then you enter Options, each line is an option . Finished, click the Insert button below.
And here is the result of step 5. So we have completed a real estate form.
Note: you must click the Save button before moving on to Mail Configuration.
Configure Contact Form 7 part to send Mail
You click the Mail Configuration tab to set the type of email you will receive from Contact Form 7 when a customer successfully completes the form.
- Mail received: enter the email to receive notification when the customer successfully completes the form. Separated by commas.
- Mail sent: leave intact.
- Title: edited for convenience of your work. For example, I’m also OK.
- Additional headers: leave the same or add Cc following the Cc structure : email1, email2, email3 .
- Message body: you should delete everything and then compose it for quick reading or copying. For example, I am also neat.
Configure Contact Form 7 notification section
You click on the Notifications and Notes tab to edit the messages when the customer fills out the form. In my opinion, you just need to edit the message Form has been sent successfully , the error parts just leave the same. Remember to save.
A few basic steps are you already have a professional real estate consulting form. Now we will insert it on the page to see how it looks.
Insert Contact Form 7 on any page
Step 1: Go to Contact Form> Form List. Please copy the Shortcode of the form you just created.
Step 3: You create a page, or edit any page you want. Paste the shortcode as normal text, then click Publish (Update).
This is the real estate consultation form result that we created from Contact Form 7.
Add placeholder for Contact Form 7
This section is additional, you can skip. Placeholder is the text that will appear in the fill box. I like to use it to replace the labels above the cell, making the form more concise. For example, in the image below you can compare the difference between using labels and placeholders.
Step 1: You should copy a completed form. Do not edit or do not like it, it is difficult to return, also do not create a new one because you have to fix the mail Configuration, Notifications.
Step 2: You follow these 3 small steps to correct the label from the placeholder and reduce the space between the fields. Remember to save.
- Replace the text label to div in brackets, helping to reduce the space between the information fields.
- Add the “Cell Name” placeholder before the closing bracket ] .
- Delete the label sections above the information fields.
Configure SMTP for Contact Form 7 to send mail
Most WordPress websites will need to use SMTP for the system to send email notifications. If you try to fill out the form without receiving mail from Contact Form 7 then follow these steps to configure SMTP for Contact Form 7.
Step 1: Go to Plugin> Install New to install Easy WP SMTP .
Step 2: You go to the Google Account Management page by clicking on your avatar on the Google page.
Step 3: Click the Security button on the menu. You must turn on 2-step verification first. Then click App Password .
Step 4: Click Choose an app and choose More (Custom Name) .
Step 5: You enter the name whatever, and then click Create .
Step 6: You copy the application password in the yellow box, paste it somewhere to use it for the next step.
Step 7: Go to Settings> Easy WP SMTP. Please configure according to the instructions below or see the image.
- Email address: your gmail.
- Email sent: what name you like.
- SMTP server: smtp.gmail.com
- Encryption type: SSL / TLS.
- Cổng SMTP: 465
- SMTP Username: your gmail.
- SMTP password : created application password.
The rest you leave as default, click the Save changes button below (In the app password you should re-enter and click the save button a few times, as I recently found this part a bit laggy).
Step 8: You go to the tab of Email Test , you enter your email and content and click the button Send Email Test Test . If the green message is successful, go to gmail and you will see the email you just sent.
So we have finished configuring SMTP for Contact Form 7 in particular and the website in general. Now your forms will automatically email you when a customer has successfully filled out the form.
Connect Contact Form 7 with Google Sheet
Please link Contact Form 7 with Google Sheet if you want to manage customer data that has filled out forms in Google Sheet. This makes it easy to divide data for sales and reuse data in the future.
Step 1: Go to Plugin> Install New to install CF7 Google Sheet Connector .
Step 2: Go to Contact Form> Google Sheet and then click Get Code to get the code associated with your Google Drive account.
Step 2: You select the Google account of you, then just click Allow all.
Step 3: Please copy this code and go back to the website to paste.
Step 4: You paste it in and click Save , see “Your Google Access Code is Authorized and Saved” is successful.
Step 5: Go to Google Sheet and create a Sheet to receive data when customers fill out the form.
Step 6: Go to Contact Form> Form List, click Edit your form. In the form editing page, go to the Google Sheet tab and then fill in the Sheet information you just created into the Google Sheet Settings section . Remember to click save.
Step 7: Scroll down to see the Field List section . That is the name of the data columns, please copy each name and then paste it into the columns in the Sheet receiving your data.
The result of step 7 is that the Sheet receiving the data must have column names in the Field List like this.
So we have linked Contact Form 7 with Google Sheet already. But have to test it to see if it works properly.
Test sending test Contact Form 7
Now I will try submitting a real estate consultation form to see how the results will be. On the left is the information you entered, on the right is the message you have sent successfully.
Immediately I received an email with the content as I have installed in this mail configuration section.
And in the Sheet that received my data also jumped the data that I just filled out. Like, Share, Comment for Lucid Gen alone guys: v.
Share beautiful Contact Form 7 form
I write articles with my mind, I write to the extreme when I write. If you still have trouble thinking about how to create a form, I have a few popular templates available.
Usage: You copy the code of the form, paste it into the Form Content, edit the text, and then click Save Form. Then you reload the page and then go to the Mail Configuration tab to correct the type of email received when the guest successfully filled out the form.
Beautiful Contact Form 7 for real estate
<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>
<div> [email* email placeholder "Email"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[checkbox tuychon "Tôi muốn xem nhà mẫu" "Tôi muốn nhận báo giá" "Tôi cần tư vấn ngay"]
[submit "Đăng ký"]Beautiful Contact Form 7 form for recruitment
<div> [text* tenungvien placeholder "Tên của bạn"] </div>
<div> [email* email placeholder "Email"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[select* vitri "Digital Marketing" "Chăm sóc khách hàng" "Nhân viên thu mua"]
[file Filedinhkem limit:2048 filetypes:pdf|doc|docx]
[submit "Ứng tuyển"]Beautiful Contact Form 7 template for spa, dental, beauty salon booking
<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[date ngay]
[checkbox dichvu "Chăm sóc da" "Lấy nhân mụn" "Lăn kim tế bào gốc"]
[submit "Đặt lịch"]Beautiful Contact Form 7 for personal advice
<div> [text* tenkhachhang placeholder "Tên của anh (chị)"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[textarea tinhtrangsuckhoe placeholder "Tình trạng sức khỏe của anh (chị)"]
[submit "Tư vấn ngay"]Beautiful Contact Form 7 for ordering
<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
<div> [text* diachi placeholder "Địa chỉ nhận hàng"] </div>
[select* sanpham "Đồng hồ Citizen" "Đồng hồ DW" "Đồng hồ Casio"]
[number soluong placeholder "1"]
[submit "Đặt mua"]Conclusion
This is a tutorial on how to use Contact Form 7 that I believe is complete to help you handle the form part of the website. If you find this article interesting and helpful to you, do not hesitate to leave a comment so Lucid Gen knows that we are doing well and will try to make more useful articles like that. If you have not done any part, please also comment below for me to support.
