JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Begin Mailchimp Signup Form -->
<div class="mailchimp-ajax-form-aumkar" id="mc_embed_signup">
<form action="https://elementsfitnessstudio.us20.list-manage.com/subscribe/post?u=7475cc8f822bc92239f48cfbc&amp;id=9e6a124a0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate email-newsletter-form" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
<div class="mc-field-group">
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email*">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c56ce15f4abb171e99a32fb7f_ef48a9f2f0" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button newsletter-submit-btn"></div>
    </div>
</form>
<div class="success-msg">

</div>
</div>

JavaScript

jQuery(".newsletter-submit-btn").on("click", function( e ){
	
  	var mailchimpurl = 'elementsfitnessstudio.us20.list-manage';
    var mailchimpuid = '7475cc8f822bc92239f48cfbc';
    var mailchimpid = '9e6a124a0d';
		
		jQuery.ajax({
			url: 'https://'+mailchimpurl+'.com/subscribe/post-json?u='+mailchimpuid+'&amp;id='+mailchimpid+'&c=?',
			data: jQuery('.email-newsletter-form').serialize(),
			dataType: 'jsonp',
    	contentType: "application/json; charset=utf-8",
			success: function(data){
      console.log(data);
      if(data.result != "error"){
      //redirect
      }
      else{
				jQuery('.success-msg').html(data.msg);
        jQuery('.success-msg').removeClass().addClass('success-msg');
        jQuery('.success-msg').addClass(data.result);
}
			}
    });
    
    e.preventDefault();
		
});