Form & Thank-you on same page!

Bookmark with

StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live

Sponsors

Introduction

I was asked recently how I have a feedback form on my page that when submitted leads a thank-you message on the same page. This guide shows you how to do this simple but effective query string "trick" which has multiple applications.

How this works is we set a query string to a particular "keyword" then when the page loads the SSI reads the "keyword" and displays the content specified for that keyword.

I'll break it down into steps with an example to explain it better.

Form and Thank-you page

We have a basic HTML form submitting whatever information you require located on contact.shtml. We use a hidden input tag to specify the redirect to the thank you page after form submittal. The "thank-you" page should also be contact.shtml but we add a query string containing our "keyword":

<input type="hidden" name="redirect" value="contact.shtml?submitted">

The SSI then reads this query string and IF the query string IS submitted it will display your thank-you message. (If you check your browser address bar you would see http://domain.com/contact.shtml?submitted) Check this example:

IF Query String IS submitted
» display thank you message here «
Else
» display HTML Form here «
END

Code

The correct syntax for this example would be (remember the form is in contact.shtml) :

<!--#if expr="$QUERY_STRING = 'submitted'" -->
<p>Thank you for your submission.</p>
<!--#else -->
<form method="post" action="feedback.php">
<input type="hidden" name="redirect" value="contact.shtml?submitted" />
.......
</form>
<!--#endif-->

You can add any number of "steps" in this process once you get the code right. At the time of writing this I use two steps as shown below for a site feedback form:

<!--#if expr="$QUERY_STRING = 'submitted2'" -->
<p>Thank you for your submission.</p>
<!--#elif expr="$QUERY_STRING = 'submitted1'" -->
<!-- THIS IS FORM 2 -->
<form method="post" action="feedback.php">
<input type="hidden" name="redirect" value="contact.shtml?submitted2" />
.......
</form>
<!--#else -->
<!-- THIS IS FORM 1 -->
<form method="post" action="feedback.php">
<input type="hidden" name="redirect" value="contact.shtml?submitted1" />
.......
</form>
<!--#endif-->

It's not entirely practical that you receive 2 form submissions but it still has many obvious uses. Be imaginative!