Confirm password?

Bess Siegal It isn't easy because when I tried to do both strong password and confirm password together, they cancelled each other out. Also, it would be nice to just have a setting in the forms that we could enable!

Shani Cipro I agree that both these should be settings in the form

Bess Siegal I solved this on my end. Follow these instructions.

Add to Container CSS in the Advanced area for the Password field.

Place this JS on the page where the form is.

(function() {
    function setupPasswordToggle() {
        // Targets the Container Class wrapper you just updated
        var containers = document.querySelectorAll('.show-password-field');

        containers.forEach(function(container) {
            var input = container.querySelector('input');

            // Check if input exists and toggle doesn't already exist
            if (input && !container.querySelector('.ff-eye-toggle')) {
                container.style.position = 'relative';

                var toggleBtn = document.createElement('span');
                toggleBtn.className = 'ff-eye-toggle';
                toggleBtn.innerHTML = '👁️';
                toggleBtn.style.cssText = 'position:absolute; right:15px; bottom:12px; cursor:pointer; font-size:18px; z-index:999; user-select:none; line-height:1;';

                // Append inside the container
                container.appendChild(toggleBtn);

                toggleBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (input.type === 'password') {
                        input.type = 'text';
                        toggleBtn.innerHTML = '🙈';
                    } else {
                        input.type = 'password';
                        toggleBtn.innerHTML = '👁️';
                    }
                });
            }
        });
    }

    // Run immediately and check periodically for Cornerstone dynamic rendering
    setupPasswordToggle();
    var toggleInterval = setInterval(setupPasswordToggle, 500);
    setTimeout(function() { clearInterval(toggleInterval); }, 5000);
})();

That should do it. Works for me.

If that doesn't work, use this JS instead. I had to use the above js because I use a form builder. Let me know if that doesn't work and I think I have saved the js that is used inside the form settings

document.addEventListener('DOMContentLoaded', function() {
    // Find the Fluent Form password wrapper
    var wrappers = document.querySelectorAll('.show-password-field');

    wrappers.forEach(function(wrapper) {
        var input = wrapper.querySelector('input');
        if (input) {
            // Ensure wrapper styling supports absolute positioning
            wrapper.style.position = 'relative';

            // Create a text-based eye toggle button to bypass Font Awesome dependency
            var toggleBtn = document.createElement('span');
            toggleBtn.innerHTML = '👁️'; 
            toggleBtn.style.cssText = 'position:absolute; right:15px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:18px; z-index:10; user-select:none;';

            // Append the eye right after the input field
            input.parentNode.insertBefore(toggleBtn, input.nextSibling);

            // Toggle visibility logic
            toggleBtn.addEventListener('click', function() {
                if (input.type === 'password') {
                    input.type = 'text';
                    toggleBtn.innerHTML = '🙈'; // Swaps to hidden monkey or alternative emoji
                } else {
                    input.type = 'password';
                    toggleBtn.innerHTML = '👁️';
                }
            });
        }
    });
});

Kevin Watson Thank you!