The Contact page on a website is essential for customers to find contact information and leave comments or questions. Creating a contact form in WordPress is made easier with the Contact Form 7 plugin, which has simple installation steps. The plugin allows for creating a form with various fields like name, phone number, and address. After installing and activating the plugin, you can add components to the form, configure properties, and insert the form into a new page. The plugin also allows for configuring mail settings and notifications. Finally, create a new page with the form shortcode to have a functional contact page on your website.
Hello friends!
The Contact page is a very necessary page for every website. It is a place where customers can find contact information as well as leave comments and questions for website administrators. For customers to be able to leave information, you need a contact form, including information boxes such as Name, phone number, address, contact content, etc. Creating a contact form in WordPress is made simpler with plugin installation Contact form 7 with the page creation function to create a contact page. Below I will guide you through installing the plugin and creating a contact page.
Install Contact Form 7 plugin
Contact Form 7 is a simple, easy-to-use contact form plugin that is quite famous with over 5 million activations and 5-star ratings on the WordPress plugin repository.
Step 1: Install Plugin
To install this plugin, go to the menu Plugin > New installation. Then, search for the plugin with the keyword “contact form 7”, you will see this plugin appear. Click the install button and activate it to use.
Step 2: Activate Plugin
After successfully installing and activating the CF7 plugin, you will see an additional menu named Contact form, click on it, then click Create new form.
Step 3: Add new form
To add a new form, you enter a name for the form, and proceed to add content to the form. If you want to add any component, you can click on the list buttons to add it, such as short text, email, URL, phone number, etc.
Step 4: Configure properties
Here, I give an example of adding a phone number, you must complete the following information:
- Type: if required, then this box must be filled in when used.
- Name: the name of the input cell to distinguish, no spaces, and must be unique
- Default value: if you fill it in it will appear outside, in the input box
- Check Use this line as watermark… then the default value above will be dimmed, and when the user enters it will disappear automatically.
- ID attribute: for use in CSS
- Class attribute: used in CSS to decorate the cell
Step 5: Insert form
Then you press the insert button into the form.
Step 6: Text configuration
Similarly, you can add short text for customers to fill in their names, email, long text to fill in the content, send to add a submit button to the form. Additionally, to label each input field, you can insert a cell between the label pair with the structure . In which, the bold part is the code of the input box.
Step 7: Configure mail
Then, you go to the mail configuration section to provide email recipient information when customers contact via this form.
| Receiving email | Email that will receive contact information from this form |
|---|---|
| Email sent | Email information sent, just leave it as default! |
| Subject | Subject for the email |
| Additional headers | Extra information for the email, such as a Reply-to message |
| Message body | Email content |
You can insert customer entered content by using the name of the input cell enclosed in quotation marks. [ ] such as [dien-thoai]
Step 8: Configure notification form
Through the section Notice and Attention you can edit the form messages as you like.
Step 9: Contact short code
You press the button Save to save this form. Then, under the form name, you will see a short code, in a blue box. Copy it!
Step 10: Create a new page
Now create a new page, named Contact. In the content section, paste the short code copied above. Then click the button Post to post the page.
Now go out to the website and access the Contact page you just created, you will see a form to fill in information as below. Try filling in the information and click the button Send Please!
If you see the message Thank you, it means the submission was successful. Now check the email that you configured as the recipient email when creating the form. If you receive the email, it means it was successful!
Summary
So, you know how to create a fairly simple contact form with the Contact form 7 plugin, right? However, my form is quite simple, you can add more contact information, logo, business image to the contact page to make it look more eye-catching! In addition, you can also use CSS to make your form look more beautiful, more professional, like the image below! I will guide you later.
