A contact page is essential for pretty much every website. It is clear proof the company is real, offers transparency and a real means for people to get in touch with the team members.
For guidelines on how to design the perfect Contact Us page, you can refer to our previous article.
That article mentioned the contact form, among other elements for a contact us page.
Let’s see how to insert a contact form into a WordPress website.
We’ll take the example of a website built with ColibriWP, and guide you step by step in creating a contact form for your website.
Login to your ColibriWP account and select the project you’re working on. Open the Customizer:
Then, select the Contact page where you want to insert the contact form.
Choose the place where you want to insert the contact form in the page.
In this case, it’ll be under the paragraph in the “Let’s work together” section.
Then, you have to go back to the WordPress Admin dashboard.
In the left-hand menu, go to Plugins -> Add New. Search for the Contact Form 7 plugin. Click Install, then click Activate.
Go to Plugins -> Installed Plugins and check if the Contact form 7 plugin has been installed and activated.
A new subcategory has been added to the left-hand menu of the WordPress Admin dashboard: Contact.
Click on Contact -> Add New.
Give a name to your contact form.
Then, start customizing the Contact Form.
You can change the default labels with the ones that best correspond to your contact form fields.
From the Mail subsection, you can set the email address where you want the contact form messages to be sent:
From the Messages subsection, you can customize the messages that appear in case of:
- Message that was successfully sent.
- Message failed to send.
- Validation errors occurred.
- Submission was referred as spam.
- There are terms and conditions that the sender must accept.
- Invalid phone number.
- Not valid URL.
- Invalid email address.
- Uploaded file is too large.
- There is a field that the sender must fill in.
After having made the changes, you need to press “Save” to keep them for your contact form, as it will appear in the website contact page.
After having clicked “Save”, you’ll see a shortcode corresponding to your newly created contact form.
You’ll need to copy the shortcode marked in blue and save it, as you’ll need it later.
Now, you have to go back to the Customizer. You need to select the Contact page, where you want to include the contact form.
Open the list of Components and search for the “Contact Form” component.
Use drag-and-drop and place the component in the selected place for your contact form.
The component comes with the default settings. You can change the presets:
Click inside the component, and open the panel with customization options for the contact form.
In the left-hand menu of the Customizer, under Content tab, you’ll find the option Form Shortcode. Replace the default shortcode with the one you’ve saved earlier:
Customize the contact form:
Under the Style and Advanced tabs, you’ll find options for specific customizations you can apply to the contact form:
- Background color
- Font and color for the labels text
- Settings for notices (messages displayed in case of successfully sent message, error message, etc.)
Here’s an example of customized contact form:
Once you customized it according to your wishes, don’t forget to save the changes.
Check if the contact form functions properly. To do this, you have to simply fill in the form and press the Send button. Check if the message went to your inbox (for the email address you set for that contact form).