Skip to main content

Our landing page is an explainer page. “Signup” form is inside a lightbox. All works correctly - but when you hit submit, the lightbox form page “clears” and looks like nothing has happened for a moment while the redirect to the external page happens.


For a form submitter who is fast on the trigger, they may think nothing has happened and close the lightbox or start filling the form again.


Our form gather minimum “lead” info and then passes it off to a full signup dialogue on the main site (we have to do password creation, capture a T&C attestation and gather some info that isn’t appropriate for Unbounce.)


The lightbox design is set to “mimick” the look/feel of the full signup and we are passing the form fields as URL parameters.


I tried to create a thank you page with “loading” GIF but can’t seem to get that to work either.

Another “solving my own problem” answer for posterity.


I gave up trying to put a loader icon or other delay graphic at this point.


But I was able to change the CSS on the form to change color of the button and the button text using the window.ub.hooks.afterFormSubmit.push call.


I am currently using this code:



<~script>

window.ub.hooks.afterFormSubmit.push(function() {

var submitBtn = $(’#lp-pom-button-5’);

var origText = submitBtn.text();

fbq(‘track’, ‘InitiateCheckout’);

submitBtn.css({‘background-color’:’#a9a9a9’});

submitBtn.text(“PLEASE WAIT”);

submitBtn.attr({ “disabled”: true });

});

</~script>



(I couldn’t figure out how to include the actual script value so I put the ~ in the script lines.)


You can see that I am also firing my Facebook signal for ‘InitiateCheckout’ within this script.

Reply


Terms & ConditionsCookie settings