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?

[Robb_Barrett]

I'm not getting pre-fill on my Marketo LPs.

[Robb_Barrett]

Hi all -

Sorry for necroposting, but I've been using this functionality on my page but it's not prefilling the form. Is there a setting I need to add to get the pre-fill? The page has it enabled.

[Matt_Stone2]

If you're using the form javascript snippets, you won't be able to use prefill. It's a security restriction for transferring data off Marketo.

[SanfordWhiteman]

Forms 2.0 JS works fine on Marketo LPs. The prefill restriction is for non-Marketo LPs.

[Robb_Barrett]

Looks like if the form is added directly in the page, the page puts in some JS to prefill with the appropriate fields.  If you use JS to call in the form, it doesn't automatically pull the LOF and prefill. The mktoPreFillFields is called automatically based on the form. 

[SanfordWhiteman]

Yes, you have to use an actual form, not JS that happens to call MktoForms2::loadForm.

[Robb_Barrett]

I was able to get it to work with this bit of code.

form.vals({"Postal Code":"{{lead.Postal Code}}",

                         "Phone":"{{lead.Phone Number}}",

                         "Country":"{{lead.Country}}",

                         "First Name":"{{lead.First Name}}",

                         "Last Name":"{{lead.Last Name}}",

                         "Company":"{{company.Company Name}}",

                         "Email":"{{lead.Email Address}}",

                         "City":"{{lead.City}}",

                         "State":"{{lead.State}}",

                         "Address":"{{lead.Address}}"});

[SanfordWhiteman]

Sure, that's another way to do it if you're on a Marketo LP.  But I don't understand why you're using the JS instead of a true form widget.  Note you lose per-LP form fillout reporting this way.

[Robb_Barrett]

Wrote you a long PM to explain it, but Marketo won't let me PM you. 

[Matt_Stone2]

I would check out this thread for options on hiding the div after a few seconds: http://stackoverflow.com/questions/820951/hide-div-after-a-few-seconds -- you would just start out with showing it first, then exectue the script in that link to hide it after a few seconds.

[Anonymous]

Hi Derek - I realize this topic is old but hoping you are still subscribed to these posts. I found your previous reply helpful. Do you know how I could get the confirmation div to disappear after X amount of time (in my particular case I want to keep the form visible at all times and have the confirmation show up after submission for a few seconds, then disappear)? Thanks in advance!

 

[Anonymous]

I had a similar issue. What I did was create a hidden DIV element with the "success message" I wanted to display somewhere on the page before or after the marketo SCRIPT and added a javascript line to make that DIV visible onSuccess.

<script src="//app-sjg.marketo.com/js/forms2/js/forms2.js"></script><form id="mktoForm_nnnn"></form><script>MktoForms2.loadForm("//app-sjg.marketo.com", "nnn-xxx-nnn", nnnnn, function(form){
  //Add an onSuccess handler
  form.onSuccess(function(values, followUpUrl){
    //get the form's jQuery element and hide it
    form.getFormElem().hide();
    document.getElementById('confirmform').style.visibility = 'visible';
    //return false to prevent the submission handler from taking the lead to the follow up url.
    return false;
  });});</script>
<div id="confirmform" style="visibility:hidden;"><p><strong>Thank you. Check your email for details on your request.</strong.</p></div>

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

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

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

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.

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

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 😉

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