JSFiddle - React, Tailwind, and code Playground

by magnix2k

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <div id="form-outer">
        <div class="box">
            <div>
                <input type="text" name="frm-fname" id="frm-fname">
            </div>
            <div>
                <input type="text" name="frm-email" id="frm-email">
            </div>
            <div>
                <input type="text" name="frm-company" id="frm-company">
            </div>
            <div>
                <textarea name="frm-comment" id="frm-comment" rows="3"></textarea>
            </div>
            <div id="mail-status">
                <button type="submit" name="frm-submit" class="btnAction"
                    onclick="sendContact();">Send</button>
            </div>
        </div>
        <div id="contactMe">Contact Me</div>
    </div>

CSS

#form-outer {
	position: absolute;
	left: 20px;
}

#frm-contact {
	background: #6c8e9e;
	display: none;
	padding: 30px;
}

.demoInputBox {
	border: solid 1px #5f7d8b;
	width: 100%;
	margin-bottom: 25px;
	padding: 10px;
	border-radius: 5px;
	display: block;
}

.btnAction {
	background: #53a5d6;
	border: solid 1px #4286af;
	border-radius: 5px;
	color: #ffffff;
	padding: 5px;
	width: 100%;
	padding: 10px;
	font-size: 14px;
	cursor: pointer;
}

#contactMe {
	width: 350px;
	background: #607d8b;
	display: block;
	cursor: pointer;
	text-align: center;
	padding: 10px 0px;
	font-size: 18px;
	color: #FFF;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

#mail-status {
	height: 40px;
}

#mail-status p {
	border-radius: 5px;
	color: #545454;
	padding: 10px;
	border-radius: 5px;
	display: block;
	font-size: 14px;
	padding: 10px;
	border-radius: 5px;
}

#mail-status p.success {
	background: #c7e0c7;
	border: solid 1px #268c26;
}

#mail-status p.error {
	background: #f7dddd;
	border: solid 1px #dc9d9d;
}

JavaScript

$(document).ready(function() {

		$("#contactMe").on("click", function() {

			if ($(".box").is(":hidden")) {
				$(".box").slideDown("fast");
			} else {
				$(".box").slideUp("fast");
			}
		});
    
    $("#closetMe").on("click", function() {

			if ($(".box").is(":hidden")) {
				$(".box").slideDown("fast");
			} else {
				$(".box").slideUp("fast");
			}
		});

	});

	function sendContact() {
		var valid;
		valid = validateContact();
		if (valid) {
			jQuery.ajax({
				url : "contact_mail.php",
				data : 'frm-fname=' + $("#frm-fname").val() + '&frm-email='
						+ $("#frm-email").val() + '&frm-company='
						+ $("#frm-company").val() + '&frm-comment=' + $(content).val(),
				type : "POST",
				success : function(data) {
					$("#mail-status").html(data);
					setTimeout(ajaxCallback, 2000);
				},
				error : function() {
				}
			});
		}
	}

	function ajaxCallback() {

		var btnHTML = '<button name="frm-submit" class="btnAction" onclick="sendContact();">Send</button';
		$("#mail-status").html(btnHTML);
		$(".box").slideUp("fast");
	}

	function validateContact() {
		var valid = true;
		$(".demoInputBox").css('background-color', '');

		if (!$("#frm-fname").val()) {
			$("#frm-fname").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#userEmail").val()) {
			$("#frm-email").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#frm-email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
			$("#frm-email").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#frm-company").val()) {
			$("#frm-company").css('background-color', '#f7dddd');
			valid = false;
		}
		if (!$("#frm-comment").val()) {
			$("#frm-comment").css('background-color', '#f7dddd');
			valid = false;
		}

		return valid;
	}