Events - Submits a Form

Create the Event

You can track whether people are filling out your lead gen forms, newsletter signups, and contact forms. Not only will you know that they filled out a form, but you can refer to the information they entered into these forms. (The form inputs can be saved as Kissmetrics properties.)

This works for form and email services like:

  • Contact Form 7
  • AWeber
  • Mailchimp
  • ConstantContact
  • Any other HTML <form>

Just like click events, we’re going to grab the ID or a Class name of the <form> we want to track. You’ll go to your site, click view source (or inspect element in Chrome) and look for the id or CSS name in the form code. Copy and Paste it into the Tracking Rule, name the event so you can keep track of it easily, and you’re done.

Example

Let’s look at a very basic form that asks for two things, first name and last name.

<form id="km_form">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit"> 
</form>

This is what the above code looks like in your browser, below:






Setting Up Form Tracking

Notice the id in the first line, <form id="km_form">. That’s the form’s ID, and we’ll enter that as the CSS Selector in our Tracking Rule:

317

When you save changes here, we’ll wait to trigger an event for people who submit the form. So for the above example, when someone submits the form, you’ll see that…

Person X did event "Submitted Example Form" and got properties:
"Firstname" = (whatever they entered in the *Firstname* field)
"Lastname" = (whatever they entered in the *Lastname* field)

How do we know to call the new Kissmetrics properties “Firstname” and “Lastname”? We use the name attributes of the form’s <input>’s. See if you can identify them in the code example above.

This means that if your form fields do not carry descriptive names, they will not pull through in a usable manner. For example, if the field that captures first names in the form is coded as "input134", then all the first names will pull into Kissmetrics under a property called "Input134", instead of "Firstname".

The easiest solution to this is to rename that field to something more descriptive. An alternative option is to select that property in the Event Manager, and change the display name to something that makes sense to you.

Technical Notes

  • The “Submits the Form” event type in the Event Manager is equivalent to the JavaScript Library command trackSubmit. You can use one or the other.
  • Our Event Manager has trouble interacting with some <form>’s. These forms will be better tracked by using JavaScript Library calls:
  • use jQuery to customize a form’s submit() function. Submitting via jQuery bypasses the default Kissmetrics event listener.
  • use Ajax to Tracking Dynamically-Loaded Elements into the page after the page has loaded (document.ready()).
  • Currently, the Event Manager takes only a single HTML ID or a single class name. If you’d like to use the full range of nested CSS selectors, please use JavaScript Library calls to set up these types of events.