On form submit, replace form with "thank you" message

Anonymous
Not applicable
Is there a way to do this without bringing a second landing page into the equation, as suggested by this post:

https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PSMjAAO

I've come across some steps for getting at the form's embed text to make the form "disappear" on submit:

http://developers.marketo.com/documentation/websites/forms-2-0/

But when I followed these steps, I was unable to edit the embed code in Marketo, and wasn't sure where to copy and paste that code without affecting the functionality currently in place (in other words, I don't want to break the basic form functionality).

Inside my index.html file, I have the following JS:

    <script type="text/javascript">
      function formSubmit(elt) {
        var formSubmit = Mkto.formSubmit(elt);
        if (!formSubmit) {
          jQuery('span.mktFormSubmitError').show();
          return false;
        }
        return true;
      }
      function formReset(elt) {
        return Mkto.formReset(elt);
      }
    </script>

Which is used as an event handler when the Submit button is clicked:

<a onclick='formSubmit(document.getElementById("mktForm_1024")); return false;' href="#" class="button">SUBMIT</a>

Could the answer lie in making changes to the code inside the above script tag, or is there another way I should go about this? What about jQuery's .load() method?
Tags (1)
21 REPLIES 21
Matt_Stone2
Level 9
You won't edit the embed code within Marketo, you'll edit it when you add it to your site... so using the example on the link you posted, you'll get the following code from Marketo:

<script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
<formid="mktoForm_621"></form>
<script>MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621);</script>

The customization happens in the last line, where you change it to this:

<script>MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form){
  //Add an onSuccess handler
  form.onSuccess(function(values, followUpUrl){
    //get the form's jQuery element and hide it
    form.getFormElem().hide();
    //return false to prevent the submission handler from taking the lead to the follow up url.
    return false;
  });
});</script> 

So basically if you look at the comments in that code, you can see where you will specify how to hide the form itself. All you would need to do is create a hidden "thank you" block on the page and then un-hide that one as you hide the form.

Does that make sense?