Announcement

Collapse
No announcement yet.

Multipage Form Tutorial

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Multipage Form Tutorial

    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";
    }
    }
    ?>




    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 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 “FormPage3”
    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.













    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  • #2
    Re: Multipage Form Tutorial

    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
    The Producer

    Comment


    • #3
      Re: Multipage Form Tutorial

      Sorry navaldesign,

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

      sorry again
      The Producer

      Comment


      • #4
        Re: Multipage Form Tutorial

        No worries. The font is Bank Gothic Medium
        Navaldesign
        Logger Lite: Low Cost, Customizable, multifeatured Login script
        Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
        DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
        Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

        Comment


        • #5
          Re: Multipage Form Tutorial

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

          thanks so much
          The Producer

          Comment


          • #6
            Re: Multipage Form Tutorial

            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
            Ram_Industries
            Robert A. Montgomery
            Ram-Industries@comcast.net
            http://Martech-Inc.biz

            Comment


            • #7
              Re: Multipage Form Tutorial

              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.
              Navaldesign
              Logger Lite: Low Cost, Customizable, multifeatured Login script
              Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
              DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
              Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

              Comment


              • #8
                Re: Multipage Form Tutorial

                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
                Ram_Industries
                Robert A. Montgomery
                Ram-Industries@comcast.net
                http://Martech-Inc.biz

                Comment


                • #9
                  Re: Multipage Form Tutorial

                  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 ?
                  Navaldesign
                  Logger Lite: Low Cost, Customizable, multifeatured Login script
                  Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                  DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                  Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                  Comment


                  • #10
                    Re: Multipage Form Tutorial

                    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
                    Ram_Industries
                    Robert A. Montgomery
                    Ram-Industries@comcast.net
                    http://Martech-Inc.biz

                    Comment


                    • #11
                      Re: Multipage Form Tutorial

                      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!

                      Comment


                      • #12
                        Re: Multipage Form Tutorial

                        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
                        Kind Regards
                        Rob
                        www.gnjgf.co.za
                        www.oryan-projects.com

                        Comment


                        • #13
                          Re: Multipage Form Tutorial

                          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.
                          Navaldesign
                          Logger Lite: Low Cost, Customizable, multifeatured Login script
                          Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                          DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                          Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                          Comment


                          • #14
                            Re: Multipage Form Tutorial

                            Thanks for replying so promptly.

                            I was also thinking of another option in that by submission it does a screen dump to a .pdf file which is then delivered as an email for my administrators receipt and can then be printed as a hard copy.

                            Obviously the data capture protion would need to be handled as you suggest.

                            Regards
                            Rob
                            Kind Regards
                            Rob
                            www.gnjgf.co.za
                            www.oryan-projects.com

                            Comment


                            • #15
                              Re: Multipage Form Tutorial

                              I'm afraid that this can't be done. Php can convert a file (with text, images etc) in PDF, but is has to be a FILE, not a screen. What can be done, as told you, is that the script that processes the info, will send you an email with a link: as soon as you click on that link, a page - excactly the same, or anyway, very similar to the original form - will come up on your screen, and you will be able to print it.

                              Another approach - a bit complicated - would be that of creating a html file like the welcome mail you received from VH, with all the info included. This, would then be emailed wherever you want, and then it could be printed. I beleive that the online solution is the simplest.
                              Navaldesign
                              Logger Lite: Low Cost, Customizable, multifeatured Login script
                              Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                              DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                              Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                              Comment

                              Working...
                              X