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.

Setting Up Reply To Line in a Frontpage Form

Friday, December 15, 2006

When you open your FrontPage form mail, you will notice a default "From" address. This is because the form submission is actually coming from your site, rather than the person who fills out the form. The way to get the users email in the Reply to line is to follow the method below.

1. Right click inside the Form proper (the dashed or dotted line around your form).
2. Select "Form Properties".
3. Select "Options".
4. Then "E-mail Results" tab.
5. Under "Email message header:" "Reply-to line:" check "Form field name" and type the field name for your user email exactly as it appears in Form field properties.
6. Save and republish.
7. Now when the email is opened, the form will still be sent by the site, but the Reply to will be the users email.

Setting Up Reply To Line in a Frontpage Form

Friday, December 15, 2006

When you open your FrontPage form mail, you will notice a default "From" address. This is because the form submission is actually coming from your site, rather than the person who fills out the form. The way to get the users email in the Reply to line is to follow the method below.

1. Right click inside the Form proper (the dashed or dotted line around your form).
2. Select "Form Properties".
3. Select "Options".
4. Then "E-mail Results" tab.
5. Under "Email message header:" "Reply-to line:" check "Form field name" and type the field name for your user email exactly as it appears in Form field properties.
6. Save and republish.
7. Now when the email is opened, the form will still be sent by the site, but the Reply to will be the users email.

Multiple Email Tutorial for Frontpage

Wednesday, December 06, 2006

You can indeed send results from FrontPage forms to multiple email addresses. It is a little confusing at first, but once you get the hang of it you will be able to do it in your sleep. Just follow the instructions and this will work. Basically, you are setting up a chain of forms with each submitting to a new email account on a single "Submit" from the initial form.

Although these instructions are for FP2000, they will apply to 98 | 2000 | 2003. This tutorial depends on your ability to build a working form which already submits in email. If you are not well versed in FrontPage forms, go back to the Form Wizard or Custom Form tutorials before starting this tutorial.

Before setting up this form chain. Make sure that the Microsoft FrontPage Server Extensions have been enabled at your website. If you are publishing to your own server, be sure you are set up to send and receive form mail. In the case of a commercial host, although the host may provide the FPSE, they frequently need to be turned on by either your self or your provider. Occasionally they may need to be reset as well. Remember you are publishing forms. This means publish with FP to an http: location, not with FTP.

Create Frontpage Form One

1. I recommend starting with a new page. So open up a new page to get started.
2. To keep things simple, we are going to refer to our first form page as "Feedback".
3. With the new page open, save this page as "Feedback1".
4. Copy or build a new form on this page. Nothing fancy, just a working form. This is only for practice.
5. OK, Now you have a page labeled Feedback1.
6. If you intend to use this form in your site, save your completed version along with your standard page content. Set this form up to go to your primary form address.
7. Set up your form at Feedback1.htm to send to a single address or to a single address and an optional second file if you wish. This is the form your site visitors will fill out.
8. If you are not sending to an optional second file, I recommend using the default _private/form_results.txt in the file area.
9. If you wish your form to be validated, set this up now as well. It should only be necessary to do validation on Feedback1.htm.
10. I would set "No constraints" for all fields in Feedback2.htm.
11. When your form is satisfactory to you, read on.

Create Form 2

1. Create a second new page.
2. Save this new page as Feedback2.
3. The user will not see this page.
4. On this new page, copy and paste only the form and form fields from Feedback1.htm to Feedback2.htm (nothing else, no text no graphics, no nothing!).
5. Double check to make sure your form is still surrounded by the dashed form line, not just the fields.
6. While on page "Feedback2.htm" go to "Form properties". Set the form for the new page to go to a different email address than in Feedback1.htm. I use an address to back up my form mail to a different location.
7. I recommend using the default _private/form_results.txt in the file area for this page. Do not attempt to send to an optional second file from Feedback2.htm. This could warp things.

Create A Web Page

1. Create a third new page.
2. Save this page as "Confirm.htm".
3. Place what ever content you want on this page to signify user confirmation. This will be a normally visible page on your site.

Backtrack to the Form One

1. Open "Form properties".
2. Check to see that your email is going to your primary address.
3. Check your second file results location if you have one.
4. Go to the Confirmation tab and type in or browse to Feedback2.htm. This is the confirmation page for the user form.
5. Double check all options to see that you have them set up properly.

Now Backtrack to Form Two

1. Open "Form properties".
2. Check to see that your email is going to your secondary address.
3. Go to the Confirmation tab and type in or browse to Confirm.htm. This is the confirmation page for the users submission. (thanks for your order/ whatever).
4. Double check all options to see that you have them set up properly.
5. Make sure that Feedback2.htm has no page content other than the form itself. The user will not view this page so don't worry about background or style issues.

Please Note: As you are looking through and checking your "Form properties" you will notice that the magic behind the curtain, has given our forms the "Form Name:" FrontPage_Form1. Michael strongly recommends leaving this alone. If you need to have a handle for your form, do this under the "E-mail Results" tab in the "Subject line". This way you can know which form you are getting in email.

Now save these pages and publish to your site. Before linking to the new pages, make sure you are receiving the results properly. To check if things are set up right, type in http://www.yoursite.com/Feedback1.htm (remember to use upper or lower case, and htm or html, depending on what you used).

If your FrontPage extensions are properly configured, your results should now go to:

• Your primary email account.
• Your optional file if you chose one.
• Your secondary email account.
• On submit, you should be taken to Confirm.htm.

If you are having problems and are sure your site has sent mail in the past, go back through the tutorial steps to make sure you didn't alter something. The first time Michael did this, he had to go back a couple of times to set the fields up properly.

If things are working well, the you have now successfully set up the form chain to allow a FrontPage form to send to multiple email addresses. I have not tried to add to this, yet, but I imagine if you follow the process further with Feedback3, Feedback4, etc. you can add more addresses to your chain. Remember the last link in the chain will have to point to Confirm.htm. Of course you can use another page name. This one is for instruction purposes.

Frontpage Form Validation

Saturday, December 02, 2006

Once again, if this tutorial is your first stop, we are going to be validating fields from our Custom Form Tutorial. Although it is not necessary to start there, it is a more complete walk through of FrontPage form development.

Michael likes to keep validation with FP as simple as possible. One of the things he dislikes personally about running into a validated form, is that they rarely make allowances for things like first initials with a period (which is how he used his first name) or hyphenated names, which a lot of married women use. So the process of choice is K.I.S.S.

We will start by validating a simple click the field and you will see ...


If you have followed closely from Custom Form Tute, you may noticed that Michael just changed T1 to name. Although he am notorious for using capital letters in form field names, it is generally not a good idea to do this. Anyway, T1 has become name.


All we have done here to validate this text box is to check "Required" and set the minimum length to 2. We have also added Name as the "Display name". We have also left the "Data type" set for "No Constraints". Michael used to always set to 3, but some people like Al, don't have 3 letters. So he am tried to remember to revert to 2 for his validation.

Continue this method for all the text boxes on your form. While you are at it, you might want to change the default names to represent the field labels and clarify this in the Display box as well.

Now that our text boxes are validated, we are going to the Drop Down Menu. Double click it to reach validation. So we have this...


Remember we chose Education Level as the label for our DD. We don't however want this option to be chosen. So we check "Data required" and then "Disallow first choice" to insure it isn't a choice. Now our DD is validated.

Now we move on to our Radio or Option buttons.


Start with your first Radio. Fill in the display name as we have here and just check "Data required". Now when you go to validate your next Radio (assuming you followed along), you will see that it already requires data. This is because the share the same Group name. Do however, double click each to be sure that one of them is not selected. This way we can avoid a default choice, requiring a specific input from the form user.

This stuff is easy isn't it?

Ok, check boxes come next. Oops, we can't validate check boxes with FrontPage. Let's skip this for a minute and move on to our Scrolling Text Box.


As you can see, this validates exactly the same as a one line text box. Michael just put 50 as a minimum so they have to type something. If this is an optional comments area, then you might want to skip the validation.

Back to check boxes. Since the checkbox is designed to be a single choice, or multiple choices in some cases, Michael guessed that Microsoft® didn't see a point to requiring validation. There are JavaScripts available which address this need.

You might also notice that Amysticweb really didn't require any specific input to validate a users email. Once again, this is better done with JavaScript.

Although you can't set checkbox validation with FrontPage, you can with JavaScript.

Frontpage Form Properties

Monday, November 06, 2006

If this is your first stop at out site, this page is a continuation of our Custom Form Tutorial.

It isn't necessary to view it first, but as we move on to validation, the fields we are working with come from there.

Now it is time to set the form properties! By setting your form properties, you are telling the extensions how to handle your form input.

Right click in the form (inside the dotted or dashed lines) and select "Form Properties"

Set up your form properties like the example below, except substitute your website email instead of mine. The "File name:" should read something like _private/form_results.txt This could also be _private/form_results.htm either way, direct the save to the _private folder in order to protect the users input.

To create this file if you don't already have it, open a blank Notepad. Go to Save As, naming it like we did oin this case, form_results and direct the save to the _private folder. If you have used a form template such as the form wizard, FP will automatically create a file and place it in _private for you.

For now, leave the form name alone. It is of little importance at this point.


Click on "Options" and change the "File format:" to Formatted text by using the Drop Down Menu as in the example below. If you are sending to .htm location, you might try HTML or HTML definition list as options.


Notice we have kept the check in "Include field names". This isn't absolutely necessary, but it is easier to keep track of input for ambiguous fields.

Now select the E-mail results tab. Make sure your website email is visible and set the Subject line to "Custom Form Results" as in the example below. It is best to use site mail if you have it e.g. webmaster@example.com If not then, try using a Yahoo address. Yahoo mail is compatible with formmail, whereas AOL and some other accounts are not. Of course, if your host offers this option, you can send the results to site mail and have it forwarded to your personal email account.


As you can see above, our site address is showing along with the format set to Formatted text, same as file results. Custom Form Results is showing as the subject line and "Form field name" is unchecked. We will address this later.

If you wish a custom confirmation page, go to "Options" again and choose the "Confirmation Page". Use a site URL e.g. (confirm.htm) or if you want a full URL for an external site, depending on the purpose of your form. Whatever name you use for the custom confirmation page, be sure to create a new page with that same name. The custom confirmation page can be a simple Thank You page or it can be set up to display the users input for viewing or printing. More on this later.


Now click "Saved Fields" and select your preference. The example displays my personal choice. You can leave the "Form fields to save:" area alone. FrontPage automatically selects all fields.


I like to check the Additional info and choose a Date and Time format.

Now when you click OK you will see the infamous "Disk based web" message.


When prompted with a message to remove the email recipient...The answer is "No". The message is simply a reminder that the FrontPage Server Extensions or FPSE are properly installed on the destination server in order for the form to work.

Keep in mind, that you must also use the built in "Publish Web" method to http:// location. To access this go to File >> Publish Web.

Click "No" and save your page.

Frontpage Form Wizard Tutorial

One of the easiest ways to create your user forms in FrontPage is to use the Form Page Wizard.

The tutorial here is generated with FrontPage2000.

Start by opening your FrontPage 2000 program.

Now open one of your current webs for practice. Since we want to publish this form page to the web or your intranet, be sure to develop it in a publishable web.

Go to "File", "New", "Page"


Don't worry at this point about navigation to this page. Just leave everything else alone until we publish and then test the form.

Select "Form Page Wizard"


You will now see the Wizard window. Click "Next"


As you can see now, the window space is blank because we need to select questions. Click on "Add".


From this menu there are a number of selections you can make. Highlight "contact information" and click "Next".


Leave the default checks in place and in addition to these check "Home phone" and "Postal address" then click "Next".


Now click on Add again and select "personal information" leave the default checks in place and in addition, check "Height, Weight, Hair color and Eye color" then click "Next".


You will now see the "Presentation Options" page. Leave this as is and click "Next".


You will now see the "Output Option" page Check save results to a text file and click "Next".


Notice formrslt shows as the file name. FrontPage has just created this file and stored it in the _private folder for us.

Now click "Finish". The wizard will now produce the form on the current page.

Your form should now look like this....Our example here does not include the form border. Yours should show the dotted or dashed form border. This form is for appearances only. It has no form tags, so it doesn't submit.

Please provide the following contact information:

Name
Date of Birth
Sex	Male Female
Height
Weight
Hair Color	Blonde Brown Black Red Gray White
Eye Color	Blue Brown Black Green Gray Violet

 


Preview in browser and hit the submit button. In all likely hood you will see the following in your browser window. It should definitely appear if you use IE, but won't swear to it appearing in other browsers.

FrontPage Run-Time Component Page

You have submitted a form or followed a link to a page that requires a web server and the FrontPage Server Extensions to function properly.

This form or other FrontPage component will work correctly if you publish this web to a web server that has the FrontPage Server Extensions installed.

Click the arrow to return to the previous page.

This is not a bad message. It simply means your form needs to be published to a web server with Front Page extensions properly installed. In fact, to me this is a sign I actually built a form rather than a mucked up combination of form fields instead.

Our next step is to examine the form properties.

Posted by Corey Bryant at 9:08:45 AM in Amysticweb (7) | Comments (0)

Amysticweb

Saturday, November 04, 2006

Some of you might be aware of Michael, aka Amysticweb.  He ran a website that helped users create Frontpage forms.  A few years ago, he emailed me saying his computer crashed and he lost his data on one of his personal websites.  I told him about Internet Archive, and that website saved the day.

A few years ago, he stopped responding on the forums.  And his Frontpage forms website was down, along with his person wrbsite.  I tried to locate the hosting company to pay his hosting bill to get the website back online but unfortunately I could not.  His domain name was automatically renewed so I gave up trying to get his domain name.

Frontpage Forms

I created a category on Loud Expressions just for Michael and tried to gather as much archived date of his Frontpage form website to post in hopes that it helps others, just like it helped me.

Posted by Corey Bryant at 5:51:59 PM in Amysticweb (7) | Comments (0)