7 Replies Latest reply on Nov 11, 2015 2:42 PM by Sanford Whiteman

    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>

        • Re: Forms 2.0 - Raw Form Callback
          Sanford Whiteman

          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.

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

              • Re: Forms 2.0 - Raw Form Callback
                Sanford Whiteman

                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.

                1 of 1 people found this helpful