[FEATURE] Native Form Success State Enhancement

[kipmyk]

Summary:
Add a built-in option to automatically hide form fields and clear input values upon successful subscription, improving user experience by preventing confusion and reducing duplicate submissions.

Problem Description:
Currently, when a Noptin subscription form succeeds, the success message appears but the form fields remain visible and populated. This can lead to:

User confusion about whether the submission was successful
Accidental duplicate submissions
Poor UX, especially on forms with multiple fields

Implement a form setting called "Enhanced Success State" (or similar) that:

Hides form elements on success: Automatically hide input fields, labels, and submit button when the form receives the success class
Clears form fields: Reset all input values (except hidden fields) to prevent duplicate submissions
Shows only success message: Ensure the success response is prominently displayed

Current Workaround (What I'm Using Now):
I've implemented a custom solution that adds inline CSS and JavaScript to handle the success state:

<?php
/**
 * Robustly hide and clear Noptin form fields upon successful subscription.
 *
 * This function adds inline CSS and JS to handle the success state of Noptin forms.
 */
function mk_noptin_success_handling_extension() {
    if ( is_admin() || ! function_exists( 'noptin' ) ) {
        return;
    }

    // Add inline CSS to hide fields on success.
    $custom_css = "
        form.noptin-has-success .noptin-form-fields,
        form.noptin-has-success .noptin-form-field-wrapper:not(.noptin-response-wrapper),
        form.noptin-has-success .noptin-form-field-submit,
        form.noptin-has-success .noptin-form-footer > *:not(.noptin-response) {
            display: none !important;
        }
        form.noptin-has-success .noptin-response,
        form.noptin-has-success .noptin-form-notice {
            display: block !important;
        }
    ";
    wp_add_inline_style( 'noptin-form', $custom_css );

    // Robust JS to clear fields when success class is detected.
    $custom_js = "
        (function() {
            function initNoptinClear() {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.attributeName === 'class') {
                            var target = mutation.target;
                            if (target.nodeName === 'FORM' && (target.classList.contains('noptin-newsletter-form') || target.classList.contains('noptin-optin-form')) && target.classList.contains('noptin-has-success')) {
                                target.querySelectorAll('input:not([type=\"hidden\"]), textarea, select').forEach(function(input) {
                                    input.value = '';
                                });
                            }
                        }
                    });
                });

                observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['class'] });
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initNoptinClear);
            } else {
                initNoptinClear();
            }
        })();
    ";
    wp_add_inline_script( 'noptin-form', $custom_js );
}
add_action( 'wp_enqueue_scripts', 'mk_noptin_success_handling_extension' );

[picocodes]

Hi @kipmyk,

Your workaround is good. I've applied it to core, no need for an extra form option.

[kipmyk]

Hi @picocodes, thanks for adding this to core. This removes the need for my workaround and improves UX out of the box.