Create a custom thank you confirmation message upon the form submission | Community
Skip to main content
A
Anonymous
June 24, 2016
Question

Create a custom thank you confirmation message upon the form submission

  • June 24, 2016
  • 2 replies
  • 8555 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Grégoire_Miche2
Grégoire_Miche2
Level 10
June 24, 2016

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
    SanfordWhiteman
    Level 10
    June 25, 2016

    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.

    A
    Anonymous
    June 28, 2016

    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="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
    SanfordWhiteman
    Level 10
    June 28, 2016

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

    Terms & ConditionsAccessibility statement

    Loading footer...