Create a custom thank you confirmation message upon the form submission

[Anonymous]

I thought I remember seeing how to add a piece of code into the embed code for a custom thank you confirmation message that pops up upon a form submission in 2.0 Forms. But I don't see it now. I don't want to direct people to a different landing page, or to have the form disappear with no message. I have my form in a lightbox, and i would like a confirmation message in a lightbox once the Submit button is clicked.

Does anyone know what this piece of code is and where it needs to be placed? Thanks!

[Grégoire_Miche2]

You need to use the forms 2.0 API to block the display of the follow-up page and unhide a confirmation message that you had set and hidden in the page.

-Greg

[SanfordWhiteman]

There's no one "piece of code" because there are several different methods for replacing HTML content.  You really should search the Community more deeply so we don't have to repeat a/the solution again.

This shows the core approach:

MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0];
  form.onSuccess(function(vals, tyURL){
    formEl.textContent = 'Thank you for submitting';
    return false;
  })
  MktoForms2.lightbox(form).show();
});

Instead of setting textContent, you could set innerHTML.  Or, far more elegantly, you can reveal a previously hidden HTML container in the lightbox. This container could itself be stored in a Rich Text field on the form (which is nice for maintenance). Like I said, there's no one answer.

[Anonymous]

I am trying to display a thank you confirmation message in a lightbox upon form.onsubmit but the message is not popping up in a lightbox. Would you be able to recommend what needs to be added/removed? Here is my JavaScript:

<a href="#" id="lightbox-link"><img src="http://www.ariasolutions.com/wp-content/uploads/2016/06/request-consult.png"></a>

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

<form id="mktoForm_1088"></form>

<div id="confirmform" style="visibility:hidden;">

  <p><strong><font size="5" font color="#6D6E71">Thank you for your interest! Aria’s representative will contact you shortly to schedule a time to meet with one of our contact center experts.</font> <p> </p> <font size="3">Have a nice day!</font></strong></p>

</div>

<script>

var btn = document.getElementById("lightbox-link");

btn.onclick = function(){

  MktoForms2.loadForm("//app-ab13.marketo.com", "051-ASD-999", 1088, function (form){

  form.onSubmit(function() {

  form.getFormElem().hide();

  var confirmElement = document.getElementById('confirmform')

  confirmElement.style.visibility = 'visible';

  setTimeout(function() { confirmElement.style.visibility = 'hidden' }, 7000);

  return false ;

  });

  form.vals({"Primary_Interest__c":"Swift IVR"});

  MktoForms2.lightbox(form).show();

  });

};

</script>

[SanfordWhiteman]

See working code for your form here: MktoForms2 :: nation.marketo.com/thread/33625

[Anonymous]

It's not easy to find in the community. You're comment is a bit crass and unhelpful.

[SanfordWhiteman]

My first comment contains working code and guidance for alternate approaches; in my follow-up. I rewrote and fixed Anastasia's code in my own sandbox.  I feel certain that once you have you have contributed as much code as I have, you will be similarly frustrated at duplicating the same steps in multiple threads.

Here are some Community searches if you need more:

     code to hide form

     form thank you popup

[Anonymous]

Sanford, I did get Marketo creative services to help me with the previous piece of code. I tuned out very complicating.

Now I am struggling with a different code where I also need a message to pop up. But the suggestions from your links didn't work for me.

Here is my form embed code:

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

<form id="mktoForm_1160"></form>

<script>MktoForms2.loadForm("//app-ab13.marketo.com", "051-ASD-999", 1160);</script>

I am not displaying it on a Marketo landing page, but the main website.

Is there a way to insert a thank you message within this code

Thanks,

Anastasia

[SanfordWhiteman]

You might follow the steps here: http://blog.teknkl.com/same-page-thank-you-text-with-marketo-forms-about-the-aliid/

This is a step-by-step solution for same-page Thank You text. It uses my own particular style -- not the only way, but a reliable and manageable take on the task.

[Anonymous]

Thanks for your reply. I really don't have any code knowledge and the article doesn't explain where the code is supposed to go within the original form embed code.

Here is my embed  code:

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

<form id="mktoForm_1160"></form>

<script>MktoForms2.loadForm("//app-ab13.marketo.com", "051-ASD-999", 1160);</script>

Here is what the article suggests:

MktoForms2.whenReady(function(form){ 

  form.onSuccess(function(vals, thankYouURL) {

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

        thankYouLoc = document.createElement('A'),

        thankYouContainer = formEl.querySelector('#thankYouContent') || document.createElement('DIV'),

        thankYouHTML;

    thankYouHTML = decodeURIComponent((thankYouLoc.href = thankYouURL, thankYouLoc).hash.substring(1));

    formEl.innerHTML = (thankYouContainer.innerHTML = thankYouHTML, thankYouContainer).outerHTML;

    return false;

  });

});

The suggested code doesn't have any info on the munchkin code and the form ID. For users like me, it is not helpful.