Confirmation upon form submission (while staying on same page)?

[Anonymous]

Hi all!

I have embedded a form on our website. When the form is filled out, I'd like for the user to stay on that same page, but know that their form submission was successful. Any ideas on how to create a confirmation without navigating away from the page? I'm thinking either 1) change the button text after submission (for example, "thank you!), 2) have a popup confirmation window, or 3) disallow another form fillout.

Thanks,

Samantha

[SanfordWhiteman · Accepted solution]

Of course!  There are many ways to work with the same page + form after submission. The key is to return false; from the onSuccess listener.

One of many examples here: MktoForms2 :: Thank You HTML

You should also search for my name and "form" in the Community.  There are almost 100 posts + many demos!

[Anonymous]

Thanks so much Sanford! Great example & very easy to use. I got it working on your link, but it shows up as blank when I try to embed it. Any thoughts on why the following isn't working? I only have basic knowledge about coding, so thanks so much for your help!

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

<form id="mktoForm_1262"></form>

<script>

MktoForms2.loadForm("//app-abk.marketo.com", "958-YXI-045", 1262,

  function(form) {

  var formEl = form.getFormElem()[0];

  form.onSuccess(function(vals, thankYouURL) {

  var thanksEl = document.createElement('DIV');

  thanksEl.innerHTML = 'Thank you for your submission.';

  formEl.parentNode.replaceChild(thanksEl, formEl);

  return false;

  });

  });

</script>

UPDATE: Sanford Whiteman​

I've been looking around and actually prefer a popup box on submit. I'm wondering if it's just the software that I'm trying to embed it on, or if the coding is wrong:

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

<form id="mktoForm_1262"></form>

<script>

MktoForms2.loadForm("//app-abk.marketo.com", "958-YXI-045", 1262,

  function(form) {

1. form.onSubmit(function(){

alert("Thanks for signing up. We’ll add your Knovio + SAVO Inspire integration shortly!");

        });

      });

    </script>

[SanfordWhiteman]

Isn't blank for me: nation.marketo.com/thread/26193

[SanfordWhiteman]

Looks like a typo -- you have the string "a." hanging around in there. Should be:

MktoForms2.loadForm("//app-abk.marketo.com", "958-YXI-045", 1262,

function(form) {

  form.onSubmit(function(form){

    alert("Thanks for signing up. We’ll add your Knovio + SAVO Inspire integration shortly!");

  });

});

[Seth_Wood]

Hi Sanford, This is so helpful! Thanks for posting! Just curious, would you happen to have a similar solution with a form on a native Marketo landing page.

I tried putting something like this in the header of the "custom head HTML" when editing the landing page:

<script >
form.onSuccess(function(vals, thankYouURL) {
var thanksEl = document.createElement('DIV');
thanksEl.innerHTML = 'Thank you! We will be in touch soon.';
formEl.parentNode.replaceChild(thanksEl, formEl);
return false;
});
//# sourceURL=pen.js
</script>

But it didn't work. Any help would be much appreciated!

[SanfordWhiteman]

On a Marketo-hosted LP with a named mktoForm, placement is more delicate. Because Marketo may place the <script> that loads forms2.min.js anywhere in the body, and Forms 2.0 JS depends on this file being loaded, place your custom form behaviors <script> just inside the closing </body> tag.

In addition, you can't just use form.onSuccess as in your example. You have to have the variable form in scope for that to work, e.g. wrap it in MktoForms2.whenReady:

MktoForms2.whenReady(function(form){
  form.onSuccess(function(vals, thankYouURL){
    // success actions here
  });
});

[Seth_Wood]

Hi Sanford, I think I have it working. I created a one button form that triggers an action, and supressed the redirect with your adapted code. Check it out: http://info.viewpoint.com/One-Button-Form-Conversion-Page---Stay-on-Page.html Thanks so much! You were very helpful.

[SanfordWhiteman]

Great!