Tweet
This tutorial will show you how to create a multipage Form in BlueVoda.
Multipage forms are used when the info required by the visitor is too much to get in a single page, or it is divided in different logical groups.
A multipage form will also allow for a beautiful layout.
This tutorial stands on the hypothesis that you are already familiar with simple BV forms, as well as with the relevant php script that is needed to process the form info and send the email in your inbox. If not, please first visit BlueVoda Forms Tutorial Part 1
Ok, lets start building our multipage form. It will consist of 3 pages. We shall name our pages “formpage1”, “formpage2”, and “formpage3”
The first page is a simple BV form. It will look like the following image:
We have named the first field “email” because if you use our generic processing script, the one provided in BlueVoda Forms Tutorial Part 1, the visitor’s email field MUST be called “email”.
Ok, now let’s set the form properties correctly.
The form name is “Formpage1”.
The action is set to be “formpage2”
The encoding type will be “multipart / form data”.
The method is set to “POST”.
So double click on the form, and the following dialog box will appear:
Just look at the red arrows, to see what you must fill in.
Setting the form action in “formpage2.php” makes the form send the info to the second page.
As a good rule, give the Submit button value “Page 2”, so it will remind the visitor that he is going on to Page 2. You MUST name your submit button “submit”.
So save your page as “formpage1” and publish it. It will be published as “formpage1.html”
The full URL to your form will be: http://www.yoursite.com/formpage1.html
The second page if our form is built more or less the same way for the visual part. However, there are substantial differences regarding the order we put our elements in the form.
First, create the page layout with your header. Then, drag and drop the form in your page. At this point, you have a page that looks like the next image:
Please note that in this example, we have filled our form with a light cyan colour, to make it more clear.
Now we need to place in our page a piece of code that will capture the info sent by the first page. So when we will submit this page, ALL the info, both that of the first page, as well as the info of the second page, will be sent to the third page.
To accomplish this, we will use the following piece of code in php:
<?php
foreach($_POST as $key=>$value){
if ($key!="submit"){
$value=htmlentities(stripslashes(strip_tags($value )));
echo "\t<input type=\"hidden\" name=\"$key\" value=\"$value\">\n";
}
}
?>
Multipage forms are used when the info required by the visitor is too much to get in a single page, or it is divided in different logical groups.
A multipage form will also allow for a beautiful layout.
This tutorial stands on the hypothesis that you are already familiar with simple BV forms, as well as with the relevant php script that is needed to process the form info and send the email in your inbox. If not, please first visit BlueVoda Forms Tutorial Part 1
Ok, lets start building our multipage form. It will consist of 3 pages. We shall name our pages “formpage1”, “formpage2”, and “formpage3”
The first page is a simple BV form. It will look like the following image:
We have named the first field “email” because if you use our generic processing script, the one provided in BlueVoda Forms Tutorial Part 1, the visitor’s email field MUST be called “email”.
Ok, now let’s set the form properties correctly.
The form name is “Formpage1”.
The action is set to be “formpage2”
The encoding type will be “multipart / form data”.
The method is set to “POST”.
So double click on the form, and the following dialog box will appear:
Just look at the red arrows, to see what you must fill in.
Setting the form action in “formpage2.php” makes the form send the info to the second page.
As a good rule, give the Submit button value “Page 2”, so it will remind the visitor that he is going on to Page 2. You MUST name your submit button “submit”.
So save your page as “formpage1” and publish it. It will be published as “formpage1.html”
The full URL to your form will be: http://www.yoursite.com/formpage1.html
The second page if our form is built more or less the same way for the visual part. However, there are substantial differences regarding the order we put our elements in the form.
First, create the page layout with your header. Then, drag and drop the form in your page. At this point, you have a page that looks like the next image:
Please note that in this example, we have filled our form with a light cyan colour, to make it more clear.
Now we need to place in our page a piece of code that will capture the info sent by the first page. So when we will submit this page, ALL the info, both that of the first page, as well as the info of the second page, will be sent to the third page.
To accomplish this, we will use the following piece of code in php:
<?php
foreach($_POST as $key=>$value){
if ($key!="submit"){
$value=htmlentities(stripslashes(strip_tags($value )));
echo "\t<input type=\"hidden\" name=\"$key\" value=\"$value\">\n";
}
}
?>
What does that bit of code do? I will put the comment excactly as i copied it (as well as the code) from the site http://www.apptools.com/phptools/multipage.php :
" If you were to place the above code between your opening <form> tag and the closing </form> tag, it will look at all values received from the prior page, strips out any HTML tags, replaces any character entities with their appropriate code and writes them to hidden inputs in the current form. It will skip a value of "submit" so it won't duplicate your submit button. If you name your submit button something other than "submit", you should change that bit in the code."
It is important however to precise that this piece of code should be placed BEFORE any of your fields.
So,before you start placing your fields, drag a HTML Box in your form area. This box can be as small as you want. Size is not important.
Copy the above code. Double click the HTML box, and the following window will open:
Paste the code in the window. Click ok.
Now go on and place the rest of the form fields and elements.
Take care NOT TO NAME your fields with the same names used in Page 1. Each field must have a unique name.
Give the Submit button value “Page 3”, so it will remind the visitor that he is going on to Page 3.
You MUST name your submit button “submit”.
Let’s set correctly the form properties. Double click on the form, and the following dialog box will appear:
Set the form name in “FormPage2”
Set the Action in “formpage3.php”
Set the method in “POST”
Set the method in “POST”
Set the encoding in “multipart / form data”
This way the form will send the info to the third page, formpage3.
Now, we need one more step before we can publish.
Our page has php code in it. To make sure that the server will execute this code, we must publish our page as .php. To accomplish this, right click anywhere in a blank space of your page, and from the menu that will appear, select “Page Properties”. Click on that, and the following dialog box will appear:
Now, we need one more step before we can publish.
Our page has php code in it. To make sure that the server will execute this code, we must publish our page as .php. To accomplish this, right click anywhere in a blank space of your page, and from the menu that will appear, select “Page Properties”. Click on that, and the following dialog box will appear:
In the field “File extension” select php from the dropdown list.
It is now clear why we had set the action of our FIRST page, in “formpage2.php”
Click ok, save the page as “formpage2” and publish it. It will be published as “formpage2.php”
Go on with the third page, following exactly the same steps.
- Create the page layout.
- Drag a form in your page. Give it the desired dimensions.
- Drag a HTML box and paste in it the php code given above.
- Add the form elements, each named properly
- Change the form properties. (set name, method, action and encoding type)
- Change the page properties (set php extension)
At this point, since this is our last page, we need to send all the info to the processing script page. We will suppose that it is called “action.php”. Look at BlueVoda Forms Tutorial Part 1 how this script is made.
So, set the form properties as in the following image:
Set the form name in “FormPage3”
Set the Action in “action.php”
Set the method in “POST”
Set the encoding in “multipart / form data”
Set the Action in “action.php”
Set the method in “POST”
Set the encoding in “multipart / form data”
Now, also change the page properties, setting the file extension in php, as done before for page2.
Save the page and publish it. It will be published as “formpage3.php”
Prepare and publish your “action.php” page, which is also your “Thank you page”. Have a look at BlueVoda Forms Tutorial Part 1 how this script can be made.
Congratulations! You’re done.
Test your form and you should receive in your email all the titles and the values of the fields.
Comment