Preventing form resubmission on contact form plugin

Question

I've built a "get a quote" plugin for a client; basically a contact form with some extra fields and and some math.

This form is embedded in a landing page and upon submitting it is replaced with a graphic that says "Thank you, we'll be in touch with a quote soon".

For that I use the following structure:

<div>
  <?php if( !isset( $submission_message ) || $submission_message == '' ): ?>
    <?php include('form.php'); ?>
  <?php endif; ?>
  <?php if( isset( $submission_message ) || $submission_message != '' ): ?>
    <div>
      <h1>Thank You!</h1><br/>
      <p><?php echo $submission_message; ?></p>
    </div>
  <?php endif; ?>
</div>

I assumed that bringing in the contact form via the include statement would turn off the form-resubmission issue, but it didn't.

I did some research and found out that I'd have to implement a post/redirect/get pattern, but I would like to avoid a full redirect, i.e. avoid sending the user to a completely different page. Instead I want to hide the form and display the "thank you"-message instead.

I've seen this implemented on other websites, but have no idea how to continue here.

Answer 1

You can setup a wp_nonce_field to act as a single use token. You can then wp_verify_nonce to make sure the action requested matches the token.

A more ideal way is to just use an AJAX solution and submit + respond using javascript. That will allow you to stay on the page and show/hide elements required without needing the server to re-render the page.