Disappearing Forms Tutorial for WEBPUS

By Frank

Web site forms can sometimes be confusing to site visitors. Once they click on that submit button, one of two things can happen. They either get left suspended, not quite knowing if the form has been submitted or not, or, if a good web designer has done his job correctly, a confirmation page will pop-up to advise visitors that everything is ok.

In WebPlus10, the redirect feature is used to achieve this very effectively.

But there is another option that we like to incorporate on our web sites, and that is to make the form disappear completely - replacing it with a confirmation message and possibly some instructions on what to do next. To see what we mean, complete the form in our on-line version of this tutorial and submit it. (it will also submit if left blank) The on-line tutorial can be found at the link below:

On-Line version of this Tutorial

The form gets REPLACED by the confirmation message, leaving the visitor in no doubt as to whether the form has been submitted or not.

There are a number of good reasons why this is a good approach to form submission. Firstly, the visitor doesn’t leave the page and get redirected to a confirmation screen. Secondly, there is no need for the visitor to hit a back button or link after viewing the confirmation. And lastly, because the form is no longer visible on the page, the chances of accidental multiple submissions are minimized. Next we show you how to achieve this simple effect in WEBPLUS 10.

 

Create Your Form
 

On a new blank page on your site, create your form. Position the form in the top left corner of the page. If the page where your form is ultimately going to display has a coloured background, you may like to give your form page the same colour background.

On the page properties dialog, make sure that the form page isn’t included in the site navigation.

When the form has been created, make a note of its dimensions. (not the page dimensions)

On the page where you would like your form to appear, insert an I-frame approximately 5 -10 pixels larger than your form in both directions.

Set the properties of the I-frame to point to the form page you just created. This will ensure that the form always pops up when the page is first viewed. You should also have the I-frame display WITHOUT BORDERS and WITHOUT SCROLL BARS.

Next, create a confirmation message on a new blank page - again, making sure the page background colour is the same as on the form display page.

On the page properties dialog, make sure that the confirmation page isn’t included in the site navigation.

Now go back to your form page and right click the form to edit its properties.

On the hidden fields tab add a hidden field named “redirect”. In the value field enter the full URL of your confirmation page. Remember, this URL will be your web site URL followed by the appropriate page name. It would look something like http://yoursite.com/confirmation.html

Now, upload your site and test the form. If you want to test before completing your site, just upload the confirmation page to your web site. You will then be able to use the preview in web browser option to test your form.

You can also create page transition effects to the confirmation page to make the message blend in or out.

Note to X2 Users.

 

As was kindly pointed out to me by a forum member, these instructions are for WP10 systems - the redirect feature is a whole lot easier in X2.

Instead of using the hidden fields option, the action dialog of the form itself gives you an option to redirect without getting involved in hidden fields. If you own X2, use the action dialog to redirect, but be sure to target the same I-frame.

Thanks Don!



Serif Forum link - Disappearing Forms