Expression® Web Design
| 
| 
Custom Form Tutorial
Thursday, November 01, 2007
For the record, although you will see separate links for form properties, form field validation and custom confirmation page, they will all follow the process from this tutorial and use the same form fields.Let's build a custom form without the Form Page Wizard
I started building my forms freestyle before I ever discovered the Form Page Wizard. I found building forms to be frustrating, aggravating and at some times even pointless. I knew absolutely nothing about forms and like a lot of people, put together a form field such as a text box and a submit button and thought that I had a form.Wrong.
After a great deal of difficulty, I finally got a handle on things. To help you avoid some of the frustration I encountered, I put this site up.
So, let's get started.
Remember to save your page after every few form field additions.
Begin by opening a new page. Make sure your new page is in a website you have published. If you are unsure about starting a web, to start one go to File >> New >> Web
Place your cursor in page view where you wish the form to appear.
We are using FrontPage 2000 to build our form, but the concept is the same for FP 2K, 2002 and 2003. Our intent here is to assist you in building a form that will submit in email and optional file.
My preference is to work with my forms inside a borderless table set to 70-80%. You might then also nest a 2 column table inside this one. set also to 70-80%. The left cells for the form labels e.g. Name, Email etc. For this example, I will be skipping this process.
Go to "Insert", "Form" and then select "Form" again from the expanded menu as in the following example. While your cursor is still in the form, hit enter a couple of times to give yourself some working room.
This will give you what you see below.
Depending on which version you use, you will see either a dashed or dotted line surrounding the Submit and Reset buttons. This is the form surround. If you take a look at the HTML/Code view, you will notice the beginning and ending tags. These are represented in page view by the dashed/dotted line. If you form fields and buttons are not inside the surround, then they will not be part of the form.
Now let's place the following list of labels inside the form.
Name:
Address:
City:
State:
Zip:
Phone:
Level of education:
Your Favorite Color: Red Yellow Blue Green Black Purple Pink
What pets have you had in your life: (select all that apply) Dog Cat Bird Fish Gerbil Hamster Mouse Reptile
Tell us about your most embarrassing moment:
Now we have this. You will see your labels are butted up to the left margin.
Now place your cursor after Name and go to "Insert", "Form" and select "Text box".
The text box should now appear after Name. You will do the same for Address, City, State, Zip and Phone. Resist the temptation to copy and paste the Text box you just inserted by Name, as this will result in multiple fields with the same name and mess up your results. Use the Insert function to place a text box next to each of these items.
When you have finished this, take a look at the form field properties of each by double clicking inside the text box itself and selecting "Form Field Properties" from the menu.
You will see by checking the field properties of each, that Name is T1, Address is T2, City is T3 etc. This was done automatically by FrontPage as you were adding the components. If you had copied and pasted the first field over again instead of using Insert, they would all be T1 and the results would be jumbled together. Since Name, Address, City etc. are obvious responses we will not do anything to the field properties. These can now be changed by highlighting T1, T2 and changing them to name, address etc.
Now place your cursor after level of education, go to Insert, Form and select "Drop-Down Menu".
The blank menu should now appear. Then we go once again to "Form Field Properties" by double clicking inside/on the drop-down menu field. You will see the following:
Hit the Add button, Type Education Level into the "Choice" text area, de-select "Specify value" and for the "Initial state:" check "Selected". Now when viewed, the menu will display "Education Level" instead of one of our choice options. If you wish, while you are there, you could change D1 to education_level. Killing two birds with one stone
Now, one at a time we will add the following items (in this order)
GED, High School, Some College, Associates Degree, Bachelors Degree, Masters Degree and PhD
Here is the example for GED. In these new additions, check "Specify Value: and check also "Not selected".
Ok, lets move on to Favorite Color. Place your cursor in front of Red, go to "Insert",
Follow this process until you have all of the additions. If you wish, switch to preview to see your menu selections. Education Level should be the one appearing first, if you followed the instructions correctly.
"Form" and select "Radio Button".
Only do this for Red.
Now, remember when I said not to copy and paste?
We are going to ignore this rule for favorite color.
I want you to copy the Radio Button in front of Red and insert it in front of the remaining colors. By doing this all fields will now be R1. We are doing this because we want a single choice form this group of choices. If we subsequently added another group with a single choice following this, we would want it to be R2 or same name for all choices.
Of course you could use names like favorite_color, favorite_food instead of R1 and R2. If the choice is obvious when I receive the results, I stick with the default. In this case I chose favorite_color. See Below.
Reminder, again: Be sure to separate words with underscore rather than spaces.
I will likely repeat this again. This rule applies to field names, Group names, page names, image names etc.
Now, right click each button and name the value the same as the color choice. In this case, our Group Name will be favorite_color. Then label them Red, Yellow, Green respectively as the Value. By naming the Group the same for each radio, we limit the user to a single choice.
Now Insert a Check box before each of the pet selections by going to "Insert", "Form" and choose "Check box" from the expanded menu. If you do not see Check box immediately, expand the menu. By using insert for each choice, we allow our user to choose more than 1 pet from the category. So although you could leave these C1, C2 etc, I chose to use the Name and Value the same.
One last field to add and this is a Scrolling Text Box or Text area if you will.
Now place your cursor after moment: , hit enter and go to "Insert", "Form" and select "Scrolling text box".
Let's change the size of the Scrolling text box as in the example below.
Just a note here: Generally speaking, no matter where you place your Text Areas in your form, they will all appear at the end of form results when you receive the email. Don't fret, it is just a FrontPage idiosyncrasy.
Now your form should look like this if you followed along closely.
