Forms

Creating a "mailto:" Form

As you may have heard, when it comes to web pages, "content is King."  However, there will be times when you may want your visitors to wear the crown and give you the information or feedback.  We achieve this with forms.  Lucky for us (and your visitors), forms filled out on the computer are not nearly as painful as those you might find at the doctor's office.  This means you are more likely to get people to take the time to type in the data.  Whether you are selling shoelaces or conducting an on-line survey, forms help you do the job right. 

Forms can and often do add complications to our life and creating them can be even more complicating.  Lucky for us we have NetObjects Fusion and this tutorial.  We also have a Response-O-Matic tutorial and a link to the website Response-O-Matic.com .

In this lesson, you'll learn how to create a "mailto" form.  With Mailto's, no extra programming is required.  Each time visitors submit their form, you will receive an e-mail message with the data they entered into the form - sweet and simple.

This lesson is going to teach you how to make the following form:

Name: Please describe the product What color do you want? Midnight Blue Morning Green Afternoon Glow Select your size small medium large What else would you like? cake cookie

 

So, let's get to stepping and work our way up the stairs in good form.

1

  
  Creating a container

In order to create a form, you need to be in Page view.  So, if you're not there - then do the obvious.

Go to Page view.

Okay, the first step to good form (outside of eating cake), is to create a container for your form. 

Start by clicking on the Form Area button located on the Standard Tools toolbar.

  Form Area Tool

Your mouse pointer will turn into a crosshair. 

Now click and drag to mark off an area on your Layout where you want your form to be.

Don't worry too much about the position or size, you can always move it and/or resize it later.  After you have done that, a Create Form box will appear.

You now have 4 options to choose from.  Fusion defaults to the Layout Region selection.  Why?  Because the layout region is the most flexible.  Why? Because not only do you have full control over the formatting of the form, but you can also add multiple layout regions to create multiple forms on the same page.

Click OK.

The following three things should have happened after you clicked OK: 

1.  Your form container appears.

Grab and drag the handles to stretch the box to your desired width and height.  Use the example at the top of the page for reference.

2. Your Properties palette should change to the Layout Region palette as seen below:

Okay, now take a closer look (bottom left) at the Layout Region Properties palette.

You will notice that the "Layout Region is a form" check box is checked.  Now you might be wondering - couldn't I have just made a layout region and then checked that box?  The answer is "Yes" and it works with text boxes too.  With Fusion, there is more than one way to eat a cake... or bake it for that matter. 

3.  And finally, the Form Tools toolbar also appears (unless it is already open).

If your Form Tools toolbar is docked - it will look like the image below -  unless of course it is docked at the top of the page.  Either way, you get my meaning - just find it.

If you're having trouble finding the toolbox, then go to View > Toolbars > Form Tools.  Make sure there is a check next to Form Tools.  If there is a check, then the toolbar is open and you just need to find it.  If not, then check it.

You're learning so fast - let's move on.

2

  
  Giving some color to your form

Our next step will be to add the background color to your Layout Region.

Left click on the Layout Region.

This selects it and brings up the Layout Region Properties palette.

Click on the Background tab and then select the color button.

This will bring up the Color Picker palette.  

Guess what you get to do here?  That's right, pick a color any color.  Actually, I want you to use the color we chose and learn something at the same time - so, do this:

Type this into the HTML box: #006666.

Click OK.

When you do that the green color that we used will now become the background color of your form.  Every color has an HTML code attached to it.  In the old days of web design, we had to know this code in order to get the color we wanted.  Now, all you need to do is pick a color.  But, if someone has a certain color that they use often - they can just give you the code and you won't have to try looking and comparing, looking and comparing, looking and comparing...

Now go back to the color picker using the same steps and this time, choose your own color by clicking on one of the small color boxes. 

Notice the HTML code appears.

Click OK.

See how easy this is.  Not only can you choose a color for your background, if you really want to get creative, you can even use a picture as your background.  But that's another lesson.  For now, let's move on to adding some content to our form.

3

  
  Adding a Forms Edit Field

Now that we have a container, we need to give it something to contain.  So, let's start by adding a name field.

Click on the Forms Edit tool from the Forms toolbar.

The cursor will turn into a crosshair.

Move the cursor over the Layout Region.

Notice (when you move the crosshair over the Layout Region) that a blue border outlines the Layout Region to visually inform you that your Forms Edit box will be placed inside this area.

Now drag (left click and hold) and draw a box onto your form.

When you do this, the Properties palette changes to the Forms Edit Field Properties palette. 

You will need to type in a unique name - something that correlates with what the field is going to be used for. Since we want people to type in their name, we will simply type in "name," without the quotes.  This information will be used by your CGI script to identify information in that particular field. 

Make your Forms Edit Field Properties look like the one above.

Now a few words about the other stuff on your Forms Edit Field Properties palette:

Text
You type in text here if you want there to be visible text in the form.  For instance, we could put in something like this: "type in your name here." The user simply types over the text.

Password Field
Ever type in a password on a web site and the code is turned into something that looks like this: **********?  Well, that is what this does.  The typed input appears as bullet characters. 

Visible length
This is the actual visible length (width) of your box.  Basically, you can increase or decrease the size of your box by clicking the arrows.  You can also just drag the box handles of your field as you did with your Layout Region in step 1.

Max length
Although your field can only be so wide - visually, you can actually have people enter more information than the size of the box.  For example: the box may be only 10 characters long, but you may allow people to enter in 20 characters of information.  You do this by increasing the Max length.  Just make sure that the Max length is always equal to or higher than the Visible length.

HTML
This is for working with HTML and not something you really need to learn about in this lesson.

4

  
  Adding a Forms Multi-Line

A Multi-Line box is used when you want your user to enter more than one sentence of information. 

Follow the same steps from step 3 and create a Forms Multi-Line box.

Place the Multi-Line box somewhere under the Forms Edit Field box.

The Forms Multi-Line Properties appear.

Type in "description" as the name for the field.

You can also manipulate the height and width of the text area by typing  numbers into the "Visible length" and "Visible height" fields.

5

  
  Adding text boxes

So far you've added a couple of fields, but these won't make any sense if you don't tell your viewers what they need to type.  We can do this by placing captions above each field using text boxes.

Add text to your page by first selecting the Text Tool below:

Selecting the Text tool changes the cursor into a crosshair.

Now draw a small box on the page.  You do this by clicking where you want the box to start, holding down the mouse button, then dragging it down and to the right where you want the box to end.

A text box appears.

In the text box, type in "Name."

When you place a text box, the Text Properties palette appears.

If the Properties palette is not visible:

Go to View and select Properties Palette and then double click the text box.

Using the Text Properties palette - you can make all of the changes and adjust the text directly.

Click on the Color button from the Text Properties palette. 

Change the font color and click OK.

Make the following text boxes with captions for your form fields:

"Please describe the product"
"What color do you want?"
"Select your size"
"What else would you like?"
"small"
"medium"
"large"
"cake"
"cookie"

The box wraps to the width of the text.

In order to edit text, you need to double click on the text box.  This brings up the text cursor and lets you to type inside the box.  If you want to edit just the text box (such as add a background color), you only need to click a text box once.  This brings up another Text Properties palette for making changes to your text box.

 

For now, just place the text boxes on the form and move them around as needed.

6

  
  Adding a Forms Combo Box

Combo or drop down (sometimes drop up) boxes are used when you want to offer a variety of choices, yet still keep the whole thing from taking up all the space on your form.  The box only opens when the user clicks on the arrow.  

Click on the Forms Combo Box from the Forms toolbar.

Now drag (left click and hold) and draw a box onto your form.

The box will not be that big at first.  The reason for this is that it adjusts to the size of your text and since you haven't put in any text, it starts off pretty small.  The Properties palette changes to the Forms Combo Box Properties.

Type "colors" into the Name field.

Select "Dropdown list" as the type.

When you create a combo box, you have two Type choices to choose from: "Dropdown list" or "List Box."  This selection just controls how the list appears.   Reading is one thing, but seeing is believing - so, later on - try both of them just to see what they look like.

Click the plus symbol.

This brings up the Enter Value window.

Type "Midnight Blue" in the name field and "Blue" for the value field - click OK.

Follow the same steps to add "Morning Green" and "Afternoon Glow."  Only, for Afternoon Glow, enter Yellow as the Value.

7

  
  Adding Forms Radio buttons

Radio buttons are unique in that they work to help your user to select only one of many options.  For example: in our reference form, we have three radio buttons, each one represents a particular size. 

Since you only want the person to be able to select one choice - you use radio buttons.  Why?  Because if they first select "small," but then decide to choose "large" instead - the original choice is automatically unselected when you click on the new radio button.  Try it below:

Okay, stop clicking around.  Let's make the buttons for our form.

Click the Forms Radio Button on the Forms toolbar.

Drag and draw a location onto your form.

A radio button appears and the Properties palette changes to the Forms Radio Button Properties.

Type "size" into the Group name field.

When you use the same group name - only one button from that group can be selected at a time.

Type in "small" into the Value sent field.

The Value is the actual description for that particular button.  In technical jargon - it specifies what information is sent to your CGI script if a particular button is selected.  In order for this to work properly, each button must have a unique value.  Such as: small, medium and large.

Create two more radio buttons, typing in the same group name (size) and give values for "medium" and "large."

If you're wondering what Default (Selected / Not Selected) buttons on the Properties palette are for, look no further.  "Selected" causes the button to be selected by default.  This is useful if the majority of users will select a particular button, or you want to make sure the most obvious choice is selected in case they pass it up altogether.

8

  
  Adding Forms Checkboxes

Unlike Radio Buttons, Checkboxes are used for selecting more than one choice.  For example: the form might ask you to check off your hobbies, favorite kinds of music or what type of fruit you want in your basket.

Click the Forms Checkbox Button on the Forms toolbar.

Drag and draw a location onto your form.

A checkbox appears and the Properties palette changes to the Forms Checkbox Properties.

Type "cake" into the Name field.

Type "Give them a cake" into the Value field.

When someone checks this box, the data that will be sent is "Give them a cake."  Very exciting isn't it?

Create another checkbox, this time using "cookie" for the name and "Send a cookie" for the value.
 

9

  
  Adding submit and reset buttons

So far so good, now we need to give the user a way to launch that information off into cyberspace and on its way to you - this is the job of the Submit button. 

It is also handy that you provide a reset button, the user's "one touch" key to clearing all of the fields so they can start over.  

Click on the Forms Button tool on the Forms toolbar.

Now Click on your form where you would like the button to appear.

The Properties palette changes to the Forms Button Properties.

First, we are going to create the submit button.

Type "Submit" in the Name and Text fields.

The name is for identification (for example: when using the object tree).  The text is what goes on the button so people know what they are clicking.  Notice there is an "Image" selection that you could choose.  This is used if you create your own more unique and perhaps "colorful" button.

Select Submit as the Type.

Basically, you only need to be concerned about what button you are choosing for the Type.  If it is to be your "Submit" button, then select "Submit."  If it is to be your "Reset" button then naturally you would select "Reset."  You can select the "Button" option, if by some act of God you know what it does and how to use it.  Okay, so it isn't that complicated - but still, it isn't a need to know - at least right now it isn't.

Create a Reset button using the same steps for creating a Submit button.

Type in "Reset" for the Name and Text field and select "Reset" from the Type drop down list. 

10

  
  Now the magic formula

Now we are only one step away from completing our form and just as the finish line is the most important step in a race - you're not going to even get on the track if you don't have the magic formula - or at least one of them.

If you want to use Response-O-Matic to process your form, then you can skip this step and go straight to the Response-O-Matic tutorial by clicking here: Response-O-Matic tutorial.

 

Start by selecting (left clicking) your Layout Region.

This will bring up the Layout Region Properties palette.

Remember this palette?  Well, we started with it and now we will finish with it.

Click on the "Settings" button near the bottom right of the palette.

This will bring up the Form Settings window.

Type "MyForm" in the Form Name field.

Type "Mailto:" directly followed by your e-mail address in the Action field.

For example: mailto:joey@friends.com

"Mailto" is the easiest way to deal with form data. With mailto, you give the form your e-mail address and when the Submit button is pressed, the form data is e-mailed to you.

The visitor's browser has to be set up to allow "mailto."  If it isn't set up properly, mailto will not work. So, you might want to supply your e-mail address on the form, for the people who are having trouble submitting the form due to the fact that their browsers are not set up for mail.

 

Type "text/plain" into the Encoding Type field.

This helps send the form information because it tells the server what follows is plain text, nothing fancy.

Click OK.

Congratulations! You did it!  There are two things I can suggest now.  One, is moving stuff around on your form so that it looks nice and neat - the designer in you.  The second thing would be to actually test out your form.  So, once you have the form looking the way you want it, do the following:!

Get on-line.

Publish your site.

Fill out your form and press the Submit button.

You should receive an e-mail containing the data you have entered into the form.  If it works and you received the e-mail response from your form -  then jump up and with the exuberance of the "Crocodile Hunter," and scream, "Woo Hoo!"

If not, then either I gave you the wrong directions or you may have missed something along the road to good form.  In either case, take a break, have some cake and then review what you have done until you find a remedy.

Now go play!

P.S.  You might want to check out  www.response-o-matic.com and the Response-O-Matic tutorial.

It's a free service that will take care of sending your form data to your e-mail address.  They use a program that automates building your form, collecting information and doing the mailings.

About the Author Rick Tew is the founder of Tew Ryu the Martial Science.  His programs focus on three areas of human development: Mind- personal development seminars Body- physical energy through martial arts  Spirit- team travel and adventure When he isn't busy with the above, he enjoys expressing his creative talents through writing and web site creation.