JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<section class="subscribe">
<form class="form-wrapper cf" method="post"><input name="email" placeholder="Enter your email here..." /><button id="submitBtn" type="submit">Subscribe</button></form>

<p>&nbsp;</p>
</section>

CSS

.cf:before, .cf:after{
      content:"";
      display:table;
    }
    
    .cf:after{
      clear:both;
    }
    
    .cf{
      zoom:1;
    }
    
    
    /* Form wrapper styling */
    .form-wrapper {
      width: 245px;
      padding: 5px;
      margin: auto;
      display:block;
      background: #444;
      background: rgba(0,0,0,.2);
      border-radius: 3px;
      box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    }
    
    /* Form text input */
    
    .form-wrapper input {
      width: 150px;
      height: 20px;
      padding: 0px 5px;
      float: left;
      font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
      border: 0;
      background: #eee;
      border-radius: 3px 0 0 3px;
      
      }
      
      .form-wrapper input:focus {
        outline: 0;
        background: #fff;
        box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
      }
      
      .form-wrapper input::-webkit-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
      }
      
      .form-wrapper input:-moz-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
      }
      
      .form-wrapper input:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
      }
      
      
      /* Form submit button */
      .form-wrapper button {
        overflow: visible;
        position: relative;
        float: left;
        border: 0;
        padding: 0;
        cursor: pointer;
        height: 20px;
        width: 85px;
        font: bold 12px/20px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #fff;
        text-transform: uppercase;
      	background: #1854C4; /* 1854C4 = Normal Theme Blue Color */
        border-radius: 0 3px 3px 0;
        
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
      }
      
      
    .form-wrapper button:hover{
        
        background: #3875E7; /*3875E7 = Hover color*/
     ...

JavaScript

$(function() {
    $("#submitBtn").click(function (event) {
		event.preventDefault();
		event.returnValue = false;
		var inputEmail = $(".subscribe input[name=email]").val();
		var inputEmailTrimmed = $.trim(inputEmail);
		if(inputEmail == "")
		{
			$(".subscribe p").html("Please enter an email address.").slideDown();
		}
		else if(inputEmailTrimmed == "" && inputEmail != inputEmailTrimmed)
		{
			$(".subscribe p").html("Simply entering spaces won't cut it :)").slideDown();
		}
		else
		{	
			$.ajax({
				type: "POST",
				url: "http://173.254.28.69/~bluraysp/footer_subscribe.php",
				data: {email: inputEmail},
				success: function(data) {
					if (data == "successful") {
						$(".subscribe p").html("Thanks for your interest!").slideDown();
					} else if (data == "already_subscribed") {
						$(".subscribe p").html("This email is already subscribed.").slideDown();
					} else if (data == "invalid_email") {
						$(".subscribe p").html("This email is invalid.").slideDown();
					} else {
						$(".subscribe p").html("Something went wrong. Please try again later.").slideDown();
					}
				},
				error: function () {
					$(".subscribe p").html("Subscription is not available.").slideDown();
				}
			});
		}
        
	});
});