User data from forms

You can pick user attributes from a form that is submitted and send the information to Blueshift as an event.

The following example shows the HTML snippet for a basic unsubscribe form and creates an "identify" event to update the "unsubscribed" attribute of a user. You can reuse this script to collect any form attribute and to create any kind of event.

How to use this snippet

1. Replace EVENT_API_KEY with your event api key. Skip this step if blueshift.js is already loaded.
2. Select your form via a CSS selector. For example, $("#bsftForm").
3. Update the keyMapping to map the names of your form inputs you want to capture with the corresponding attribute in Blueshift.

Mapping Attributes

Problem: Sometimes the same piece of data is called different names in different systems.

Example: The form below has an input named "does_not_accept_offers", which is represented as "unsubscribed" in Blueshift.

Solution: To solve this discrepancy, the script used keyMapping to translate "does_not_accept_offers" into "unsubscribed" when the event is created.

Note: Even though "email" is called "email" in both systems, it is included in the keyMapping as well to indicate that it is an attribute that is also to be sent to Blueshift. The form tracking script only pays attention to attributes that are in the keyMapping.

var keyMapping = {
  'email': 'email',
  'does_not_accept_offers': 'unsubscribed',
}

Example

Here is a sample unsubscribe.html file.

<form action="" method="post" id="bsftForm">
  <label for="email">
    Email:
    <input type="email" name="email">
  </label>
  <br><br>
  <label for="does_not_accept_offers">
    Unsubscribe:
    <select name="does_not_accept_offers" id="">
      <option value="true">Remove me from future emails</option>
      <option value="false">Keep sending me emails</option>
    </select>
  </label>
  <br><br>
  <input type="submit" value="Submit">
</form>

<script>
  // get blueshift
  window._blueshiftid='EVENT_API_KEY';window.blueshift=window.blueshift||[];if(blueshift.constructor===Array){blueshift.load=function(){var d=function(a){return function(){blueshift.push([a].concat(Array.prototype.slice.call(arguments,0)))}},e=["identify","track","click","pageload","capture","retarget"];for(var f=0;f<e.length;f++)blueshift[e[f]]=d(e[f])};}
  blueshift.load();blueshift.retarget();blueshift.pageload();
  if(blueshift.constructor===Array){(function(){var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.getblueshift.com/blueshift.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);})()}
  // get jQuery
  if (typeof jQuery == 'undefined') {
    function getJquery(success) {
      var script = document.createElement('script');
      script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
      var head = document.getElementsByTagName('head')[0],
      done = false;
      script.onload = script.onreadystatechange = function() {
        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
          done = true;
          success();
          script.onload = script.onreadystatechange = null;
          head.removeChild(script);
        };
      };
      head.appendChild(script);
    };
    getJquery(trackForm);
  } else {
    trackForm();
  };
  // track form submit
  var submitForm = false
  function trackForm() {
    var keyMapping = {
      'email': 'email',
      'does_not_accept_offers': 'unsubscribed',
    }
    $("#bsftForm").submit( function(event) {
      var formData = $(this).serializeArray();
      var params = {};
      $(formData).each( function(index,input) {
        if (keyMapping[input.name] && ( input.value || input.value === false )) {
          params[keyMapping[input.name]] = input.value
        }
      });
      if (params.email) {
        blueshift.identify(params)
      };
      if ( $(this).attr('target') === "_blank" ) {
        submitForm = true
      } else {
        setTimeout(function() {
          submitForm = true
          $(event.currentTarget).submit();
        }, 100);
      }
      return submitForm
    });
  }
</script>