Hidden Marketo Forms Conflict on Wordpress

[Anonymous]

Our Wordpress site has several different forms (Gravity Forms) and we just started using Marketo so I've been attempting to integrate a couple with Marketo using just an embedded hidden form, then following their documentation to map the Gravity Form fields and push the data to Marketo on submission. A couple adjustments were made based on some threads on here but the problem is that the Marketo JS seems to conflict with the Gravity Form/Wordpress submission handling.

If the Marketo script to map and submit is on the page, the data will push to Marketo. However the Gravity Form confirmation action doesn't happen. IE if the form is supposed to redirect, or display a confirmation message that doesn't happen. The form/page just refreshes. Is this due to the Marketo.submit() function refreshing the page?

I'm not getting any javascript errors and can't really figure out what else is going on. The map/submit script I'm using is below

<script src="//app-sj19.marketo.com/js/forms2/js/forms2.min.js"></script>

<form style-"display:none!important;" id="mktoForm_1007"></form>

<script>

MktoForms2.loadForm("//app-sj19.marketo.com", "555-555-555", 1007, function(form) {

  var marketoForm = MktoForms2.allForms()[0];

  jQuery("form#gform_24").submit(function(){

    marketoForm.addHiddenFields({

     //Marketo Field Mapping

  "FirstName": jQuery("#input_24_1").val(),

  "LastName": jQuery("#input_24_2").val(),

  "Email": jQuery("#input_24_3").val(),

  "Company": jQuery("#input_24_6").val(),

  "businessChallenges": jQuery("#input_24_4").val(),

  });

       marketoForm.submit();

     });

  });

</script>

[SanfordWhiteman]

You have two issues here.

1. Yes, Marketo's default onSuccess behavior is to redirect to the (Marketo-defined) Thank You URL. the page. This particular behavior can be suppressed easily (you just return false; from a custom onSuccess) but that doesn't return control to Gravity Forms. It just keeps you on the page.
2. The Gravity Forms validation model will be skipped if you attach to the vanilla HTML submit event like this.

I think the misperception that you can near-instantly back a GF form with a Marketo submission was fueled by a now-removed Marketo blog post. Fact is, it isn't as simple as it seems. You must use the Gravity event model to retain control over validation and post-submission events. Use the Gravity API to call the Marketo Forms API, in other words -- don't bypass what makes Gravity special.

[Anonymous]

Thanks Sanford - figured that out kind of and am using the redirect (follow up with) option in Marketo to solve my problem...mostly....the only issue now is that the marketoForm.submit() function seems to be breaking in Safari. Know anything about that by any chance? (this is my first day working with Marketo)

If I set a breakpoint on the submit function and unhide the form I can see the fields get mapped correctly, the Marketo submit button becomes slightly transparent and the text changes to "please wait" and then thats it. So visually it looks like it's working - the data just isn't being passed to Marketo when submitted through Safari.

If I unhide the form and manually fill out and submit though it pushes.

[SanfordWhiteman]

If you post your URL I'll take a look at it.

[Anonymous]

https://www.sfscapital.com/eguide-secrets-to-success/

[SanfordWhiteman]

Which version of Safari?  This behavior rings a bell related to hidden DOM elements... been a long time since I looked into that, and IIRC it was officially patched.

[SanfordWhiteman]

Btw, this isn't necessary and creates a potential race condition:

var marketoForm = MktoForms2.allForms()[0];

The form param passed to the ready callback is already a reference to the current form object. If you have multiple forms on the page you definitely would not want to hard-code the first form (index [0]) in the callback.

While I haven't been able to repro the behavior on Safari 9 or 10 yet, I'd advise setting

visibility: hidden; position: absolute;

instead of

display: none;

since I seem to recall that was part of the older bug.

[Anonymous]

the latest version of Safari. Okay I'll give that a try, thanks.

Yeah I only set that as a variable based on some other stuff I saw here with people trying to accomplish similar things so I'll remove that

[Anonymous]

still a no go with those css changes

[Anonymous]

also if I remove the...

var marketoForm = MktoForms2.allForms()[0];

and change

marketoForm.addHiddenFields({ to MktoForms2.addHiddenFields({

it breaks the push. does..

marketoForm.addHiddenFields({ stay the same?