We have pop-up forms on our homepage that may pop-up depending on what visitors select. On that same page (the homepage) we have some javascript added that auto-rotates through some tab content.
The issue we are having is that the javascript interferes with users filling out the form fields. It takes the user’s cursor out of the form every five seconds which is the timing set in the javascript to rotate to the next tab. This ultimately causes users to abandon filling in the form. For now we have disabled the forms because of this issue but these forms are required so ultimately we need to fix this somehow.
Is there a way for our javascript to recognize any of:
- when a specific form is open, or
- any pop-up form is open, or
- any form is open, or
- when a users is filling in form field
so the tab rotation can be paused?
The javascript is below. You will see some commented out lines that remain from part of our attempts to resolve this.
Any help is appreciated.
var Webflow = Webflow || ;
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api
// start everything
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// Cycle through all tabs. Match class names
function tabLoop() {
tabTimeout = setTimeout(function() {
// var popup = document.getElementById(“signup-popup”)
console.log(‘popup’);
// if(document.getComputedStyle(popup).visibility !== “hidden”){
var $next = $(‘.tabs-menu’).children(‘.w–current:first’).next();
// }
if($next.length) {
$next.click(); // user click resets timeout
} else {
$(‘.standard-tab:first’).click();
}
}, 5000); // 5 second tab loop
}
// Reset loop if a tab is clicked
$(‘.standard-tab’).click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
Here is my site Read-Only: Webflow Preview