Included in this code is a button that triggers the opening of a fancybox containing a form. Once the form is filled out and submitted, I want the window to close automatically and be replaced by another window displaying a success message. This success message should disappear after a few seconds or if the user clicks outside the window.
$("form").submit(function() { //Update this part
var th = $(this);
$.ajax({
type: "POST",
url: "mail.php", //Update this part
data: th.serialize()
}).done(function() {
$('#alert-massage').fadeIn(500);
alert("Thank you!");
setTimeout(function() {
// Additional actions once the form is submitted
th.trigger("reset");
}, 1000);
});
return false;
});
<div id="modal">
<div class="modal__wrap">
<div class="modal__title">
Contact Me
</div>
<form >
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="kylun-Serg">
<input type="hidden" name="admin_email" value="[email protected]" >
<input type="hidden" name="form_subject" value="popup-form">
<!-- END Hidden Required Fields -->
<input type="text" placeholder="Username" name="Name" required>
<input type="email" placeholder="Email" name="E-mail" required>
<input type="phone" placeholder="Phone" name="Phone">
<textarea placeholder="Message" name="Message"></textarea>
<button type="submit" class="btn">
Send
</button>
</form>
</div>