Multipage Form Tutorial

navaldesign · #1 07-27-2006, 06:12 AM

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 “Form page1”.
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 “Form Page2”

Set the Action in “formpage3.php”

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:

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 “Form Page3”
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.

ceo · #2 07-30-2006, 10:17 PM

Hi, somebody can explain me the system in spanish please.

Thank you

Nite Producer · #3 07-30-2006, 10:24 PM

Andy,

I will ask you a question out of this subject if you can answer me please, would you tell me what's the name of that font you are using in the head line of the page?

Thanks

Nite Producer · #4 07-30-2006, 10:28 PM

Sorry navaldesign,

it's been a while I'm confused between you and Andy, I always get you mixed,

sorry again

navaldesign · #5 07-30-2006, 10:45 PM

No worries. The font is Bank Gothic Medium

Nite Producer · #6 07-30-2006, 11:00 PM

Thanks navaldesign, "no worries" - that's aussie hehe

thanks so much

Ram_Industries · #7 08-12-2006, 05:49 PM

Naval Design:

In this tutorial about multi page forms, I noticed on the first form you have a date / ip configuration box.

How is this section created so as to have the same information placed on a multi page form as you have shown here.

Date = 03/17/06 or what ever is needed.
IP Address = Person sending the multi page form.

Thank you

Ram_Industries
Robert A. Montgomery
http://Martech-Inc.biz

navaldesign · #8 08-12-2006, 07:07 PM

It is quite simple, but you need a couple of lines in php, and of course, the page has to be saved as php and not as html.

Insert two editboxes (withour form, just the edit boxes) in your page, as in the picture bellow. Double click the first one (for the Date) and, as initial value, give it:
"<? echo(date("l jS F Y, g:i A")); ?>"

Do the same thing for the second (the IP address) , and as initial value give it: "<? echo $_SERVER['REMOTE_ADDR'];?>"

Of course, if you don't want the editboxes, you can simply insert two small html boxes in your page. In the first one, paste the date code: <? echo(date("l jS F Y, g:i A")); ?>

and in the second, the IP code: <? echo $_SERVER['REMOTE_ADDR'];?>

Move the boxes wherever you want them in your page.

Remember that in both cases, the page must be published as php.

Ram_Industries · #9 08-14-2006, 04:00 PM

NavalDesign:

After I created the second form page2
I followed the details as for page 3 the form did appeared after I right clicked, instead it gave me the HTML page itself

Set the form name in “Form Page2”

Set the Action in “formpage3.php”

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:

Instead the HTML box itself appeared!!!!!

Ram_Industries

navaldesign · #10 08-14-2006, 04:10 PM

The HTML box appeared ? Please provide the URL of the page. And in my post the correct is "Page Properties". I have edited it. However, have you changed the page extension to be php when published ?

Ram_Industries · #11 09-14-2006, 12:57 PM

Made sure php was checked and still appears in html...

Not a major problem, since been adding a few extra items to the form.

Creating a multiple page that when filled improperly sends out a notice of the error.

Such as an un-authorized notifier based on the individuals purchase.
Or the customer once proper information is verified opens the requested page.

Many items many pages that will be opened according to the customers level of membership.

I will get this all set up one year.

Ram_Industries
Robert Montgomery

Michael73 · #12 10-25-2006, 07:21 PM

Hi guys! I hope so it gone be help to finish yours forms! Wished to add simply George (by the way with its help on other page!!:)) ---that it had under MAIL SCRIPT!!! Thanks George ---I apologize for that, that I could not find it ---but it was not simple to find it!! Next time I shall be closer!!! Mike
Important Note:

Although the above multimedia tutorial mentions the use of the "mailto:" as form action, WE DO NOT RECOMMEND this type of processing of the form info.
This is because this method, depending on your email client (Outlook Express or other) settings, MAY FAIL to process the info and send the email, and will also give Privacy warning messages to your visitor. We recommend the use of a PHP script instead.

September 30 2006 update: An advanced script, with many additional features and built in security measures, can be found at the Advanced BlueVoda Form Processor thread. You may find it interesting!

The below is an example of PHP script you may use for processing your forms data. Please follow the instructions that follow to the letter. Please note that this is only an example script, that can be customized to better suit your needs.

Instructions:

1) Lets say you create a form using BlueVoda and you name the page that the form is on "contact",
You can name the page anything you like but for this example lets say you name it "contact".

The full URL of the link of your form page should be the below....www.YourDomainName.com/contact.html

The form page may have a look like the following image:

Change the form properties (in BlueVoda) to:

Action: action.php
Method: POST
Encoding Type: multipart / form data.

To accomplish this, double click on your form, and the following dialog box will appear:

Just type in the above, as shown in the image.

Save and publish.

2) Now let’s create a “ Thank you “ page, where the visitors will be redirected after the form submission. We shall also put in this page, the necessary code that will process the info sent by the form and will send the email with the info in your email address.

Let’s start creating the page in BlueVoda. Add also your menubar, so the visitors can go on from there to navigate your site.. It will look like the following image:

Now, click on Page Properties, and select the extension php for your page when published.

Now, copy the following code (just highlight here, righ click, and choose "Copy" from the menu that will open up):

Quote:
<?PHP
$email = $HTTP_POST_VARS[email];
$mailto = "order@example.com";
$mailsubj = "Enter Your Subject Here";
$mailhead = "From: $email\n";
reset ($HTTP_POST_VARS);
$mailbody = "Values submitted from web site form :\n";
while (list ($key, $val) = each ($HTTP_POST_VARS))
{
if ($key!="submit")
{
$mailbody .= "$key : $val\n";
}
}
mail($mailto, $mailsubj, $mailbody, $mailhead);
?>

Open the Page html.

You do this, by rig***licking anywhere in a blank space of your “action” page, and selecting “Page HTML”

Click on “Inside Body Tag”, as shown in the following image:

and paste the code in the window.

While you have this window open, change the part in blue of the above code with your actual email address, and the actual Email Subject.

Save your page as “action”. When it will be published, it will automatically be published as “action.php”.

3) Now publish your “action” page as you would do for any normal page. Only take care to publish it in the same directory where you have published your “contact” page.
Please note that the script will only work after you have published.

Congratulations! You are done! Test your form. You should receive the email with your form info in it, in your email inbox.

Troubleshooting

Make sure that all the fields in the “contact” page have their own names. BlueVoda by default assigns the fields names like T1, S1 etc. So if more than one fields have the same name, f.e. T1, you will only receive one value.

The above script is a generic one, which means that it will work with as few or as many fields you have in your form.

The email field MUST be called “email”, otherwise the script is unable to recognize the visitor’s email as such.

In order to receive clearly titled values, we suggest that you name your fields with a clear name, f.e. “First_name”, Last_name”, “comments” etc. Use underscores to separate the words, the same way you do when naming BlueVoda pages. However, you can use uppercase letters.

Do not insert any other html or php code in the “action” page. It could cause conflicts resulting in errors.

__________________
VodaHost
Your Website People!
1-302-283-3777 North America / International
(0044) 020 8816 8319 / UK

Military Ranking System Explained

Click Here to take the royal VodaHost Tour
Click Here for the VodaHost Help Centre & Tutorials
Got a question? - Try a forum search! Available at the top of every page!

Rob (SA) · #13 11-21-2006, 04:48 AM

Hi "Naval",

From the postings you seems to be the genius on forms - well done.

I have recently started building a site and have forms in itthat members fill in.

Some of our requirements are that it must send the info back as it is presented on the form page. Currently it only sends/ submits the info in the field boxes. How do I fix this?

We would like the data submitted to be captured in an excel spreadsheet for manipulation later. Is this difficult and how does one get to do that without website knowledge?

I hope you can help.

Kind Regards
ROb

navaldesign · #14 11-21-2006, 05:07 AM

If you mean the formatting of the text message that you receive, a basic formatting can be done, by creating a custom made script. So the message arrives to you with your labels, formatted in a certain order etc. However, there is only one way to have excactly the same look, would be that of somehow storing the info sent (either in a database or a file) and then, have on your site, a page, whith excactly the same format of your form page. The info in the boxes will be retreived from the file (or database) and automatically placed in the relevant boxes.

As for the excel file: yes, you can have one automatically created, and each new submission gets added in the file. When you need the latest (more complete, with all the records) file, you simply download it from your site.
Here again, the Database solution is best. All the data is stored in the website Database, and you can have lots of browsing, categorising and exporting features. You will also be able to export in most of the commonly used formats, and download the exported file ion your desktop for further manipulation.

Unfortunately, these things require knowledge in order to create the application as required. If you are interested in having someone do it for you, contact me.