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

Replace EVENT_API_KEY with your event api key. Skip this step if blueshift.js is already loaded.
Select your form via a CSS selector. For example, $("#bsftForm").
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.

keyMapping notes

Even though email is named the same in both systems, you must still include it in the keyMapping.
The form tracking script only processes attributes that are explicitly listed in keyMapping.

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>

User Data from Forms

How to use this snippet

Mapping attributes

Mapping subscription groups

Example