Rich-text Reply

Custom Form Submit Event

estern_le 09-17-15
Accepted Solution

Custom Form Submit Event

Hi,

 

trying to accurately track form submissions and trigger a custom event vs using a click event on the form button (which could be clicked many times during a form submit process). 

 

Looking through he docs it seem super clear to me.

 

So we need to:

- write some jquery code to check for on.("submit") and trigger the event call?? 

Any guidance to how i would be able to do this?

 

Questions:

- Does this submit action happen when validation items need to be addressed, meaning if someone submits the form and they need to fix some of the capture inputs according to some validation errors will this be tracked as a submission event, just like if the form was filled out correctly and it went through?

 

We don't have a success page that has the optimizely code it on it to do the pageview option like i have seen in other docs.

 

Thanks for the Help

ES

 

 

Amanda 09-18-15
 

Re: Custom Form Submit Event

@estern_le Great question. Can you post the URL where you wish to track the form submissions? The way to accurately track successful submissions depends on how the form itself is built. I'd be happy to take a look. 

 

However, you are definitely going to need to use a Custom Event instead of just using click tracking. You are exactly right in that a simple click tracking event would capture a conversion every time the button is clicked regardless of whether it was actually successful. 

 

 

I would recommend talking to your developers about what trigger signifies a "Success." Then, you can bind the custom event to this trigger. You can either do this in the code of your form itself, or you can do it within the experiment. 

Optimizely
JDahlinANF 09-18-15
 

Re: Custom Form Submit Event

Yes, you can trigger on the click of the submit button.

$('.submit').on('click',function(){
    $(window).trigger('theyClickedSubmit');
});

Then you add a Cystom Event in Optimizely that listens for the trigger "theyClickedSubmit".

 

Note: I don't think .on() is supported by the Optimizely version of jQuery, but I could be wrong.  If it's not, you will need to change the code above to reference your site's version of jQuery like this:

window.$('.submit').on('click',function(){
    window.$(window).trigger('theyClickedSubmit');
});

But - as you suggested, this will fire the event every time someone clicks [Submit].  If you only want to trigger the event if the form passes validation, then you will need to have your developers add a trigger that fires when the form passes validation that you would listen for.

 

Re: Custom Form Submit Event

Let's assume you have a form like the following:

 

http://screencast.com/t/c98A3glwBihK

 

There are a few ways to approach what you want to do. Let me outline them below:

 

 

1) Attach a click event to the submit input, prevent the "default action" of this input (which would be to submit the form), fire your custom event/goal tracking (or any other code you want to run), and then submit the form. Here would be a way to do that via JavaScript:

 

http://screencast.com/t/KLKdeCxS

 

 

2) Another way would be to submit the form using AJAX. In this manner, you can use the jQuery.ajax method to post to the "action" component of the form. Then, if the submission is successful, you can run your tracking. I use this structure when I do something like this:

 

http://screencast.com/t/eNMKlcOp

 

The benefit here is that you can handle any errors in the form submission first... and if the form submission is successful, THEN you can fire your custom event/goal tracking (or whatever other code you want to run). This is definitely a more reliable solution, and since it uses AJAX, you can keep the user on the same page. Depending on the speed of the site, though, you may need to throw up a spinner .gif or other messaging that indicates to the user that something is happening right after they attempt to submit the form... otherwise, if there's a slow reponse time, the user may think nothing happened and might attempt to resubmit the form or reload the page.

 

 

I would advise not trying to use the .submit() method as there are only certain things you can do within the event handler here (i.e. "callback" method that fires when the submit event occurs). You should instead be preventing the default form submission, running validation, running your code, and then, if validation passes, submitting the form.

 

There are def. other ways to approach this, but the above 2 methods should prove reliable and get the job done cleanly. Note that this is code I just typed up in my editor, so the screenshots of code haven't been tested per se, but the only reason they would fail would be due to simple syntax errors. Otherwise, that's pretty much how you do it. Hope this helps!

 

(Final Note: if using the AJAX option [method #2], then you can always redirect users to a final "confirmation" page or whatever after the form submits. Just use the code:

 

window.location.href = "www.your_final_url_here.com";

 

at the end of the 'success' method in the $.ajax() function.... after you ran all your other code.)

-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
estern_le 09-22-15
 

Re: Custom Form Submit Event

Thanks for the feedback. Yah i guess we will need to throw an event call after validation passes wich is in the from logic, which is out of my hands on the front-end. I will reach out to the dev team to assist. Thanks for the direction, this is what i thought was going to have to happen.
estern_le 09-22-15
 

Re: Custom Form Submit Event

Thanks for the feedback. Yah we will need to trigger the event after validation is success in the form logic, which is out of my purview.
pthurmer 03-23-16
 

Re: Custom Form Submit Event

Hi Sean,

 

Are you able to repost your screencast links? I receive a 404 message when I click through.

 

Thanks a ton!

 


Patrick

Level 1

Re: Custom Form Submit Event

@pthurmer

Unfortunately it looks like all my screencast history has been expunged. I used Jing to create the captures, so I do not have any hard copies of the images. Sorry about that!
-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
swapper8 01-20-17
 

Re: Custom Form Submit Event

Hi, I am sure your solution will solve my problem, but those screencast urls are not working. Can you please share raw code, or working screenshots ?

Level 1