Browse By

How To Use Contact Form 7: The Ultimate Guide

Contact form 7 is a popular WordPress plugin that is easy to install and use. Whether you have a WordPress website or a blog, a contact form is a useful tool to generate leads or increase woocommerce sales.

Instead of asking your readers to reach you via your email, you can add a contact page on your site which can be used to contact you directly. You can also connect contact form 7 with Google Analytics to track leads.

With contact form 7 you can create and manage many different contact forms on your website or blog. The good thing about the free plugin is that it can easily be customized using simple markup.

In addition, submissions via the contact form come directly to the mailbox and it utilizes spam filter called Akisem. In this article, we are going to look at how use contact form 7 in your WordPress website or blog.

Installation – How to install contact form 7

To install contact form 7 on your website, follow these steps:

Step #1

The first thing you should do is to login to your dashboard on WordPress through the /wp-admin/ link. Alternatively, if you have a link on your site, just click that and login.

Wordpress Login PageStep #2

From your WordPress dashboard, go to Plugins and then click Add New. In the search box, enter the words ‘Contact Form 7’.

Contact Form 7 WordPress | Nicebrains.comStep #3

From the search results, click on the button ‘Install’ followed by ‘Activate’. Once the plugin is activated, you can begin using it to create and style your contact forms. I have written a quick article on how to style your contact form for any theme. Get the template here.

Creating and styling forms – How to create a new form, style the form and insert it into a page

Wordpress | Contact Form 7 | Navigation Menu DashboardInstalling the plugin is one thing and styling your forms is another. When you install contact form 7, it usually looks very plain and to some extent boring.

To make your contact form stand out from the boring ones, you can style it up using CSS available in your WordPress theme.

After you successfully install and activate contact form 7, a new menu item called ‘Contact’ will appear on your WordPress dashboard.

When you click on Contact, it will take you to the main screen where you can see a default contact form that comes with every new install. This form is dubbed ‘Contact form 1’.

From the main screen, you will find the shortcode that you need to install on a web page which looks something like [contact-form-7$ id=”1223″ title=”Test Contact Form”].

Create a New Contact Form

Click on the ‘Add New‘ button. After doing that, you may see a new page which asks you to select a language. After choosing your language, you will be taken to a new contact form editor.

The contact form will have basic fields like the email, name, message, subject and submit button. In the contact form editor, you can type in the form title.

If you want to add more fields on the contact form, simply click on the button form field. A pop up box will appear where you can click on the fields.

Once you have created a new field, click on ‘Insert Tag‘ to include this new field into your form. You can also include a reCAPTCHA field in your contact form.

Once you are done, click on the save button. You can style the contact form by using CSS. If you know a bit of CSS you can select the contact form elements using the .wpcf7 class.

Lead tracking – How to track all leads that come through the form in Google Analytics and with WordPress plugins

If you are using contact form 7, it is always important to know where your leads are coming from. That is where Google Analytics comes in handy.

To achieve this, you will need to install the Universal Google Analytics script on your website. I have written an article on how you can effectively track all your contact form 7 leads using Google Analytics goals and 7 DOM events here.

Contact Form 7 Template

Leave a Reply

Your email address will not be published. Required fields are marked *