Ajax support for WP Newsletter plugin (https://www.thenewsletterplugin.com)

functions.php

<?php
/** @constant string THEME_NAME **/
define( 'THEME_NAME', get_option('stylesheet') );

/**
 * Custom script
 */
 function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/main.js',
        array( 'jquery' ),
        '1.2'
    );

    if ( !is_admin() ) {
        /** */
		wp_localize_script( 'custom-script', 'ajax', array(
            'url' =>            admin_url( 'admin-ajax.php' ),
            'ajax_nonce' =>     wp_create_nonce( 'noncy_nonce' ),
            'assets_url' =>     get_stylesheet_directory_uri(),
		) );
    }	
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

/**
 * Ajax newsletter
 * 
 * @url http://www.thenewsletterplugin.com/forums/topic/ajax-subscription
 */
function realhero_ajax_subscribe() {
    check_ajax_referer( 'noncy_nonce', 'nonce' );
    $data = urldecode( $_POST['data'] );

    if ( !empty( $data ) ) :
        $data_array = explode( "&", $data );
        $fields = [];
        foreach ( $data_array as $array ) :
            $array = explode( "=", $array );
            $fields[ $array[0] ] = $array[1];
        endforeach;
    endif;

    if ( !empty( $fields ) ) :
        global $wpdb;
		
		// check if already exists
		
		/** @var int $count **/
		$count = $wpdb->get_var( $wpdb->prepare("SELECT COUNT(*) FROM {$wpdb->prefix}newsletter WHERE email = %s", $fields['ne'] ) );
		
		if( $count > 0 ) {
	        $output = array(
	            'status'    => 'error',
	            'msg'       => __( 'Already in a database.', THEME_NAME )
	        );
        } elseif( !defined( 'NEWSLETTER_VERSION' ) ) {
            $output = array(
	            'status'    => 'error',
	            'msg'       => __( 'Please install & activate newsletter plugin.', THEME_NAME )
	        );           
        } else {
            /**
             * Generate token
             */
            
            /** @var string $token */
            $token =  wp_generate_password( rand( 10, 50 ), false );


	        $wpdb->insert( $wpdb->prefix . 'newsletter', array(
	                'email'         => $fields['ne'],
	                'status'        => $fields['na'],
                    'http_referer'  => $fields['nhr'],
                    'token'         => $token,
	            )
            );

            $opts = get_option('newsletter');

            $opt_in = (int) $opts['noconfirmation'];

            // This means that double opt in is enabled
            // so we need to send activation e-mail
            if ($opt_in == 0) {
                $newsletter = Newsletter::instance();
                $user = NewsletterUsers::instance()->get_user( $wpdb->insert_id );

                NewsletterSubscription::instance()->mail($user->email, $newsletter->replace($opts['confirmation_subject'], $user), $newsletter->replace($opts['confirmation_message'], $user));
            }

	        $output = array(
	            'status'    => 'success',
	            'msg'       => __( 'Thank you!', THEME_NAME )
	        );	
		}
		
    else :
        $output = array(
            'status'    => 'error',
            'msg'       => __( 'An Error occurred. Please try again later.', THEME_NAME  )
        );
    endif;
	
    wp_send_json( $output );
}
add_action( 'wp_ajax_realhero_subscribe', 'realhero_ajax_subscribe' );
add_action( 'wp_ajax_nopriv_realhero_subscribe', 'realhero_ajax_subscribe' );

main.js

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
};

jQuery(function($){
    // now you can use jQuery code here with $ shortcut formatting
    // this executes immediately - before the page finishes loading

    /**
     * Newsletter support
     */
    $('#newsletter')
        .attr('novalidate', true)
        .each( function() {
            var $this = $(this),
                $input = $this.find( 'input[name="ne"]'),
                $noti = $input.prev(),
                $submit = $this.find( 'input[type="submit"]'),
                showNoti = function(txt) {
                    var $msg = $noti.clone();

                    $noti.before($msg);
                    $noti.remove();

                    $msg.text( txt ).addClass('vaporize').attr('aria-hidden', 'false');                  
                },
                success = function() {
                    $this
                        .fadeOut('slow', function() {
                            $this.replaceWith( '<p class="appear-nicely dynamic-msg">Thank you!</p>' );
                        });      
                };
                
            // Submit handler
            $this.submit( function(e) {
                var serializedData = $this.serialize();

                $noti = $input.prev();
                
                console.log( 'INFO: Form submit.' );

                e.preventDefault();
    
                // validate
                if( validateEmail( $input.val() ) ) { 
                    var data = {};
    
                    // Prepare ajax data
                    data = {
                        action: 'realhero_subscribe',
                        nonce: ajax.ajax_nonce,
                        data: serializedData
                    }

                    // send ajax request
                    $.ajax({
                        method: "POST",
                        url: ajax.url,
                        data: data,
                        beforeSend: function() {
                            $input.prop( 'disabled', true );
                            $submit.val('Wait').prop( 'disabled', true );
                        },
                        success: function( data ) {
                        
                            if( data.status == 'success' ) {
                                success();
                                console.log( 'INFO: OK!' );
                            } else {
                                $input.prop( 'disabled', false );
                                $submit.val('Submit').prop( 'disabled', false );

                                showNoti( data.msg );
                                console.log( 'INFO: Bad response.' );
                            }
                        }
                    });
    
                    console.log( 'INFO: Email ok.' );
                } else {    
                    showNoti( 'Enter valid e-mail address!' );
                };
            });
        });

});

newsletterForm.php

<aside id="newsletter-form">
    <div>
	    <h1 class="widget-title">Newsletter</h1>
		<div class="widget">
		    <p>Be upddated!</p>
		</div><!--
		--><div class="widget">
		<form id="newsletter" role="form" method="get" class="search-form" action="http://domain.com/">
		    <label>
				<span class="screen-reader-text">E-mail:</span>
				<span class="notification" aria-hidden="true"></span>
				<input class="email-field" placeholder="Type your e-mail" value="" name="ne" type="email">
			</label>
            <input type="hidden" name="na" value="S">
			<input type="hidden" name="nhr" value="<?php echo get_bloginfo( 'url' ) ?>">
			<input class="email-submit" value="Submit" type="submit">
			</form>
		</div>
	</div>
</aside><!-- #newsletter-form -->

style.css

/**
 * Newsletter form
 */
@keyframes appear-nicely {

	0% {
		opacity: 0;

	}

	100% {
		opacity: 1;
	}
}

.appear-nicely {
	animation: appear-nicely 2s forwards ease-out;
}

#wolontariat  #newsletter-form {
	background-color: #24282d;
	padding: 32px 40px;
	margin-left: -40px;
	box-sizing: content-box;
	width: 100%;
	color: White;
	text-align: center;
	position: relative;
}
#wolontariat  #newsletter-form > div {
	max-width: 1000px;
	margin: 0 auto;
}
#wolontariat  #newsletter-form h1 {
	color: White;
}
#wolontariat  #newsletter-form .widget {
	float: none;
	width: 100%;
	display: inline-block;
	margin: 0 0;
	padding: 16px;
	box-sizing: border-box;
	vertical-align: middle;
}
#wolontariat  #newsletter-form .widget p img {
	vertical-align: middle;
}
#wolontariat  #newsletter-form .widget .disclaimer {
	padding: 0 0;
	margin: 10px 0 0 0;
	font-size: .625rem;
}
#wolontariat  #newsletter-form .email-submit {
	min-width: 100%;
	margin-top: 16px;
}


@keyframes vaporize {
	0% {
		opacity: 1;

	}
	100% {
		opacity: 0;
		top: -80px;
	}
}

#wolontariat  #newsletter-form .notification[aria-hidden="true"] {
	display: none;
}

#wolontariat  #newsletter-form .notification[aria-hidden="false"] {
	display: block;
	position: absolute;
	top: -25px;
	left: 0px;
}

.vaporize {
	animation: vaporize 1.5s forwards ease-out;
}