Posts

Changes to Tracking Contact Form 7 Submissions

With over 3 million downloads and counting, Contact Form 7 is one of the most popular tools 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.

Panera Bread - Order Catering Online

Finding The Best eCommerce Solution for Your Catering Business

WooCommerce POS - Point of Sale IntegrationIf you’re looking to bring your catering business online, and provide ordering through your website, there are many options to consider for the best solution. 3PRIME recently started working with two local caterers to help them offer their food and platters to customers. We researched the latest technologies and came across popular platforms such as WooCommerce, Magento, Shopify, and BigCommerce. Read more

An Interview with Wordfence Senior Analyst Collette Chamberlain

Collette Chamberlain is one of two security analysts employed at Workfence. She is a Certified Ethical Hacker (CEH) and a computer Hacking Forensic Investigator (CHFI). She carries out forensic investigation with the cleaning team to safely recover data in a timely manner. She doesn’t consider herself an “expert” because she feels there is always something to learn in WordPress Security.

 

Biggest Trends With Infecting Websites

One of the biggest trends in affecting websites is ransomware. There will be a code put into unsuspecting sites by the attackers, and this will redirect them to a non-secure site. These malicious sites have payloads that are downloaded on any sites on their computer that are outdated. People are then forced to pay money as a ransom to get their data back.  If they had backed up their information, this would likely not have happened.

 

Suggestions:

Have a good host, keep your site and programs up to date, install a security site like Wordfence and back up your hosting and FTP/SSH accounts. Another way to be aware of these attackers is to review your logs to look for threats.

 

Why Are These Attacks Happening?

Even though there are many advances with security software, hackers can still get through. There’s a common misconception that once you have the software you are secure – and that is the farthest from the truth. Colleen explains, “It’s not a matter of “if” I will be hacked, it’s a matter of “when”. “ When purchasing a Wordfence software, you must ask if the cost of a hacked site further exceeds the cost of Wordfence software. Attacks will still happen, after one is stopped and every day there are new ways hackers get to critical information. The only way to be completely safe from these hackers is to not go online at all.

 

 

Read the Full Interview Here

 

Contact Form 7: A WordPress Plugin

Click images for a larger view.

First Form

One of my favorite WordPress plugins is Contact Form 7.  When using it to make forms for clients, there are two important issues to tackle. The first issue is to make sure the form is works properly. This includes ensuring that the form looks presentable on screens of all sizes:

plbnew

On a widescreen monitor (cropped)

On an iPhone

On an iPhone

It is also important to make sure that the form validates data so the form only sends when the required information is entered properly (especially information like email addresses and phone numbers):

The form will not send because the email was not entered properly.

The form will not send because the email was not entered properly.

The second issue is to make sure that the contact form sends an email that is concise and easily recognized by the client. Knowing HTML isn’t required but it sure is useful. The email that clearly shows the client exactly who is applying for a job (Homer Simpson, in this case), both as the sender and in the email. The applicant’s information is clearly listed and their cover letter and resume are conveniently attached:

emailnew

This is the code for the contact form itself:

formcode

The asterisks within the brackets indicate that the field is mandatory.

This is the code for the email:

emailcodenew

Second Form

I wanted to use the lessons from the first form to make the second form more sophisticated. Here’s a picture of the form as a whole:

wholeform2

Place Holders:

For the phone number field, I wanted to make sure that the applicant used only one type of format. I didn’t want them to use parentheses, hyphens, or periods. I didn’t want to take up space by placing text saying “No periods, hyphens, or parentheses” on the top, bottom, or sides of the field. I used the placeholder feature to show that text within the field itself:

numbers

I also did the same thing with the address section, to clarify the exact information I wanted entered in the fields:

address

Maxlenghts & Minlengths:

I was getting annoyed that the telephone fields would still send if I entered both more or less than 10 digits. I wanted the number of digits to be exactly 10.

Sample Telephone Code:

I first used the maxlength feature (in bold) to make sure that no more than 10 digits could be entered:

[tel Telephone /10]

This solved one problem. But the next problem was that I could enter 9 digits and the form would still submit. Contact Form 7 had no way to solve this. So I did a little Googling and found a plugin called Contact Form 7 minlength extension. This creates a minlength field in Contact Form 7 (highlighted in red):

minlen

This gives us the following code (minlength in bold) which ensures that, in order for the form to be submitted,  there must be a maximum and minimum of 10 digits in the telephone field:

[tel Telephone /10 minlength:10]

I did the same exact techniques for the ZIP code field to make ensure a maximum and minimum of 5 digits in order for the form to be sent.

The form won’t send because there are less than 10 digits in the field.

The form won’t send because there are less than 10 digits in the field.

Drop-Down Menu:

For the address portion of the form, I wanted the applicant to choose from a list of states. I chose the drop-down menu feature. I then pasted a list of state abbreviations (as well as DC) and came out with the following code:

<p>*State: [select* State “AL” “AK” “AZ” “AR” “CA” “CO” “CT” “DC” “DE” “FL” “GA” “HI” “ID” “IL” “IN” “IA” “KS” “KY” “LA” “ME” “MD” “MA” “MI” “MN” “MS” “MO” “MT” “NE” “NV” “NH” “NJ” “NM” “NY” “NC” “ND” “OH” “OK” “OR” “PA” “RI” “SC” “SD” “TN” “TX” “UT” “VT” “VA” “WA” “WV” “WI” “WY”]</p>

This is what the drop-down menu looks like in action:

states2

Email:

For the email, I wanted to be a little more creative and use some inline CSS to make the email a little more visually appealing, but still keeping everything neat, concise, and minimalist. I chose a color scheme based on the client’s logo:

emailnew

I also wanted to keep the applicant’s name in the subject line so the client can see who is sending the application. If it’s someone they don’t care for, they don’t even have open the email.

I would’ve liked to do more CSS tricks but the form was so limited that it felt rather unnecessary. This is the code for the email:

<h1 style=”text-decoration: underline;color:#005500″>Applicant’s Name: [FirstName] [LastName]</h1>

<h3 style=”color:#e51937″>Basic Information</h3>

<ul>

<li><strong>Email Address:</strong> [Email]</li>
<li><strong>Phone Number:</strong> [PhoneNumber]</li>
<li><strong>Alternate Number:</strong> [AlernateNo]</li>
</ul>
<hr>

<h3 style=”color:#e51937″>Address</h3>

<ul>
<li><strong>Address Line 1:</strong> [AddressLine1]</li>
<li><strong>Address Line 2:</strong> [AddressLine2]</li>
<li><strong>City, State, ZIP Code:</strong> [City], [State] [ZIP]</li>
</ul>
<hr>
<h3 style=”color:#e51937″>Personal Information</h3>
<ul>
<li><strong>18 or Over:</strong> [Age]</li>
<li><strong>Hours Wanted:</strong> [Hours]</li>
</ul>
<hr>
<h3 style=”color:#e51937″>Statement</h3>
<p>[statement]</p>

Portfolio Items