JSFiddle - React, Tailwind, and code Playground
by Fábio Silva
HTML
<form id="contact" action="">
<input type="text" name="foo" />
<input type="text" name="bar" />
</form>
<button id="btnSubmit">Submit</button>
<button id="btnShowForm">Show form again</button>
CSS
#btnShowForm
{
display: none;
}
JavaScript
$("#btnSubmit").on("click", function () {
$("#contact").fadeOut("fast", function () {
$("#contact")[0].reset();
$('#btnSubmit').hide();
$(this).before("<p id='msg'> <strong>Success! Your request has been sent. We will respond to it as soon as possible. </strong></p>");
setTimeout(function () {
$('#msg').fadeOut();
$("#btnShowForm").fadeIn();
}, 3000);
});
});
$("#btnShowForm").on("click", function () {
$("#contact").fadeIn();
$("#btnSubmit").fadeIn();
$(this).hide();
});