Create a custom thank you confirmation message upon the form submission

Anonymous
Not applicable

Create a custom thank you confirmation message upon the form submission

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!

12 REPLIES 12
Grégoire_Miche2
Level 10

Re: Create a custom thank you confirmation message upon the form submission

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
Level 10 - Community Moderator

Re: Create a custom thank you confirmation message upon the form submission

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

Re: Create a custom thank you confirmation message upon the form submission

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
Level 10 - Community Moderator

Re: Create a custom thank you confirmation message upon the form submission

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

Anonymous
Not applicable

Re: Create a custom thank you confirmation message upon the form submission

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

SanfordWhiteman
Level 10 - Community Moderator

Re: Create a custom thank you confirmation message upon the form submission

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

Re: Create a custom thank you confirmation message upon the form submission

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
Level 10 - Community Moderator

Re: Create a custom thank you confirmation message upon the form submission

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

Re: Create a custom thank you confirmation message upon the form submission

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.