Changes to Tracking Contact Form 7 Submissions

With over 3 million downloads and counting, Contact Form 7 is one of the most popular solutions other than a data collection app for creating a variety of forms on the WordPress platform. When using Contact Form 7 it’s easy to see why this plug-in has become a favorite of developers and website owners. The ease of use, flexibility, breadth of options, customization yet simplicity all combine to make up one of the most comprehensive and widely used plug-ins to date.

One of the great things about Contact Form 7 has always been the easy and effective way of tracking form completions through either a redirection to a “thank you” page or once the form is submitted or just redirecting users to a new page to encourage further action. For anyone familiar with the way that Contact Form 7 works these two settings for assigning Javascript may look very familiar:

  • on_sent_ok
  • on_submit

However, these settings are in the process of being phased out completely by the end of 2017. One of the only ways to track form submissions going forward will be to use event tracking. Luckily this is relatively simple, especially for Google Analytics users, to implement. In fact, by putting an event tracker similar to the one we suggest below, you can track form completions in much the same way as always but with even more accuracy.

The 3PRIME Solution
When adding event tracking to contact forms, there are a few checks that need to be made beforehand. The very first thing is to check to see if Google Analytics code exists in the header of your page. Without this, nothing else will work as intended. Once that is confirmed, we can get into the scripting/functionality.

We will need either to add a script to the page/template or we can find a dedicated javascript file to handle the work, which I would recommend. A common file such as a main.js or default.js, something that already exists on the page as a source. If there is no js file on the page then we would need to create one and link it, or we can go with the alternate method of just adding script to the page/footer.

Wherever you put your script, make sure there is a way to detect on click events. One common way is with jquery which exists on many sites and in many forms. If jquery is not on the site then we can either have the site start referencing jquery or make a more basic reference for a click event. Then check to see if any “document ready” code is in the js file. If not, you will need to state that this will happen when the document is ready to ensure that the script is not loaded before the form is.

Now in the template/page that has the form, find the submit button and add a class to it in the class field. it can be any name you want that fits the guidelines of a class name but for this example we will call it “contactEmail”. Once a class is set we can start referencing it in our script on document ready. IDs also work but classes are more consistent and user-friendly when used on the same or even multiple pages.

In the script we just have to make sure that the class is targeted correctly now. We can do this through testing. A common method is by using console.log for javascript to print a message to the inspector console when an event occurs. Add an “onclick” event handling function behind the “contactEmail” button class being clicked and simply put console.log(“ok”) inside it. If you click your button now, then the console should print out “ok.” If this isn’t working as intended then you will need to reevaluate your javascript/class/function as any of those could be the issue.

Once an onclick function is set and confirmed as working, simply add the google analytics event handling code inside the onclick function. A basic analytics function works like so:

  • ga(‘send’, ‘event’, { eventCategory: “”, eventAction: ‘click’, eventLabel: ””});

We are now sending a new event to Analytics to record, giving it a category, action, and label. These are important as they help discern and differentiate every action you wish to record in analytics. More details on how the code works can be found here. Putting it all together, we will get a function like this inside of our “main.js” file that is included on our site and on our contact form page.

EXAMPLE USING JQUERY
$(‘#contactEmail’).click(function (){
ga(‘send’, ‘event’, { eventCategory: ’emailclick’, eventAction: ‘click’, eventLabel: ’emailContactPage’});
});

When you click on the submit button with the “contactEmail” class at any point in time when on the page, an event should be tracked and recorded on your analytics dashboard, under the category “emailclick” and labeled as “emailContactPage”. Remember to test extensively and clear caching if your code is not saving/updating properly!

For more information and other form tracking solutions straight from Contact Form 7’s developer click here.

Designing the perfect website for your business

Designing the perfect website can be a challenge, your business needs a good site that can draw in your customers and help them to spend money. However, along with all the good sites, there are also some bad ones. A bad site can be almost as bad as not having a site at all, so you want some tips to make your page stand out in a good way.

These ideas should help you to develop an engaging and inspiring website that will be attractive to your viewers.

What do you need?

As a start, you need to write down what you want from your website. Look at your business and think about how your site will fit into it. Different requirements will be needed for different business types, for example, a restaurant’s site will be very different to that for a landscape gardening business, so look at the different elements. You also want to think about what pages you need, and what would benefit the customer. Try to put yourself in your customers’ shoes and think about what they would want to see.

You also want to think about what pages you need, and what would benefit the customer. Try to put yourself in your customers’ shoes and think about what they would want to see.

Design your site

When you have created a plan for your website, it is a good idea to draw out the design on paper first. You can draw each page with the content you want and a rough idea about pictures and buttons. This will help you to visualize the site and may lead you to change your plan when you try to fit it all in.

The thing to remember is that there is no need to make your page overly cluttered. You want your customers to be able to find their way around without getting lost.

Laying out the contents

Now is the time that you should start piecing together the elements of your site to see how they look. If you are doing the site yourself, then you need to use a good web design software. Dreamweaver has been a favorite for many years, but if you are not confident at coding, there are many sites such as Wix and WordPress that can help you.

If you don’t have the time to devote to designing the site yourself, you can enlist the help of a web designer. They can use your plans and drawings to create the site you want.

Security

Security needs to play a big part of your web design, especially if you are dealing with customer data. It is a good idea to add security measures to your site so that people cannot hack into it and steal your information.

It is also a good idea to have a backup plan in case the site in compromised, using a firm like Secure Data Recovery can help. They have a Secure Data Recovery Center to assist in restoring your data, whilst you may feel that your skills are adequate to find your data, you can easily do more harm than good.

These are a few of the things you can do to design and build a website that your customers will love. Remember though, that you must make it easy to update for you as well or it will eat your time.

June 14th Google Partner’s Livestream

The Google Partners event on June 14th was about finding ways to get your business online and how to optimize your web presence to reach more customers. Some of the important things we learned today were how mobile influences purchases, how consumer behavior is changing, and how to grow your business from there.

With the increase of mobile usage in the past few years, it is more and more important for your business to make use of digital platforms. Searches from mobile are more common than searches from desktop computers.  People are doing more local searches for services or products around them. In the last four years, a 34% increase in Google searches included the phrase “near me”. Mobile makes up 84% of ‘near me’ searches, and there is a strong purchase intent after a ‘near me’ search as 3 in 4 people who searched on mobile visited a business within 24 hours. This is why it is so important for a business to be up-to-date in the digital world, and be very mobile-friendly.

Consumer behavior has changed drastically over the past few years. People are reacting on a more immediate basis, consumer expectations are higher, and there is less brand loyalty involved in immediate purchases. Businesses are now forced to adapt to the in-the-moment decisions of consumers in order to keep up with the times. Years ago, purchases used to revolve around physical location and consumer knowledge was limited. Today people can go shopping and compare prices and features of products that aren’t in front of them but they may be interested in.

In order to grow your business, Google shows us how to win by taking business digital. In the past year, revenue growth was 4 times higher for business who used digital marketing. Online shopping is increasing 120% every year, so make sure your website is easy to access.  A couple of tips from Google’s presentation on how to grow your company included creating a free business listing on Google, creating a website that clearly states what your business offers and advertise through display ads, re-marketing, and use demographics to find new customers.

 

Missed the Livestream? Watch it below!