Creating Custom Formbuilder Results Page

Here are the basic steps for creating a custom page that your visitor is sent to after they have clicked the 'Submit' button on your form.

There are 2 types of custom pages that you can create
1. A simple page that will just output the details your user has entered into your form.
2. A page that matches your current layout.

 

The simple page is very easy to create, the more advanced custom layout requires a little more effort and time but it does make your site look much more professional once your visitor has submitted their form.

 

Simple Custom Results Page

Start Formbuilder

All you need to do to make your results page is click the 'Configure Form Settings' icon on the right of your screen, or from the top menu click on 'Edit' and select 'Form Settings'.

You should now see the 'Form Settings' box appear, now click the 'Form Submission' tab, click the radio button next to 'Create a Custom Page'.

Now copy the code below and paste it into the 'Custom Page Contents' box as shown in the image below (the text in red is only so that it stands out more). Change the link at the bottom to what you require, this is to give your visitor a way of getting back to a page of your choice.

Assuming you have already created the fields in your form and set all other required settings, you can now save your form and upload it to your web site.

 

<h1>Here is what you have Submitted </h1>
<p>&nbsp</p>
<p>$form_results </p>
<p>&nbsp</p>
<p align=center><a href="http://www.domain.com/index.html">Home </a> </p>

 


 

Custom page that matches your current layout

You can go one step further and have Formbuilder show the submitted results in a page that matches your current site layout.
While the following method will work with most layouts, some of you with more complex pages may have to do a bit of tweaking but anything is possible.

Below is an image of this sites layout and what I want to do is have the submission results displayed where the purple shading is.

 

Full page

 

This page is built using a css style sheet with all content placed within Div tags, no tables are used at all making it very easy to edit. If your page is built using tables then you must take extra care which cell of your table you edit.

I open my offline page in my html editor and scroll down the code until I come to my H1 heading tag, 'Coffeecup Software Help', you can just make it out at the top of the shaded area. I am going to keep this and change it to something like 'Here is what you have Submitted'.
Now I need to remove the rest of the content behind the shaded area and replace it with something new. You may want add a paragraph something like ' Thankyou for using our Contact Form, we will reply as soon as possible', the choice is yours. Next I want to add the code to display the results:-

 

<p>&nbsp</p>
<p>$form_results </p>
<p>&nbsp</p>

 

 

All I need to do now is save my offline page to something like 'Formbuilder-template.html', by doing this I will be able to easily edit it should I wish to change the look of my results page.

The next thing is to select all the code in your editor, press CTRL C to copy it or right click your mouse button and select copy, whichever you are used to.

Start Formbuilder to create a new form, if you already have one created, open that.

Click the 'Configure Form Settings' icon on the right of your screen, or from the top menu click on 'Edit' and select 'Form Settings'.

You should now see the 'Form Settings' box appear, now click the 'Form Submission' tab, click the radio button next to 'Create a Custom Page'.

Now paste the code you copied earlier into the 'Custom Page Contents' box as shown in the image below.

Assuming you have already created the fields in your form and set all other required settings, you can now save your form and upload it to your web site.

 

Custom page

 

Add a Print Button to your page.

You could go a little further and add a Print Button to your results page by adding the code below for your visitor to keep a record of their submission, it does the same as clicking the 'Print' button from the browser toolbar.

 

 

<script type="text/javascript">
if (window.print) {
document.write('<form> '
+ '<input type="button" name="print" value="Click" '
+ 'onClick="javascript:window.print()"> To Print this page!</form>');
}
</script>

 

 

Other Walkthroughs

Adding Anchor Bookmarks to a VSD Page
The idea of this page is to show as easily as possible how to add bookmark links into a page created with VSD. Ideal if you wish to create a Question and Answers page.

 

Creating Custom Google Sitemap Page
How to add a customised Sitemap Page.

 

Back to home page