Troubleshoot Form Tracking

Form tracking helps you quickly capture information about leads, shorten response times, and generate more conversions for your business. Form tracking can sometimes be tricky to implement since there are multiple form helpers, builders, and plugins that submit forms differently.

Use this article to:

  • Troubleshoot common form submission errors based on the issue you’re experiencing

Getting Started

Most form submission issues will be readily apparent since you will either see no activity on your form submissions timeline, incomplete information on the forms submitted, or not receive notifications for your forms (if you’ve chosen to set up notifications).

First, make sure that form submission has been set up for the correct company in your account.

Read this help article to learn how to enable form tracking
.

Forms Not Submitting 

There are two common issues that will cause a form not to submit. Either there is an error in your dynamic number insertion installation or there's an error with the submit button on your form. 

Check that your company’s dynamic number insertion code snippet is installed on every page of your website where you’d like to capture forms.

Each company has a unique code snippet that must be installed on each page of your website that you’re capturing forms.

  1. To check for the swap script, navigate to the web page in question using a New Incognito Window in your Google Chrome browser.

    Screen_Shot_2018-06-08_at_1.09.37_PM.png

  2. Right click on the number on your web page and select Inspect.

    Screen_Shot_2018-06-08_at_1.11.10_PM.png

  3. This will bring up the developer tools window.

    Screen_Shot_2018-06-08_at_1.12.06_PM.png

  4. Next, search (CMD+F) for “swap.js” in the developer code. If the script is present, you’ll see something like this:

    <script type="text/javascript" src="//cdn.callrail.com/companies/555555555/ab555cd55e5fgh55ij5k/12/swap.js"></script>

  5. Make sure this code matches the code snippet on the Dynamic Number Insertion integration page for your company. Each company has their own unique code snippet.

    Screen_Shot_2018-06-08_at_1.15.48_PM.png

  6. If the swap script is not present, verify that you are looking at the correct URL. If you are looking at the right page and the script is not present, then install dynamic number insertion on that page to enable form submission.

    Read this article to learn how to install your company’s code snippet
    .

Check the code on the Submit button of your form.  

Dynamic number insertion looks for specific code on the submit button for form submission. First, there should be an <input type=”submit” …> when you inspect the submit button element. This input type will place an event called “submit” on the page that allows forms submissions.

  1. In your Google Chrome browser, right-click the form submit button on your form, and select Inspect.

    Screen_Shot_2018-06-08_at_1.18.20_PM.png

  2. Chrome’s developer tools will appear on your browser. Click the Event Listeners tab. This will show you a list of all the listeners on the page. If there is an event listener called “submit,” your form is set up correctly for CallRail. If there is not a submit event listener, then there is likely a problem associated with a missing <input type=”submit” …> attribute.

    Screen_Shot_2018-06-08_at_1.20.57_PM.png

Check if the swap script (or WP plugin) is correct

When you are using our WordPress plugin, it may be necessary to verify that the key used on your web page is the correct one for the company in CallRail. Navigate to your WordPress integration page and ensure that your Wordpress Plugin Key matches the one installed on your WordPress page.

Screen_Shot_2018-06-08_at_1.22.57_PM.png

Read this help article for more information on installing the WordPress plugin.

Missing Form Data

Occasionally, forms will submit with some of the form data missing. Our swap script looks for specific elements to determine if a field is something that we should capture. Additionally, there are fields that can be configured as “excluded” when setting up form tracking.

Check your form tracking settings for ignored fields.

The ignored fields section of your form tracking set up page will show a list of fields that a user has manually asked us to ignore. Check your company’s account to make sure that ignored fields aren’t listed for items you’d like to see on your CallRail form submissions dashboard.

Screen_Shot_2018-06-08_at_1.27.17_PM.png

Read this help article for more information on the form tracking set up.

Ensure there is a “name” attribute for each field.

CallRail’s form capture feature relies on certain HTML conventions to determine if a form field is something that we should capture. Specifically, we look for the “name” attribute of an element.

  1. Right-click the form field in question and select Inspect.

    Screen_Shot_2018-06-08_at_1.31.40_PM.png

  2. In your developer tools window, look for the “name” attribute of an element. You can see below that there is a name attribute that shows as name="FirstName". This field will populate as “FirstName” on your CallRail form submissions dashboard.

    <input class="field-element" name="FirstName" x-autocompletetype="surname" type="text">

    In the next example the "address" field is missing a name attribute.

    <input class="field-element text" type="text" id="text-yui_3_17-field">

    Adding something like `name="Address"` or similar will allow our system to capture and store these fields and display as “Address” in the form activity dashboard. 

Not Receiving Form Notifications

One feature that can be used with form submissions is notifications. CallRail offers email notifications, text notification, and call notifications for any form you receive. Additionally, we allow you to customize time of day restrictions on form submission alerts.

If you are not receiving text or email notifications:

  1. Click Settings on the top dashboard.

    Screen_Shot_2018-06-08_at_1.40.03_PM.png

  2. Navigate to Form Tracking under the Tools column.

    Screen_Shot_2018-06-08_at_1.40.43_PM.png

  3. Verify that a notification has been set up for the correct email. You can only add emails for users on your account. Read this help article for instructions on how to add users.  

    Screen_Shot_2018-06-08_at_1.41.26_PM.png

  4. Verify that a notification has been set up for the correct phone number.

    Screen_Shot_2018-06-08_at_1.42.24_PM.png

  5. Verify that the form was submitted during the notification window that has been configured in the form submissions page.

    Screen_Shot_2018-06-08_at_1.43.24_PM.png

Incomplete Phone Numbers

When a form is submitted that contains a customer’s phone number, we’ll call the number provided in the “Phone Call” alerts field to notify you that a form was submitted and ask if you would like to call the number in the form now. If you press 1, our system connects you to the number provided in the form.

There are two main cases where our system might not recognize a phone number in a form submission:

  1. If the phone number field on the form is broken into three fields (area code, prefix, suffix), we will not recognize that these fields go together to form a phone number. Ensure that your forms only use one field for the full phone number and be sure that it has a “name” attribute that is called “phone” such as `<input class=”element” name=”phone”>`.

  2. A valid phone number must be submitted on the form in order for the number/name (which comes from the caller's caller ID) to show up in CallRail and a phone call alert to occur. This is why some submissions come through as Name: Anonymous and Number: (Not Available).

Form Tracking Not Working with Unbounce

If you use Unbounce for A/B testing, there can sometimes be errors in form submission. Unbounce uses AJAX to submit forms instead of the standard submit input type which can affect the swap code.  Note: unfortunately, this workaround will not work for users submitting forms from a mobile phone. 

The best way to resolve this issue is to use the script below.

Copy and paste the code below into a plain text editor to remove any font formatting. Then, place this code inside of a javascript tag near the bottom of each web page with a form (before the </body> tag).

Here is the code: 

`function triggerFormEvent() {

 if (lp.jQuery('form').valid() == true) {

   CallTrk.captureForm("div.lp-pom-form form");

 }

}

$( '.lp-pom-form .lp-pom-button' ).click(function() {

 triggerFormEvent();

});

$('.lp-pom-form').keypress(function(event) {

 if (event.which == 13) {

   event.preventDefault();

   triggerFormEvent();

 }

});

$('.lp-pom-form form input[type=hidden]').attr('data-cr-no-capture', 'true');

$('.lp-pom-form form input[type=radio]').attr('data-cr-no-capture', 'true'); `

If you’re still experiencing issues, don’t hesitate to reach out to our support team.

Have more questions? Submit a request

Comments

Need additional help? Ask our Community!