FormSubmit.html

<script type="text/javascript">

  function yourSubmitFunction(e, $) {
    e.preventDefault();

    //CUSTOM CODE HERE

    // If your code is asynchronous, call this final line in your callback instead
    lp.jQuery('.lp-pom-form form').submit();
  }

  lp.jQuery(function($) {
    $('.lp-pom-form .lp-pom-button').unbind('click tap touchstart').bind('click.formSubmit', function(e) {
      if ( $('.lp-pom-form form').valid() ) yourSubmitFunction(e, $);
    });

    $('form').unbind('keypress').bind('keypress.formSubmit', function(e) {
      if(e.which === 13 && e.target.nodeName.toLowerCase() !== 'textarea' && $('.lp-pom-form form').valid() )
        yourSubmitFunction(e, $);
    });
  });

</script>

I'd like to fire one function if the submit is valid and one if not valid. Any suggestions for how to update the script? Also, concerning the comment about whether the code asynchronous, do I remove the line below the comment if it is not?

@johnnyopao When I use the .submit() function is gets me to a page that just says {"protected_assets": {}}. Any help?

Hey @DarrenCarterMD sorry for the late reply here. For some reason I'm not getting notifications for my gists.

If you want to fire a different function on invalid, you could try adding an else statement to the valid check. Like this

if ( $('.lp-pom-form form').valid() ) { 
  yourSubmitFunction(e, $);
}  else {  
 yourInvalidSubmitFunction(e, $);
}

Then define yourInvalidSubmitFunction similar to yourSubmitFunction

Hey @silenceisgolden

Not quite sure what may be going on here off the bat but I see you have a open ticket with our (Unbounce) support. We'll look into your issue and reply back through the ticket on suggestions.

@johnnyopao Thanks for your help and updating the gist!

Hi -- thanks so much for this script! I found that changing .unbind('click') to .unbind('click tap touchstart') seemed to help get this working on mobile safari.

great suggestion @cindysageday i've updated the gist to reflect this

Hey @johnnyopao,

I was wondering whether I could use this script for tracking Unbounce form submissions via dataLayer in GTM. The good folks from Unbounce customer support have referred you to me as the measurement implementation guru. As a non-developer (damn it, Jim, I'm an analyst, not a coder...), I envision the situation thusly.

1. a visitor submits a form
2. when the form gets validated, javascript like this fires: dataLayer.push({'event' : 'form-sent', 'formType' : 'lp-01'});​
3. GTM reads the payload and fires a tag that sends the conversion into Google Analytics / AdWords / FB / RTB system.

My main challenge is to get the dataLayer.push event to fire after the successful submission.

Any ideas?

Thank you so very much,

Honza

Sorry for the super late reply here @honzafelt. Github doesn't send me notifications for my gist scripts.

I'm sure you already have the answer to this or an alternative, but i'll add my response just incase someone else finds this useful.

This script will only allow you to send events after validation which is also before the data gets submitted. This script cannot hook into after submission. For that i'd suggest sending the data event when they land on a unique confirmation page.