How to Add a Contact Form to WordPress with Contact Form 7 and Total

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.

Vishnu
Post Author: Vishnu

Vishnu is a freelance writer by night, works as a data analyst by day.

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. MakeOnlineShop says:
    Most of the people having jetpack enabled, I do not think that it is a smart idea to add a plugin specifically to create contact forms. More plugins = slower website.
    • Kyla
      Actually that's a misconception. 10 well coded plugins will be much better than 2 plugins that conflict, or even 1 plugin that's coded like junk. In my experience hosting is the real culprit of a slow loading time. If you invest in a quality webhost you shouldn't have any issues with page speeds due to plugins.
      Admin
  2. MakeOnlineShop says:
    Thank you for your reply, but I do not totally agree. Coming from Drupal, of course on dedicated servers, I have never experiences anything as slow as Wordpress. And even if it can be true that 10 well coded plugins can be better than 2 coded with feet, 10 well coded plugins still expose you to more problems that can happen anytime later during updates and other maintenance. So I still think that adding always more plugins is far to be the correct solution, especially for beginners who should use the minimum plugins possible. But of course it is not said anywhere and even experts like you are hardly clear about this point.
    • Kyla
      If you are using a dedicated server for your WordPress website and your site is slow it's likely something didn't get setup properly. We highly recommend managed hosting - it's extremely difficult to be a server expert, a web designer and a content creator all at once and with managed hosting you can spend more time on your website.

      I hold firm that well coded and well supported plugins shouldn't give you many issues. We use about 10 plugins right now and we're all good here :-) We're just selective about which we use. I do agree that more plugins can mean a bit more testing before updating, but you should always test your theme and plugin updates on your localhost or staging site before pushing them to your live site (so really it's not that much more work to be sure your plugins are still playing nice).

      As for beginners, this really shouldn't be much of a factor in whether or not you use a plugin. Beginners and experts all use plugins to add functionality, and no matter your experience level I would always recommend choosing a good theme first. Some features may come built-in and plugins can always be added on later.

      Lastly I totally understand that it can be confusing, but we always do our best at WPExplorer to be clear when we write articles. Of course it's up to you (our readers) to do further research before you make a decision on what to do with your website, but we're always happy to share our experiences and opinions with you :-)
      Admin

Leave a Reply