[How to] Run Custom Code/Scripts on Form Submission

Ever needed a reliable way to fire some JavaScript on form submission?

This solution will be super handy for anybody looking to do things like: manipulating form data before it’s submitted or making custom API calls or XHR requests on form submission.

Whatever custom JavaScript you may have, using this script is a reliable and easy way to ensure it is fired on form submission.

Give’r a whirl! :spinbounce:


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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.data[0].first_name + ' ' + body.data[0].last_name;
      })
      .catch(function() {
        return 'Unknown';
      })
      .then(function(name) {
        args.formElement.querySelector('#name').value = name;
      });
  });
</script>

Can’t see the instructions? Log-in or Join the Community to get access immediately. :rocket:


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

4 Likes

Nice one, Noah! Excited to see how this may help conversion rates! :chart_with_upwards_trend:

Hey Noah,

Thanks for this script! This is going to be super helpful for an API call I have to make.

Thanks again!

2 Likes

I posted an update to github with some fixes. https://github.com/BillRothVMware/UnbounceJSSubmitCode

@Noah did anything changes recently? This code seems to have stopped working.

1 Like

As I mentioned in the other post you replied to @BillRothVMware I am trying to convince support that this script is broken.
When I pointed this out the reply was:

This page was last saved and republished 2 days ago with this exact script in place as it was being tested specifically: https://www.random.gq/blank-page/ - the only script running on it is an alert - feel free to test it out. But as you can see when you do test it - the script is firing okay :slight_smile:

I’ve created a page that shows the issues and explained the exact steps to replicate both issues with the script.
Issues being:

  • Payload doesn’t fire on a mobile device.
  • Script won’t obey a e.preventDefault call

Besides this script this also breaks both the multipage scripts on the forum as they both rely upon the e.preventDefault to stop the enter key from causing the entire form to validate. Therefore when a user presses enter the form will display all the validation issues on the entire form rather than just the specific page the user is looking at…

1 Like

Just had a rather long but much appreciated email from support over the issues we having with this and other scripts. @Noah has just updated this script to make it more durable.

So I’ve stripped out a considerable about the the code from this newer script so it’s bare essentials. Mostly I’ve removed the aspects that should fire the validations/submissions that e.preventDefault is meant to be stopping.

With what is left in the following script all that should happen is the background colour should change… It shouldn’t validate and show errors. It shouldn’t submit the form on the button press.

It does fire the payload code but it’s still ignoring the e.preventDefault();

  <script type="text/javascript">
    function yourSubmitFunction(e, $) {
      e.preventDefault();
      try {
        $('.lp-pom-block-content').css("background-color","red");
      }
      catch(err) {
        console.log(err);
      } 
      finally {

      }
    }

    lp.jQuery(function($) {
      $('.lp-pom-form .lp-pom-button').unbind('click tap touchstart').bind('click.formSubmit tap.formSubmit touchstart.formSubmit', function(e) {
        yourSubmitFunction(e, $);
      });
      $('form').unbind('keypress').bind('keypress.formSubmit', function(e) {
        if(e.which === 13 && e.target.nodeName.toLowerCase() !== 'textarea')
          yourSubmitFunction(e, $);
      });
    });
    </script>
1 Like

I submitted a feature request. Please comment/vote for it. This needs to be a supported feature.

In my case, this code appears to run inside an iframe of some sort (the confirmation dialog iframe?), so does not have access to the the JS variables initialized on the parent page (in my case the facebook tracking pixel). It was ALMOST exactly what I needed, but not quite.

This is awesome! Thank you so much @Noah

Is there a way to use it with embedded forms? We use embedded forms with our clients so that we don’t have access to their lead data:

http://unbouncepages.com/kareo-lp/

Let me know! Any help would be greatly appreciated.

I am trying to run this with the Facebook lead pixel (tracking pixel AND a lead conversion pixel) however I’m following the instructions and using Facebook event testing the tracking pixel and lead pixel are firing upon page load. I have tried adding both the tracking and lead pixel, as well as just the lead pixel in the JS.

Does anyone have any suggestions? Thanks!

I am trying to achieve the same as Max (the comment above RE FB pixel) so if anyone has any suggestions, please let us know!

Thanks!!

I want to make an API call in the beforeFormSubmit. API returns a boolean and if it is false, I would like to cancel the submit and keep the user on the form.

How do I do that? I did put a return false but that did not help.

You’ve managed to sort it out?

Would also like to do the same, keep the user on the form on an api error. Has anyone been able to work that out?

Any idea how to capture the form field variable to insert into javascript code in order to execute something with that value?

Given the form field’s ID in the HTML, you can capture the input by using

document.getElementByID('form_field_id').value

Note that this method captures the current input in the form field at the time it is called, so you’ll have to be sure to grab the value as you execute the function you want to operate with that information.

Thank you - that is what I needed!

1 Like

has anyone manage to get this up?

Hi,

Thanks for this useful script.

How can we declare this script for a pop-up within the parent page?

I need to execute parent javascript action after a pop-up submitted.

Thank you

1 Like