Menu Close

How to Add a Contact Form to WordPress


One of the benefits of having a website is that you can always be reachable to the audience you’re trying to connect with. And nothing quite does the trick like adding a Contact Form or Contact Page to your website. A contact form is one of the most effective Call To Action options on a website and a great way to get visitors to reach out to you. To put it quite simply, it’s an ideal communication tool that adds efficiency to your website.

Often, a contact form appears on many websites on the Contact Page in a generic format. But it can also be customized to keep in style with your website. You can also position it below a blog post, or at the bottom of special landing pages to persuade visitors to take a specific action.

Contact forms have always been huge online. Lets find out why:

  • Contact forms offer 24×7 access: A contact form offers quick, convenient and 24/7 access to any visitor.
  • Contact forms offer better user experience: Overall customer experience is enhanced with a contact form. You can enable a customer to reach out to you from anywhere on the website. Moreover, a contact form can sync with the visitor’s browser. Autofill options can then take away the boredom of filling out the form. If, however, you happen to use an email link instead of a contact form, the customer’s attention will simply move to another window to set up a default email.
  • Contact forms keep records of all entries and makes handling data easier: 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.
  • Contact forms help you grow your subscriber list: The data in a contact form can be gathered, collated and analysed 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.
  • Contact forms can send auto responses and improve workflow: Set up the forms so that automated responses are sent out to team members or to 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.
  • Contact forms can be used to incentivize users to respond: You can offer incentives to visitors to use the contact form. This is one way of increasing user engagement and improving data collection.
  • Contact forms can help with branding your website: 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 the awareness of your brand and to increase the visibility of your website online.
  • Contact forms are generally more secure: Contact forms are a more secure and reliable way to collect information about your customers.
  • Contact forms protect your email from overload and spam: A contact form on your website automatically cuts down on the number of mails 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.
  • Contact forms help to filter unwanted contacts: By requesting for 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.
  • Contact forms are useful for other purposes too: 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

For many reasons, themes do not generally come with built-in contact forms. They usually bundle 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 separate 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.

Create a New Page

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.

Total Theme: Add Element

Next select the Form Shortcode module.

Total Theme: Form Shortcode Module

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

Total Theme: Insert Form

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 dave your form module and then click the blue button in the top right of screen to Publish your page.

Total Theme: Form Options

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.

Total Theme: Form Button Color

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.

View Source
Posted in WordPress