I try to create a basic contact form with PHP and JavaScript where a success message should frontendly replace the actual form after submitting the form.
I have created a form wrapper and a success wrapper and I assume that I should make the success wrapper to be with display:none
and then, after preventDefault()
, sending of the data to my email, etc, the form wrapper should be with display:none
and then the success wrapper should be with display: block
.
<form dir="rtl" lang="he" action="/backend/behavior.php" method="POST">
<div class="prcf_form_wrapper">
<div class="prcf_container">
<?php
include 'form_components/form_header.php';
include 'form_components/form_middle.php';
include 'form_components/form_footer.php';
?>
</div>
</div>
<div class="prcf_success_wrapper">
<div class="prcf_container">
<h2 class="prcf_header_headings">Your message was sent successfully</h2>
<p class="prcf_header_p">
Thank you for your inquiry; I will do best to reply as soon as possible in case of need.
</p>
<a href="https://example.com" id="prcf_homepage" class="prcf_finalization_buttons">Back to homepage</a>
</div>
</div>
</form>