Basic Form Abandonment Script in JavaScript
Here's a basic JavaScript script that tracks form abandonment:
JavaScript
(function() {
// Variables
const forms = document.querySelectorAll('form'); // Select all forms on the page
const abandonmentTime = 3000; // Time in milliseconds before considering abandonment (adjust as needed)
// Track user activity
window.addEventListener('beforeunload', (event) => {
for (const form of forms) {
if (!form.elementsHaveInteraction()) { // Check if any form element has been interacted with
event.returnValue = 'Are you sure you want to leave without completing the form?'; // Prompts before leaving
}
}
});
// Function to check if any form element has been interacted with
function formElementsHaveInteraction() {
for (const element of this.elements) {
if (element.value || element.checked) {
return true;
}
}
return false;
}
// Apply function to all forms
for (const form of forms) {
form.elementsHaveInteraction = formElementsHaveInteraction.bind(form);
}
})();
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter