How to replace a contact form with a success message?

JavaScript
1

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>
2

Your assumption is sound. I would have put your prcf_success_wrapper div outside of the form element, but should work either way. Get each div using their class names, and then simply toggle one to hide and the success to show (Added link below for that piece).

Use the form’s submit event (link below as well) to kick off the hide and show of the elements.

Show us what you have created if you still have issues. :slight_smile:

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.