SOLVED

Forms 2.0 - Raw Form Callback

Go to solution
Highlighted
Level 1

Forms 2.0 - Raw Form Callback

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>

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 10 - Community Moderator

Re: Forms 2.0 - Raw Form Callback

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.

View solution in original post

7 REPLIES 7
Highlighted
Level 10 - Community Moderator

Re: Forms 2.0 - Raw Form Callback

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.

View solution in original post

Highlighted
Anonymous
Not applicable

Re: Forms 2.0 - Raw Form Callback

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).

Highlighted
Level 10 - Community Moderator

Re: Forms 2.0 - Raw Form Callback

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.

Highlighted
Anonymous
Not applicable

Re: Forms 2.0 - Raw Form Callback

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.

Highlighted
Level 10 - Community Moderator

Re: Forms 2.0 - Raw Form Callback

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.

Highlighted
Level 1

Re: Forms 2.0 - Raw Form Callback

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>

Highlighted
Level 10 - Community Moderator

Re: Forms 2.0 - Raw Form Callback

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!