If you want to allow your customers or website visitors to contact you, you need to have a contact form on your website. In the following tutorial, I will describe how to create it in WordPress.
What is contact form good for?
The contact form is a simple tool for contacting your site visitors. Internet visitors are much more happy to use it than email. This is because they save time. They can write their message directly on the page without opening their email.
But contact form saves time for you as well. And it will give you all the information you need:
- In the form, you set up fields for the information you require from people. For example, a phone number. They would probably no include this piece of information in their email.
- You can set up auto-responses to provide users with basic information automatically.
In addition, using the contact form protects you from spam. If you only post an active email on the web, you will start receiving lots of spam.
How to add a contact form in WordPress
WordPress offers the possibility to create a contact form using a plugin. I personally recommend using the Contact Form by WPForms.
This plugin is very simple to use. It uses the drag & drop tool, so even a beginner can create a contact form very quickly. The basic version is available for free.
If you need more advanced features, you can upgrade to WPForms Pro. Compared to the free version, it also includes the possibility of saving submitted forms in the database, uploading files, form templates and other practical features.
You install the plugin directly from the site administration. Be sure to activate the plugin after installation. You can learn the exact procedure in my article: What is the WordPress plugin? How to install it?
After activating the plugin, you will see a new WPForms entry in the site administration.
Form creation using WPForms
To create a new contact form, go to WPForms> Add new. You’ll see the following page:
Enter the contact form name first. Then select the template you want to use. The basic version of WPForms offers four templates for creating forms.
Blank Form — If you choose an empty form, you can create your own version using drag & drop feature.
Simple Contact Form — this template offers the possibility to use a pre-made form. However, you will be able to add and remove individual fields as you need.
Newsletter Signup Form — in this template, you’ll create a form to subscribe to your site’s news (newsletter). Here, you can add and remove individual fields according to your preferences.
Suggestion Form — you can use it to ask your visitors for opinions or suggestions.
How to create a simple form
Now let’s describe how to create a form using the Simple Contact Form.
On the right side of the screen, you will find pre-created fields for adding a name, email, and message. Hover over each field to see a menu to delete and edit. You can also simply drag and drop them to another location on the form.
To add a new field, go to the menu on the left side of the screen. Click or drag the field to the right.
To save the contact form, make sure to click Save. You can find the button at the top of the screen.
Setting of form properties
You will see the form you created on the page with the Submit button. To set the button name in a language other than English, go to Settings> General.
In addition, you will find several other setup options:
- Form Name — here, you are editing the contact form name.
- Form Description — used to describe the form.
- Form CSS Class — allows you to insert a custom class for the form
- Submit Button Text — editing of text on the submit button
- Submit Button Processing Text — fill in the text to be displayed after submitting the form.
- Submit Button CSS Class — this field serves to add a custom class for the submit button
- Enable anti-spam honeypot — I recommend leaving the box in this row checked. I recommend leaving the box in this row checked. This feature is designed to protect the form from being sent as spam
When you set properties on the General tab, you do not need to edit anything other than the text for the Submit button and the text that appears when you submit the form.
Email notification settings
Under Settings> Notifications, you will find additional settings options. These are settings for email notifications. They are typically sent to the webmaster’s email address. Edit the subject of the email to keep track and have an overview of your received messages. You can also edit other fields if you want.
- Notifications– here you can enable or disable form sending to your e-mail. I recommend leaving this feature on. Individual completed forms are not saved anywhere. This is just your e-mail notification.
- Send To Email Address— fill in the email address to which the form should be sent.
- Email Subject— you can also set the subject of the email.
- From Name — the name of the email sender. You will find your site’s default name here.
- From Email— the sender’s email address.
- Reply-To— email address for a reply.
- Message— email body. If you leave the {all_fields} setting, the email will contain all form fields.
Setting of form submission confirmation
A form confirmation is what a visitor sees after they submit the form. You can choose to thank you for contacting or redirect the visitor to the selected page of the site. To do this, go to Settings > Confirmations.
First select the type of confirmation. There are three options to choose from in the Confirmation Type field:
- Message– displays the text you type in the window below.
- Show page– here you will set redirection after submitting the form.
- Go To URL– Enter the URL of the page to which the web visitor should be redirected after submitting the form.
Editing, deleting, and duplicating the form
All created forms will be displayed in the list of forms after clicking on WPForms in the administration page. Hover over the form name to see a menu of available features. You can choose to edit, preview, delete or duplicate the form.
The last function is the number of views. This feature is only available in Pro version. This will save filled in forms directly to the site administration.
Adding a contact form to a WordPress page
After setting the form properties in WPForms, you need to embed it on the page. First, open an existing page you want to edit or create a new one.
Use the shortcode to add a contact form. You can find it:
- on the form edit page under the Embed button
in the top right corner, - in the list of all forms in the shortcode column.
Create a new block on the page where you want to embed the contact form. You embed a shortcode into it. Make sure to save all changes to the page.
Here is how a page will look like after embedding a shortcode.
How to add a contact form to your sidebar
In WordPress, the contact form can also be added to the sidebar, page header or footer. In the Administration, go to Appearance> Widgets. Scroll down the list of widgets to find WPForms.
Add the form in the same way as other available widgets by dragging and dropping to the desired location.
Fill in the title and select the form you want to use. Don’t forget to save your changes. You can also edit the embedded form with Live View.
WPForms Premium vs WPForms Lite
For example, the paid version of WPForms Premium can do the following in comparison to the free (lite) version:
- Ability to create unlimited forms.
- More templates for forms.
- Ability to use conditional logic to control the visibility of form fields.
- Ability to create multi-page forms.
- Ability to create user registration forms.
- Advanced spam protection.
- Ability to upload and download files via form.
- Advanced field types such as date and time fields.
- Ability to save, view and manage form responses directly in WordPress administration.
- Integration with third-party services such as PayPal, Stripe, Mailchimp, AWeber, GetResponse, Constant Contact, Drip, Zapier …
