How do I set up a rule to fire upon successful completion of a form?

[#1]

We create form pages with a form section and a thank-you (success) section on one page.  There is not a separate thank-you page.  An example can be seen at http://www.hermanmiller.com/solutions/living-office/living-office-digital-magazine/lo-magazine-stay-....  Initially, the form section is visible (has a style of display:block) and the success section is not ( style of display:none).  Upon successful completion of the form, the display styles of each section are reversed - the form section has a style of display:none and the success section has a style of display:block.  I would like to fire a pixel upon successful completion of the form.  How do I set up a rule in DTM to do this?  Note that successful completion of the form is not the same as clicking on the Submit button because some form validation is done at that time and if the validation fails I do not want the pixel to fire.  I only want it to fire if the submit is successful.  Thank you.

[#2 · Accepted solution]

Hi John,

I think there may be a few ways to accomplish this. The first could be a click or form submit event-based rule with a condition that checks to ensure validation passed. This would depend on how your validation is done and you may need to get creative and create a custom condition if the built-in options are unable to detect the validation.

Another option I'd suggest is to try testing a rule that uses either the "enters viewport" or "element exists" event? If neither of those events works, you could write your own custom event.

Lastly, if you are unable to detect the successful completion of the form in DTM, you could use a direct call rule. Your developers would place a _satellite.track() call in the code that fires on a successful validation. Unfortunately, this would require a page code update.

Cheers,
Jantzen

[#3]

Jantzen,

Thank you for your reply.  I have tried the suggestions of using "enters viewport" and "element exists" which do not work because the success div does in fact exist on the page initially and is within the viewport initially. It's just that the success div's style is initially set to display:none. The element is there, you just cannot see it, so the rule fires when the page loads in these cases.

I am hoping to avoid a page code update, so I will attempt to find out more about custom conditions and/or events.

Regards,
John