Hello friends!
The Contact page is an essential page for every website. A place where customers can find contact information as well as leave comments and questions for website managers. In order for customers to leave information, you need a contact form, including information boxes such as Name, phone number, address, contact content, etc. It becomes simpler with the installation of the Contact plugin. form 7 with page creation function to create contact page. Here I will guide you to install the plugin and create a contact page.
Install Contact Form 7 plugin
Contact Form 7 is a simple, easy-to-use contact form plugin that is quite popular with more than 5 million activations and 5-star reviews on the wordpress plugin repository.
Step 1: Install Plugin
To install this plugin, go to the menu Plugin > Install New . Then, search for the plugin with the keyword “contact form 7”, you will see this plugin appear. Please press the install button and activate it to use.
Contact Form 7 Plugin – Instructions for creating a Contact Form
Step 2: Activate the Plugin
After successfully installing and activating the CF7 plugin, you will see an additional menu named Contact Form appear , click on it, then click Create new form .
Step 3: Add new form
To add a new form, enter a name for the form, and proceed to add content to the form. Any element you want to add, can click the list buttons to add it, like short text, email, URL, phone number, etc.
Step 4: Configure properties
Here, for example, I add a phone number, you must complete the following information:
- Type: if you select the required item, you must fill in this box when using it.
- Name: the name of the input field to be distinguished, without spaces, and must be unique
- Default value: if you enter it, it will appear outside, in the input box
- Select Use this line as watermark… then the default value above will be blurred, and when the user enters it, it will disappear by itself.
- ID attribute: for use in css
- The class attribute: used in css to decorate the cell
Step 5: Insert form
Then you press the insert button in the form.
Step 6: Configure Text
Similarly, you can add short text for customers to fill in their name, email , long text to fill in the content, etc. send to add a submit button for the form. Alternatively, to pre-label each input cell, you can insert a cell between the label pair with the <label> input cell name [text* your-name] </label> structure . In which, the bold part is the code of the input box.
Configuration interface to create contact form with Contact Form 7 plugin
Step 7: Configure mail
Then, you go through the mail configuration section, to provide mail recipient information when customers contact via this form.
- Received mail: is the email that will receive contact information from this form
- Email sent: send email information, leave it as default!
- Subject: subject for email
- Additional headers: additional information for the email, such as a Reply-to . message
- Message body: Email content
You can insert what the customer has entered by using the name of the input box enclosed in [ ], such as [dien-voice]
Mail configuration interface – Instructions for creating a contact form
Step 8: Configure notification form
Through the Notifications and Notes section , you can edit the notices for the form to your liking.
Contact form configuration interface
Step 9: Short code for contact
Click the Save button to save this form. Then, under the form name, you will see a short short code, five in the blue box. Please copy it!
Step 10: Create a new page
Now create a new page, named Contact. In the body, paste the short code copied above. Then press the Publish button to publish the page.
Interface how to create a new contact page
Now go out of the website and visit the newly created Contact page, you will see a form to fill out information like below. Please fill in the information and press the Submit button !
Form to fill in contact information
If you see a message, Thank you, it was sent successfully. Now check the email that you have configured as the receiving mail when creating the form, if receiving the mail is successful!
Notice form Thank you
summary
So you already know how to create a fairly simple contact form with the Contact form 7 plugin, right? However, my form is quite simple, you can insert contact information, logo, business image on the contact page to make it more eye-catching! In addition, you can also use css to make your form look more beautiful and professional, like the image below! I will guide you later.
Business image on the contact page – Instructions for creating a contact form
