WordPress is an incredible tool that lets people with just about any skill level come up with beautiful websites. The platform works with the help of hundreds of plugins that facilitate different things. These could be anything from a parallax scrolling background to a small animation or in our case, a contact form.
Contact forms are an essential part of every website. They are one of the best ways for your audience to reach out to you and they also protect your contact information by not exposing your emails directly.
In this article, we’re going to take a look at how you can add a contact form for your WordPress website.
Also read: How to change the theme in WordPress?
How to add a contact form to your WordPress site?
Just like with most things in WordPress, we’re going to use a plugin to integrate a contact form in our site. Now there are hundreds of free and paid plugins for this purpose, but here we’re using WPForms lite for the purpose of the guide.
There are alternatives such as Ninja Forms, Formidable Forms and Gravity Forms, among many other popular names, which will help you make forms for just about anything on your site. The guide below will help you add forms for any plugin.
Downloading a Forms plugin
Step 1: Firstly, we’re going to download and install the plugin. So head over to the Plugin section on your WordPress site and click on Add New.
Step 2: Seach for WPForm Lite. Click on the Install Now button to download and install the plugin. Once the plugin is installed, you’ll see an Activate button. Click on it to activate the plugin.
Step 3: Now that we have the plugin up and running, you’ll notice a WPForms option show up in the sidebar. Click on it to go to the plugin settings.
Here you’ll see a template form and any other forms you have made or will make. Now you can go as complex as you like, but for the purpose of this article, we’ll just focus on a simple contact form.
Also read: How to change the footer in WordPress?
Creating a Contact Form for your WordPress website
If you’ve downloaded WPForms, follow the steps mentioned below. If you’re using some other Contact form plugin, the steps will be quite similar if it uses a drag-and-drop builder — most.
Step 1: Click on Hestia to open the form.
Step 2: You’ll notice that this form already has almost everything we’d need for a basic contact form. On the left side of the page, you’ll see options to either edit the existing fields or add more.
The plugin features a simple drag and drop interface which means if you want to add any new fields, simply drag them over from the left. So, go ahead and make whatever changes you’d like to the form.
Step 3: Click on the form title, Hestia to change it and modify other form settings. You can add a form description and custom CSS Classes.
Step 4: In the settings menu, click on Notifications, and here you’ll be able to add whatever email address you want the form to send messages. You can also specify a subject for the email, who to reply to, and what fields from the form the email fetches.
By default, the form uses your site’s admin email as the recipient for the form. The Reply-to email is set to the email given by the person who filled the form and the message contains all the fields from the form itself.
Step 5: As an added touch, you can also go to the Confirmation section and set up a default reply email.
Step 6: Click on the Save button on the top-right to save your form.
Step 7: Now back over on your website, head to the page you want to add this form. We suggest you make a separate Contact Us page, although you can add this form anywhere on your site.
Also read: How to create and embed Google Form in Gmail, WordPress and a website?
Adding a Contact Form to your WordPress website
If you’re editing your pages using a third-party editor such as Elementor or WP Bakery, simply open your page and add the WPForms element to the page.
Below we’ve used the the block editor to add the form. There are two ways you can do this.
- Using the WPForms widget
- Using the Shortcode block.
Adding contact form using the forms widget block
We recommend you add forms this way as it gives you more control over the way your form is displayed by allowing you to show/hide the form name and description.
Step 1: Click on the Plus icon to add a block and look for WPForms under Widgets. If you’re using a different form plugin, you’ll find its block under the Widgets section too.
Step 2: Select the form you want to display.
Step 3: Your form will show up inside the editor.
If you’re not using the Block text editor on WordPress, you’ll find the Add Form option at the top of the Classic editor.
Using the Shortcode widget
Each form that you make gets a form ID allotted to itself. You can use this form ID in the Shortcode widget to show your form.
Step 1: Head back over to your Forms plugin page using the option on the sidebar to the left and make note of the shortcode for the form you want to use.
Step 2: Go back to your form’s page. Click on the Plus icon to add a new block and look for Shortcode under Widgets
Step 3: Enter the shortcode for your form and then click the Update button in the top-right followed by the Preview button to check out your form.
Your form will show up on the page.
And that’s how you can add contact forms to your WordPress pages.
Also read: Top 7 notification plugins for WordPress