Reloading page after form pop-up is closed | Community
Skip to main content
pavel_plachky
pavel_plachky
Level 5
March 15, 2019
Question

Reloading page after form pop-up is closed

  • March 15, 2019
  • 2 replies
  • 6986 views

I have a pop-up form on a Marketo landing page where users can register for a workshop. I have used a technique described here to show a thank you message in the pop-up after user submits a form. So far so good, thanks a lot @Sanford Whiteman​

There are a few workshop options and a user may want to register for more than one. Unfortunately, the second time the form pops up, it shows the thank you message instead of the form. Therefore I would like to reload the form or entire page when the pop-up is closed, but could not find any documented way to trigger when the pop-up is closed.

Test page here: http://marketing.syneron-candela.com/Workshop-Test_Registrationv2019.html

I would appreciate any help.

Pavel

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

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
March 16, 2019

Well, first of all, the current popup behavior is broken on all versions of IE, Edge before v16, and also older pre-modern versions of Chrome and Firefox (which are still in use). Remember, you can't just test in late-model Chrome and assume something is ready to go.

The reason it doesn't work is you're calling NodeList#forEach, which is a new method only in the latest browsers. While you can polyfill that pretty easily, polyfills should only be in a globally included JS file. So instead change the current code.

(function () {
  var productListButtons = document.querySelectorAll("button.product-list__btn");
  productListButtons.forEach(function(btn){
    btn.onclick = function() {showPopUp(btn.getAttribute("default_string_1"))};
  });
})();

to use a compatible call to Array#forEach:

(function () {
  var productListButtons = document.querySelectorAll("button.product-list__btn"),
      arrayify = getSelection.call.bind([].slice);
  arrayify(productListButtons).forEach(function(btn){
    btn.onclick = function() {showPopUp(btn.getAttribute("default_string_1"))};
  });
})();

Fix that up first, then we'll continue with the re-popup/reload question.

pavel_plachky
pavel_plachkyAuthor
Level 5
March 19, 2019

Thank You Sanford for kindly pointing the incompatibility. It works in Internet Explorer now.

SanfordWhiteman
SanfordWhiteman
Level 10
March 20, 2019

OK, now change your JS to alternate between Thank You text and the full form:

function showPopUp(defaultStr) {
  if (typeof MktoForms2 !== 'undefined') {
      MktoForms2.whenReady(function(form) {
         var formEl = form.getFormElem()[0],
             submitButton = formEl.querySelector("button.mktoButton[type='submit']"),
             thankYouContainer = formEl.querySelector('#thankYouContent') || document.createElement('DIV');
        
         thankYouContainer.id = "thankYouContent";
         thankYouContainer.textContent = ""; // clear TY content, if any
         submitButton.disabled = false; // ensure pointer submittability
         form.setValues({ "defaultstring1" : defaultStr }); // set runtime default
        
         MktoForms2.lightbox(form, {
            onSuccess: function(vals, thankYouURL) {
                    var thankYouLoc = document.createElement('A'),
                        thankYouHTML;
                    thankYouHTML = decodeURIComponent((thankYouLoc.href = thankYouURL, thankYouLoc).hash.substring(1));
                    thankYouContainer.innerHTML = thankYouHTML;
                    formEl.insertBefore(thankYouContainer,formEl.firstChild);
                    return false;
                }
            }).show();
        });
  }
}

And add this little bit o' CSS:

.mktoForm #thankYouContent:not(:empty) ~ div {
  display: none;
}

Avtar_Singh1
Avtar_Singh1
Level 2
March 19, 2019

Hi Pavel,

You need to change popup form success submission code written in http://marketing.syneron-candela.com/rs/620-HCU-218/images/workshop-registration-popup.js. Following code is replacing forms HTML with the "Thank you message" 

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

Hence second-time popup appears with thank you the message which is incorrect. To fix this issue on form success event you need to hide(NOT REPLACE) form and show "Thank you message" and if the user clicks on the "I'm Registering" button on the page then hide "Thank you message" and show the form again.

Best Regards,

Avtar Singh

Terms & ConditionsAccessibility statement

Loading footer...