How to Install in Unbounce

🚨

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Documentation

There are two options for when your code will run:

• 
  beforeFormSubmit: Called after validation has passed, but before the lead has been recorded. This could be useful to manipulate the form data before it’s submitted.


• 
  afterFormSubmit: Called after the lead has been recorded. This could be useful to make an API call or show some kind of additional ‘thank you’ message to the lead.

Asynchronous hooks are supported: your function can return a promise, or it can take a callback as its second argument and call it when an asynchronous action has completed. This allows you to delay the next part of form submission until an asynchronous action (e.g. a fetch or XHR request) has completed. However, this is not generally recommended, because slowing down the form submit process could cause you to lose leads.

The functions will be called with an object as the first argument, containing the following properties:

• 
  formElement: The form’s DOM element
  


• 
  isConversionGoal: A boolean representing whether form submission was enabled as a conversion goal

Note: if you register multiple beforeFormSubmit and/or afterFormSubmit hooks, they will be called in parallel.

Examples

Here are some examples. You can use these as starting points to write your own hooks.

Example 1: update a form field value (trim spaces) before submit

<script>

  window.ub.hooks.beforeFormSubmit.push(function(args) {

    var input = args.formElement.querySelector('input#name');

    input.value = input.value.trim();

  });

</script>

Example 2: show a message after submit

<script>

  window.ub.hooks.afterFormSubmit.push(function() {

    alert('Thank you!');

  });

</script>

Example 3: asynchronously update a form field value from an external API before submit

Note: this example uses fetch which is not supported in Internet Explorer

<script>

  window.ub.hooks.beforeFormSubmit.push(function(args) {

    return fetch('https://reqres.in/api/users')

      .then(function(response) {

        return response.json();

      })

      .then(function(body) {

        return body.datat0].first_name + ' ' + body.data 0].last_name;

      })

      .catch(function() {

        return 'Unknown';

      })

      .then(function(name) {

        args.formElement.querySelector('#name').value = name;

      });

  });

</script>