Forms 2.0 - Raw Form Callback | Community
Skip to main content
Parker_Goran
Parker_Goran
New Participant
November 6, 2015
Solved

Forms 2.0 - Raw Form Callback

  • November 6, 2015
  • 2 replies
  • 6037 views

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="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>

Best answer by SanfordWhiteman

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.

2 replies

A
Anonymous
November 9, 2015

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
SanfordWhiteman
New Participant
November 9, 2015

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.

    A
    Anonymous
    November 10, 2015

    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
    SanfordWhitemanAccepted solution
    New Participant
    November 6, 2015

    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.

    Terms & ConditionsAccessibility statement

    Loading footer...