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

[Anonymous]

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?

[Matt_Stone2]

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?

[Anonymous]

Sure, I understand that. But what if this is on a standalone site? I already have a form on the page - wouldn't adding this additional form element complicate matters? 

[Anonymous]

Hi Andrew,
what do you mean with an additional form element? You have a form on this page, and you want it to hide when submitting or the new one when submitting? If it's a marketo form use Matt's embedd code instead of the one you use at the moment.

Best regards

Steffen

@Matt S: Great idea 😉 Was thinking about it like 10 minutes and didn't come to the idea just placing the text behing the form 😉

[Matt_Stone2]

If you have multiple forms on the same page, this shouldn't affect those. You're specifying the form via an ID in the jQuery so the code is only pertaining to that form.

[Anonymous]

Additionally, I'm assuming the <form> element in my embed code should match the actual form's ID? 

In this instance, the ID in the embed code is 1026, but my actual form's ID is 1024...but then again, I've tried it with both and the steps you advised me to take aren't working. Any additional insights to offer? Thanks for your help.

[Anonymous]

Hi Andrew,
take the marked elements out here: 

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

and put them in here:

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

 

When anything of the marked fields is different your from marketo provided embedd code, you also need to change it in the code which you implement.

[Anonymous]

Okay, so in the body of my HTML, I have a form like this:

<form action="http://customers.tryloom.io/index.php/leadCapture/save" class="form-horizontal lpeRegForm formNotEmpty form-inline" enctype="application/x-www-form-urlencoded" id="mktForm_1024" method="post" name="mktForm_1024">

                    <div class="form-group first-name">

                        <div class="mktFormReq mktField"><label class="col-sm-2 control-label"></label><span class=

                        "mktInput col-sm-10"><input class="form-control mktFormText mktFormString mktFReq" id="FirstName"

                        maxlength="255" name="FirstName" tabindex="1" type="text" value="" placeholder="First Name"><span class="mktFormMsg"></span></span></div>

                    </div>

                    <div class="form-group last-name">

                        <div class="mktFormReq mktField"><label class="col-sm-2 control-label"></label><span class=

                        "mktInput col-sm-10"><input class="form-control mktFormText mktFormString mktFReq" id="LastName"

                        maxlength="255" name="LastName" tabindex="2" type="text" value="" placeholder="Last Name"><span class="mktFormMsg"></span></span></div>

                    </div>

                    <div class="form-group">

                        <div class="mktField mktFormReq"><label class="col-sm-2 control-label"></label><span class="mktInput col-sm-10"><input class="form-control mktFormText mktFormEmail mktFReq" id="Email" maxlength="255" name="Email" tabindex="5" type="email" value="" placeholder="Email Address" required><span class="mktFormMsg"></span></span></div>

                    </div>

                    <div id="mktFrmButtons">

                        <label>&nbsp;</label>

                        <div class="buttonSubmit">

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

                        </div>

                    </div>

                    <span style="display:none;">

                        <input name="_marketo_comments" type="text" value="">

                    </span>

                    <input name="lpId" type="hidden" value="1111">

                    <input name="subId" type="hidden" value="117">

                    <input name="munchkinId" type="hidden" value="882-OYR-915">

                    <input name="kw" type="hidden" value="">

                    <input name="cr" type="hidden" value="">

                    <input name="searchstr" type="hidden" value="">

                    <input name="lpurl" type="hidden" value="http://customers.mysite.com/ContactSalesWeb_test.html?cr={creative}&amp;kw={keyword}">

                    <input name="formid" type="hidden" value="1024">

                    <input name="returnURL" type="hidden" value="www.mysite.io">

                    <input name="retURL" type="hidden" value="www.mysite.io">

                    <input name="returnLPId" type="hidden" value="-1">

                    <input name="_mkt_disp" type="hidden" value="return">

                    <input name="_mkt_trk" type="hidden" value="http://customers.mysite.com/test.html?cr={creative}&kw={keyword}">

                </form>

And then, at the bottom, I have the new JS:

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

    <form id="mktoForm_1024"></form>

    <script type="text/javascript">

    MktoForms2.loadForm("//app-sj01.marketo.com", "882-OYR-915", 1024, function(form) {

            form.onSuccess(function(values, followUpUrl){

                form.getFormElem().hide();

                return false;

            });

    });

    </script>

But then there's also this JavaScript still being used...

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


Sorry for including all the code, but thought it would be faster to include it 🙂

 

[Anonymous]

Hi Andrew,
did you test if it works? 😉

But normally 

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

    <form id="mktoForm_1024"></form>

    <script type="text/javascript">

    MktoForms2.loadForm("//app-sj01.marketo.com", "882-OYR-915", 1024, function(form) {

            form.onSuccess(function(values, followUpUrl){

                form.getFormElem().hide();

                return false;

            });

    });

    </script>

should be 

<script>MktoForms2.loadForm("///app-sj01.marketo.com", "882-OYR-915",1024, 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>

[Anonymous]

Got it. So how would I tie this to the click event handler?

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

I commented out the existing script block containing the formSubmit method, so I'll need to somehow connect this click event to  Mkto.loadForm...