Custom code to disable auto-fill for JetFormBuilder fields ( Disable autofill for a specific form by adding its ID to the code )

gistfile1.txt

UPDATED: 28.01.2025

This custom code is designed to effectively prevent auto-fill on JetFormBuilder forms, as well as other forms, 
by dynamically altering the name attributes of input fields. When the page loads, it temporarily changes the name 
attributes of visible inputs, text areas, and selects, and sets autocomplete to new-password to stop browsers from 
auto-filling the fields.

During form submission, the original names are restored for accurate data handling. After submission, the name 
attributes are randomized again to ensure auto-fill remains disabled in future interactions. This approach is ideal 
for situations where you need to prevent unintended auto-completion by browsers while still preserving the correct 
field names for form processing.

Don't forget to add the ID of your form here: [data-form-id="ADD YOUR FORM ID NUMBER HERE"] ---- Exemple form ID [data-form-id="2021"]

Copy the following PHP code and create a PHP snippet using your snippet plugins. 
Paste the code into the plugin and save it.

_______________________________

add_action('wp_footer', function() {
    echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            // Select forms with a specific data-form-id
            const forms = document.querySelectorAll(\'[data-form-id="ADD YOUR FORM ID NUMBER HERE"]\');

            forms.forEach(form => {
                // Target all input fields and textareas
                const inputs = form.querySelectorAll("input, textarea");
                const originalNames = new Map();

                inputs.forEach((input, index) => {
                    // Store original name before modification
                    originalNames.set(input, input.getAttribute("name") || "");

                    // Generate a randomized name to block autofill functionality
                    input.setAttribute("name", `form-field-${index}-${Math.random().toString(36).substr(2, 5)}`);

                    // Set additional attributes to prevent autofill
                    input.setAttribute("autocomplete", "new-password"); // Alternative to "off"
                    input.setAttribute("autocorrect", "off");
                    input.setAttribute("spellcheck", "false");
                    input.setAttribute("autocapitalize", "off");
                    input.setAttribute("aria-autocomplete", "none");

                    // Apply readonly trick to initially disable autofill, removed on focus
                    input.setAttribute("readonly", "true");
                    input.addEventListener("focus", function () {
                        input.removeAttribute("readonly");
                    });
                });

                form.addEventListener("submit", async function(event) {
                    // Restore original names before submitting the form
                    originalNames.forEach((originalName, input) => {
                        input.setAttribute("name", originalName);
                    });

                    // Wait before modifying names again to ensure form submission completes
                    await new Promise(resolve => setTimeout(resolve, 100));

                    // Reapply randomized names for continued autofill prevention
                    inputs.forEach((input, index) => {
                        input.setAttribute("name", `form-field-${index}-${Math.random().toString(36).substr(2, 5)}`);
                    });
                });
            });
        });
    </script>';
});