Forms 2.0 - Raw Form Callback

[Parker_Goran]

Hi all - I'm curious how I can set a callback on a custom form. I followed this guid: Re: Forms 2.0 - raw form html embedding issues to create a form using the below format. I would like to add a callback function so that when submitted (preferably after a successful submit), the page does not refresh, rather displays a custom message. Would I have to use the MktoForms2 functions - it is essentially a custom version of the .loadForm(baseUrl, munchkinId, formId [,callback])​. Thanks in advance.

<form id="mktoForm_1139" class="mktoForm" novalidate="novalidate" method="post" action="http://pages.CNAME.com/index.php/leadCapture/save">

     <!-- form fields here -->

     <input type="hidden" name="formid" class="mktoField form-control mktoField form-controlDescriptor" value="value">

     <input type="hidden" name="munchkinId" class="mktoField form-control mktoField form-controlDescriptor" value="value">

     <div class="text-center"><button type="submit" class="btn btn-default">Sign Up</button></div>

</form>

[SanfordWhiteman · Accepted solution]

Once you've decided to "go rogue," you can't use any of the Marketo JS methods.

You can switch from /save to the /save2 endpoint because it won't return a 302, which might make the ecosystem easier to manage, but it alone can't do what you want.  Realize that a standard HTML form post always results in replacing the document (unless the server returns 204, which doesn't apply here).  To stay on the page, submit via Ajax and/or to an IFRAME.  All this is magic that MktoForms2 provides for you that you'll have to reimplement using a third-party library.

[Anonymous]

Hi,
I see this has already been answered but I've implemented something similar with a custom form and hidden Marketo form as described here - http://developers.marketo.com/blog/make-a-marketo-form-submission-in-the-background/. You can then use JavaScript to add the form values to the hidden Markto form field values and you'll still be able to use the Marketo 2.0 Form API and objects including .onSubmit(callback).

[SanfordWhiteman]

Been recommending the hidden form for the last year, but you still need to add your own event listener to the raw form to chain to MktoForms2::submit and provide feedback in the visible form. A couple of other gotchas as well: MktoForms2 has slightly special serialization logic that you may need to mirror in your own form.  I'm a little more hesitant to recommend the hidden form when someone builds a completely bespoke form (which has no inherent rules) -- vs. using another forms library, say Drupal forms, where there's a predictable set of behaviors and sometimes an existing JS object model that's easy to piggyback on.

A far-out third option is to inject Marketo form inputs into a raw form template.  That is, you build your raw form like this:

<form>

     <article>

          <div>

               <input type="text" data-MktoForms2-equiv="Email">

          </div>

     </article>

<form>

Then, at runtime, render the Marketo form and sub the real Marketo form field elements in for the placeholders.  Your raw form is hooked into the Marketo events.  It's not easy, but it can make a nice bridge between a designer and developer.

[Anonymous]

Thanks  for the recommendations Sanford, great to see there's a couple of options out there, even if some are a little left field. We've only just started implementing custom forms but the hidden forms have worked very well for our use case; connecting forms from an unsupported 3rd party while maintaining Marketo form functionality.

[SanfordWhiteman]

For bridging from an inflexible 3rd-party form, absolutely the way to go. Do pay attention to the serialization of checkboxes and multi-selects is all.

[Parker_Goran]

Thank you both for your great suggestions! I think the Marketo form injection from a raw form will be the best solution for my case.

When using the hidden form technique, though, what is the purpose of even including a hidden <form> element? The MktoForms2 object is created with the loadForm function, correct?

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

<script>

     MktoForms2.loadForm("//app-sj11.marketo.com", "167-EIT-370", 1139, function(){

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

     })

</script>

[SanfordWhiteman]

Yes, the JavaScript object (and a non-DOM <FORM> as well) will be created even if there's no <FORM> in the DOM.

I haven't tested a non-DOM <FORM> instead of hidden <FORM> cross-browser, so there may be somewhere it trips up. But if not, it's fine!