CODEWITHSUNDEEP
formsmarketo
Krang
Krang

Reputation: 235

Reset a Marketo Form upon submission

I have an embedded Marketo form I am using on my site.

When I click submit I want the form to reset to its original state.

What do I need to add to my code for this, and better yet where can I find this in the Marketo documentation?

Here's my current code 

<script src="//app-sjg.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm"></form>
<script>
  MktoForms2.loadForm("//app-sjg.marketo.com", "819-OWT-537", 1404);
</script>
<script>
  MktoForms2.whenReady(function (form){
    form.onSuccess(function(values, followUpUrl){
      $('#confirmform').modal('show');
      return false;
    });
  });
</script>

Upvotes: 3

Views: 1838

Answers (1)

dferenc
dferenc

Reputation: 8126

The Marketo Form object does not have the reset functionality, but luckily enough, javascript has such a native .reset() method on the HTML form elements. This .reset() method will restore a form element’s default values.

Having said that, the only thing to do within the .onSuccess() callback is to grab the HTML form. Calling the .getFormElem() method of the Marketo Form object, will give us the jQuery wrapped form element, so with form.getFormElem()[0] finally we get the form node, on which we can call .reset().

Here is the sample code:

<script src="//app-lon06.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm"></form>
<script>
// The fourth argument of the `.loadForm()` can be used as an onReady callback.
MktoForms2.loadForm("//app-sjg.marketo.com", "819-OWT-537", 1404, function(form) {
    form.onSuccess(function(values, followUpUrl){
        // $('#confirmform').modal('show');
        console.log(form);
        // .getFormElem() returns the jQuery wrapped form element
        var formElement = form.getFormElem()[0];
        // .reset() is a native javascript method.
        formElement.reset();

        // If boolean `false` is returned then the visitor 
        // will NOT be forwarded to the follow up page!
        return false;
    });
});
</script>

Note: the good thing is, that all the important hidden fields (e.g.: formid and munchkinId) will remain intact.

Upvotes: 2

Related Questions