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

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:

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.

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.

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

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.

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

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.

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

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

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

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

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.

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

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.

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

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,

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.

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

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.

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

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

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

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.

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

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.

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.