Hidden Marketo Forms Conflict on Wordpress | Community
Skip to main content
A
Anonymous
July 20, 2017
Question

Hidden Marketo Forms Conflict on Wordpress

  • July 20, 2017
  • 6 replies
  • 4225 views

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>

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    6 replies

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    July 20, 2017

    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.

    A
    Anonymous
    July 20, 2017

    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
    SanfordWhiteman
    Level 10
    July 20, 2017

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

    A
    Anonymous
    July 20, 2017

    sfscapital.com/eguide-secrets-to-success/

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    July 20, 2017

    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.

    A
    Anonymous
    July 21, 2017

    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

    A
    Anonymous
    July 21, 2017

    still a no go with those css changes

    A
    Anonymous
    July 21, 2017

    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?

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    July 21, 2017

    No, you just use the variable

    form

    Latest versions of Safari and of OS X? Can you take a screencast?

    A
    Anonymous
    July 21, 2017

    form.addHiddenFields({

    doesn't work am I missing something there?

    10.12.5 of OS X

    Latest version for Safari.

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    July 23, 2017

    Looks like you decided to go with a Marketo form only. Not a bad idea!

    In any case what I'm referring to is simply that the only parameter of a ready/whenReady/whenRendered callback is already a Marketo form object. You don't need an intermediate variable, and you don't need to refer to the allForms() collection, which creates unstable behavior.

    function(form) {
      form.submit();
    });
    Terms & ConditionsAccessibility statement

    Loading footer...