A contact section in your WordPress blog or website provides a way for your site users to get in touch with you. In the modern web business, interacting with your users is key to knowing, keeping, and giving them better service using the feedback you receive.
Some WordPress themes come with ready-made contact pages while some do not. But in any case, it is easy to set up a contact form set up in your WordPress website using the Contact Form 7 plugin.
Let’s look at some of the benefits of using Contact Form 7 to create your contact and web forms.
- Customization of forms with simple markups
- Ability to manage multiple contact forms
- Strong support forum and detailed documentation
- Ajax form submission
- Integration of forms with shortcodes
- Install Contact Form 7
- Add a contact form to contact page
- Create and customize a contact form
- Setting up the mailing system
- Setting up ‘contact received’ messages
Steps to Setup Contact Form 7
To use CF7, you first need to install the free plugin, and then go on to set up forms on your site.
Install Contact Form 7
Login to your admin dashboard and click Plugins >> Add New.
In the textbox labeled Search Plugins, type Contact Form 7 to search for the free plugin in wordpress.org. Next, click the Install Now button on Contact Form 7 by Takayuki Miyoshi.
When the installation completes, click the Activate button to enable this plugin.
There you have it…Contact Form 7 is now installed.
Add a contact form to contact page in WordPress
If you look at the sidebar menu on your admin dashboard, you will see Contact in the list. Go ahead and click on it.
On the Contact Forms page, you will see a single entry titled Contact form 1 on the list. This is a basic contact form with input fields for Name, Email, Subject, and Message.
Click on the shortcode beside it to highlight, then copy the code.
Now it’s time to place the form in a contact page. Back on the sidebar menu, click Pages >> Add New.
Write the title of the page in the title bar. In this case, we titled it Contact Us. Paste the shortcode you copied to your clipboard on the body of the page and save the changes.
Publish the page to see the presentation of the contact form you just created. It should look like this.
Create and customize a contact form
To create a new contact form, click on Contact >> Add New, then give the contact form you just created a name.
There are many things to see on the Form template. You can see the various form-tag generators (buttons) at the top of the text area, and you can see the tags displaying the different fields in the body of the form.
To customize your form, select any of the tag generators that represents the kind of field you want to have in your form. Since we already have the text, email, textarea, and submit fields, let’s look at a drop-down-menu.
- Click on the tag generator for a drop-down menu.
- Check the Required field checkbox if you want the field to be required.
- Give the menu a Name.
- Fill in your menu Options. These are the items that will be displayed in the dropdown.
- There are optional checkboxes to Allow multiple selections and to Insert a blank item as the first option.
- Provide values for Id attribute and Class attribute only if you intend to add styles to your form fields.
- Finally, click the Insert Tag button.
The new form field will be inserted at the point where you placed your mouse pointer.
Save the changes and copy the shortcode of the form to your clipboard.
Again, repeat the steps we did before to place this code in a contact page. When you place the form in a page, you will notice the added form field at the position where it was inserted.
Setting up the mailing system
Next to Form is the Mail section. This section allows you to set up how you receive the contact information from users who message you with your contact form.
Click on the Mail tab and proceed to change the content to information that suits the purpose of the form.
- In the ‘To’ field, write your email there as you are the recipient.
- In the ‘From’ field, write [your-name] <[your-email]> which represents the name and email of the sender from the form.
- Finally, in the ‘Subject’ field, write “[your-subject]”. The Mail setup should look like the image below.
Scroll down to the Message Body. If there are any new form tags that are not in there, copy the name of that tag and insert it in a convenient position. For example, we added a ‘my-continents’ drop-down-menu to our form. Therefore, we have to include it in the Message Body.
Setting up ‘contact received’ messages
The messages tab contains the different messages that get shown to the client after a message is sent. In the text fields, you can edit the messages to what suits you best.
When you have made all changes, click on the Save button and integrate your customized form into your web pages.
Web forms complete your website’s user experience by providing a convenient way for users to reach you. On the WordPress platform, plugins make the integration of forms easy by linking them to the database for you. You can insert a form on any page, in posts, and even in widget areas.
We have shown you how to set up Contact Form 7 on your website. If you followed the steps in the tutorial, you will find its set up and customization to be simple and straightforward.
Contact Form 7 is free. As your website scales, you can extend your forms’ functionality by adding Contact Form 7 extension plugins. Learn more about plugins and how to integrate them here on one of our tutorials.