Adding Contact Form to WordPress: A Guide

Why You Should Add a Contact Form to Your Website

Having a website is an excellent way to connect with your audience, and adding a contact form or page can make it even easier for visitors to reach out to you. A contact form is a highly effective call-to-action option that can persuade visitors to take a specific action. It’s also an ideal communication tool that adds efficiency to your website.

While many websites have a generic contact form on their contact page, you can customize it to match your website’s style. You can also position it below a blog post or at the bottom of special landing pages to encourage visitors to take action.

Contact forms have always been popular online, and for good reason. Here are some of the benefits of using a contact form:

24/7 Access: A contact form offers quick, convenient, and 24/7 access to any visitor.

Better User Experience: A contact form enhances the overall customer experience by enabling customers to reach out to you from anywhere on your website. Autofill options can also make filling out the form less tedious. If you use an email link instead of a contact form, the customer’s attention may shift to another window to set up a default email.

Records Keeping: The contact form is a valuable source of important data. By setting out the specific information you want in the fields in the contact form, you can collect the exact information that you need. All the information is received by you in the exact same way. This makes it easy for you to organize the responses in a way that makes sense.

Subscriber List Growth: The data in a contact form can be gathered, collated, and analyzed to improve marketing and generate leads. The forms can be designed to collect data automatically and integrated with Google Analytics to make sense out of it. A simple checkbox inviting the reader to “Subscribe to our newsletter” can grow your email list without being intrusive.

Auto Responses: Set up the forms so that automated responses are sent out to team members or customers. Design spreadsheets and export the data gathered to these sheets for further use. You’ll see an improvement in the overall workflow at the backend of your WordPress. Moreover, you can integrate the form with services like Trello, Salesforce to improve workflow.

Incentivize Users: You can offer incentives to visitors to use the contact form, which is one way of increasing user engagement and improving data collection.

Branding: Contact forms need not always appear generic and boring. It’s also possible to style the forms to be in tune with your brand or the style of your website. It can serve to raise awareness of your brand and increase the visibility of your website online.

Security: Contact forms are a more secure and reliable way to collect information about your customers.

Spam Protection: A contact form on your website automatically cuts down on the number of emails hitting your inbox. At the same time, you can use spam filters on the forms to reduce spam responses in the forms. Not only that, contact forms are handled at the server end, where your email address is not readily available.

Filtering Unwanted Contacts: By requesting some information (phone number or address) about the person on the contact form, you can keep out unwanted contacts and ensure that only truly interested readers are able to contact you. However, this can also keep out genuine users, so use this option prudently.

Other Purposes: You can get a contact form to do double duty like accept donations, make reservations, and more. You can also use contact forms to gather feedback from visitors or encourage them to ask for details or make inquiries about your products.

How to Add a Contact Form to Your Website

While many themes do not come with built-in contact forms, you can install a plugin that handles this functionality. In this post, we’ll proceed through the steps of installing Contact Form 7 on a WordPress website using the Total theme.

Total recommends two plugins for adding a contact form: Contact Form 7, which is free, and Gravity Forms, if your preference is for a premium plugin. You can choose any of the two options and add forms anywhere on your site.

Adding a Contact Page using Contact Form 7 and Total Theme

When you install the Total theme, Contact Form 7 is recommended to be installed as well. If you do not install and activate Contact Form 7 when importing a sample demo, you’ll need to remember to activate it separately to use it on your website.

Once you activate the Contact Form 7 plugin, you’ll see a new menu item “Contact” on your Dashboard. There should be a sample contact form to help get you started. Click to open the Contact Form and edit the form contents to suit your requirement. When you’re done with editing, save your form then copy the shortcode to use later.

See the option Additional Settings in the Editor? Using this option, you can include additional settings to each contact form. You’ll need to add code snippets in the specific format into appropriate fields in the contact form’s edit screen.

Next, from your Dashboard open a New Page. Title the page as you wish, I’ve titled my page “Contact Page”. Save your page as a draft then click on the Visual Composer option you’re more comfortable with. We’ll be using the Frontend Editor but you can use the same steps in the backend if you prefer.

This will open up the live front-end drag and drop editor Total is based on. In insert your contact form simply click on the blue button to + Add Element.

Next select the Form Shortcode module.

Then paste in the form shortcode you copied earlier into the first box. Save to insert your form on the page.

Now you can use the built-in form options Total has included to customize your for animation, style, widths and font sizing. When you’re done save your form module and then click the blue button in the top right of screen to Publish your page.

There are additional options in the live theme Customizer which you can access through your WordPress dashboard. Navigate to Appearance > Customize > General Theme Options > Links & Buttons to edit your Theme Button styling which is used on your contact form.

With other themes that do not include a form module, you can simply paste the shortcode into the WordPress text editor or into a text box module.

Adding a Contact Form to Widgets in the Sidebar

Instead of a full Contact Page (or perhaps in addition to it), you can also add a Contact Form widget to the Sidebar of all or some of the pages or posts. You can also add it to the footer or any area on the website that can carry a widget. This will help users to reach out to you from wherever they are on the website.

Total uses native WordPress functions. So, being familiar with the way the Customizer looks and works puts you at an advantage. The Customizer Manager is enabled by default. It adds a new admin page at Theme Panel > Customizer Manager, where you can enable/disable sections from the WordPress Customizer. You can learn more about this feature here.

But to get on with our task of adding a Contact Widget, you need to navigate to Appearance > Customize.

A set of options will appear, click on Widgets > Main Sidebar.

The Widget Areas theme option is enabled by default. This gives you the ability to create custom widget areas on your site. If you are only going to use the built-in sidebars/widget areas, then you can disable this function. You can learn more about adding custom widgetized areas here.

Another panel opens on the Customizer containing all the widget options. Select Text Widget, and it will automatically be added to the existing Main Sidebar Widgets. Simply click then drag and drop to reorder the widgets and alter their position in the sidebar.

Open the Text widget, add a title to the widget, and then paste the shortcode that you copied while creating your Contact Page.

Now you can click on Done > Save & Publish.

And you’ll now have a basic and functional Contact Form on your sidebar (Total also has a nifty Business Info widget you can add for your address, contact numbers, and email). This is how my Contact Form in the sidebar appears to my readers at the frontend.

Changing the Style/Format of Your Contact Form

Total supports all Contact Form 7 fields, including checkboxes, radio buttons, drop downs, reCaptcha, hidden fields, placeholder text, and more. This means it’s possible for you to adjust the settings for your forms, send out automated responses, add a subject title, and much more. Have a look at the Contact Form 7 docs to learn more about the plugin and the awesome features it includes.

To Conclude

Adding a contact form to your website is easy, does not cost much, and improves efficiency and workflow. There’s really no reason why you should not adopt this simple method to increase user experience while gaining important leads at the same time.

Stay in Touch


Related Articles