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

forms
workflow

#1

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 validating form data on submission, or making custom API calls or ajax 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.


You can find the script here:
https://gist.github.com/noahub/cab64fcf0b05ead054be1ecc01cf6fe9

Step 1.

Copy form_submit.js and paste it in your Javascripts section with placement ‘Before Body End Tag’.

Step 2.

Paste the code you want to execute under the comment //ADD CUSTOM CODE HERE on line 5.

Step 3.

YOU’RE DONE! Wow only 2 steps! :noah:


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


Calling Custom Javascript function on form submit
Using jQuery to prevent lead form being submitted
Data validation
Custom form, keeping unbounce conversion
Issue with form submission on click of "Enter" through keyboard
Bing Conversion Tracking - Help please!
#2

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


The Ultimate List of Unbounce Tips, Scripts & Hacks
The Ultimate List of Unbounce Tips, Scripts & Hacks
#3

Hey Noah,

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

Thanks again!


#4

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


#5

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


#6

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…


#7

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>

#8

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