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

Sometimes a form field has a different name than what Blueshift expects. For example, the form might use does_not_accept_offers, which should map to the unsubscribed field in Blueshift. Use keyMapping to map form field names to Blueshift attribute names.

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

Mapping subscription groups

Subscription group preferences must follow a specific format so Blueshift can process them correctly.

In the form below, each group input uses a name like subscription_group[newsletter] or subscription_group[promotions].

When submitted, these inputs are gathered into a subscription_groups array in the identify event. Each entry has an id (group name) and a subscribed value.

params = {
  ...
  subscription_groups: [
    { id: 'holiday_sale', subscribed: true },
    { id: 'newsletter', subscribed: false }
  ]
}

For more information on subscription groups, refer to the subscription groups documentation.

Example

The following is a sample unsubscribe.html file that captures both unsubscribe status and subscription group preferences.

<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">
      <option value="true">Remove me from future emails</option>
      <option value="false">Keep sending me emails</option>
    </select>
  </label>
  <br><br>

  <fieldset>
    <legend>Subscription Groups</legend>
    <label>
      <input type="checkbox" name="subscription_group[newsletter]" value="true">
      Newsletter
    </label>
    <label>
      <input type="checkbox" name="subscription_group[promotions]" value="true">
      Promotions
    </label>
    <label>
      <input type="checkbox" name="subscription_group[holiday_sale]" value="true">
      Holiday Sale
    </label>
  </fieldset>
  <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=(document.location.protocol==="https:"?"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
        }
      });

      var groupsArray = [];
      $('input[name^="subscription_group["]').each(function() {
        var match = this.name.match(/^subscription_group\[(.+)\]$/);
        if (!match) return;

        groupsArray.push({
          id: match[1],
          subscribed: this.checked
        });
      });
      params.subscription_groups = groupsArray;

      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>