document.addEventListener("DOMContentLoaded", function () {
// Smooth scrolling to the top of the form when clicking "Next"
document.addEventListener("click", function (e) {
if (e.target && e.target.classList.contains("gform_next_button")) {
setTimeout(function () {
var formWrapper = e.target.closest(".gform_wrapper"); if (formWrapper) {
setTimeout(function () {
window.scrollTo({
top: formWrapper.getBoundingClientRect().top + window.scrollY,
behavior: "smooth"
});
}, 300); // Delay ensures form updates before scrolling
}
}, 500); // Initial delay ensures next step loads
}
}); // Form highlighting for empty fields in Form ID 804
var formID = "804"; // Gravity Form ID
var excludedFieldIDs = ["FIELD_ID_1", "FIELD_ID_2"]; // Replace with actual field IDs to exclude function highlightEmptyFields() {
var form = document.querySelector("#gform_wrapper_" + formID);
if (!form) return; // Stop if form is not found form.querySelectorAll(".gfield").forEach(function (fieldWrapper) {
var input = fieldWrapper.querySelector("input, textarea, select"); if (input) {
var fieldID = fieldWrapper.getAttribute("id"); // Get field ID
if (excludedFieldIDs.some(excludedID => fieldID && fieldID.includes(excludedID))) {
return; // Skip highlighting for excluded fields
} var isEmpty = !input.value.trim(); // Check if field is empty // Special check for radio buttons & checkboxes
if (input.type === "checkbox" || input.type === "radio") {
var groupName = input.name;
isEmpty = !form.querySelector(`input[name="${groupName}"]:checked`);
} // Apply highlight if empty
if (isEmpty) {
input.style.border = "5px solid #FFD700"; // Thicker gold border
input.style.boxShadow = "0px 0px 5px rgba(255, 87, 51, 0.75)"; // Soft glow effect
} else {
removeHighlight(input);
}
}
});
} function removeHighlight(input) {
input.style.border = "";
input.style.boxShadow = "";
} // Run function on page load (only for Form ID 804)
highlightEmptyFields(); // Monitor user input to remove highlights dynamically
document.querySelectorAll("#gform_wrapper_" + formID + " .gfield input, #gform_wrapper_" + formID + " .gfield textarea, #gform_wrapper_" + formID + " .gfield select").forEach(function (input) {
input.addEventListener("input", function () {
removeHighlight(this);
});
}); // Monitor radio and checkbox changes
document.querySelectorAll("#gform_wrapper_" + formID + " .gfield input[type='radio'], #gform_wrapper_" + formID + " .gfield input[type='checkbox']").forEach(function (input) {
input.addEventListener("change", function () {
removeHighlight(this);
});
}); // Run highlighting on each form step change (only for this form)
document.addEventListener("click", function (e) {
if (e.target && e.target.classList.contains("gform_next_button")) {
var form = e.target.closest("#gform_wrapper_" + formID);
if (form) {
setTimeout(function () {
highlightEmptyFields(); // Run check again when "Next" is clicked
}, 500); // Delay ensures new fields are loaded
}
}
});
});
