Confirm email address field

I am using Forminator on my website and I'd like to implement a particular functionality : field checking

I have a field where I ask for user email address and I would like to display another field below this one asking to confirm the email address. Is there a way to perform this check directly within the plugin ?

  • Konstantinos Xenos

    Hi CHA !

    You can achieve this functionality with an extra e-mail field and a little bit of jQuery.

    How to do this in steps:

    Step 1:
    Add an extra e-mail field in your form. In my screenshot I've added an extra E-Mail field naming it 'Confirm Email Address' and made it required & validated as the default e-mail field is as well.

    Step 2:
    Edit the E-Mail field and on the tab Styling add a class of "custom-email"

    Step 3:
    Edit the Confirm E-Mail field and on the tab Styling add a class of "custom-confirm-email"

    Step 4:
    Add this code into your functions.php ( preferably your child themes ).

    add_action( 'wp_footer', 'custom_forminator_email_confirm' );
    function custom_forminator_email_confirm() {
    	?>
    	<script>
    	( function( $ ) {
    		$( document ).ready( function() {
    			$( '#forminator-submit' ).prop( 'disabled', true );
    
    			$( '.custom-confirm-email input' ).on ( 'focusout', function() {
    				var email = $( '.custom-email input' ).val(),
    					confirmemail = $( '.custom-confirm-email input' ).val();
    
    				if ( confirmemail !== '' && email === confirmemail ) {
    					$( '#forminator-submit' ).prop( 'disabled', false );
    				} else {
    					$( '#forminator-submit' ).prop( 'disabled', true );
    				}
    			} );
    		} );
    	} ( jQuery ) );
    	</script>
    	<?php
    }

    What this will do:
    When the page loads the Submit button will be disabled. It will be re-enabled to be able to send the form only when the custom-email and custom-confirm-email contain the same value.

    Tell me if you need any help implementing this, or if you might need further customization.

    Regards,
    Konstantinos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.