Photo Album | Event Calendar | Office Directory | Webmail

SiteMason Tutorial: The Custom Form Tool

SiteMason is an application provided at no charge to Vanderbilt students for adding interactivity to their websites. This tutorial will show you how to use the Custom Form tool. With the Custom Form tool, you can set up registration forms, survey your visitors, or collect data to be analyzed at a later time.

Please note that this is a barebones tutorial. SiteMason's Custom Form Tool is very powerful, and has many more features than are included in this basic tutorial.

1. Sign Up for a SiteMason Account

Go to the Vanderbilt SiteMason Signup screen. Enter your VUnetID, e-password, and email address. Then click on the Submit button. Your account will be automatically created.

2. Add a Tool

The next screen you see will look like the illustration below. Click on the button for Add a Tool.

3. Rename the Tool

Your tool will have a default name, something like "New Custom Form 1." Click on the Rename button to replace this default name with a new name. (See screenshot, below)

Type in a new name, using one that is meaningful for the purpose of your form (see screenshot, below). Then click on the Save Name button.

4. Start Building the Form

To build a form with SiteMason, you navigate through the various blue tabs (i.e., Setup and Information, Edit Elements, Edit Email Settings, etc). To start our form, we'll click on the Edit Elements tab. This will bring up a screen like the one below. Under the text for Insert a new ... you will have a pulldown list. This list contains all the options for parts of your form. Most of the time you will use the Text Field option. For this tutorial, we will use the Text Field and Submit Button options.

From the pulldown list, select Text Field. Then click on the Add & Edit button.

There will be a short pause, and then you'll see the Editor dialog box (screenshot below). Note that we have only included the top part of the Editor dialog box. There are many more options within the Editor dialog box; for this tutorial, we are just using the top options.

For the Field Name area, type in one word that describes the field. In this instance, we're asking people to put in their first name, so we're giving the Field Name a value of first. It's okay to have capital letters and/or numbers. If you have more than one word, use the underscore character to separate the words. It is not recommended that you use spaces or special characters like "!@#$"

For the Label area, type in the words that your audience will see. These are the words that will appear on the webpage next to the text box. Since we're asking for the person's first name, we've used the words First Name for the Label area.

We have left the Default Value of Field blank. But, if you wanted to force people to enter their first name, you could check this box.

Then scroll down to the bottom of the screen, leaving all other options in their default mode, and click on the Add button (see screenshot below).

5. Add a Last Name Field to Your Form

After you click the Add button, wait for the web screen to refresh, and you'll see that your First Name field has been added to the form (see screenshot below).

Now you're ready to add more fields to your form. The next field to add is the Last Name field. Go to the pulldown list below the Insert a new ... text, and choose Text Field. Then click on the Add & Edit button. In a few seconds, you will see the Editor dialog box.

For the Field Name area, type in one word that describes the field. In this instance, we're asking people to put in their last name, so we're giving the Field Name a value of last (see screenshot below).

For the Label area, type in the words that your audience will see. These are the words that will appear on the webpage next to the text box. Since we're asking for the person's last name, we've used the words Last Name for the Label area.

We have left the Default Value of Field blank. But, if you wanted to force people to enter their last name, you could check this box.

Then scroll down to the bottom of the screen, leaving all other options in their default mode, and click on the Add button.

In a few seconds, your web screen will refresh and show you that the Last Name has been added to the form.

5. Add an Email Field to Your Form

We now want to ask for the person's email address. Go to the pulldown list below the Insert a new ... text, and choose Text Field. Then click on the Add & Edit button. In a few seconds, you will see the Editor dialog box.

For the Field Name area, type in one word that describes the field. In this instance, we're asking people for their email address, so we're giving the Field Name a value of email.

For the Label area, type in the words that your audience will see. These are the words that will appear on the webpage next to the text box. Since we're asking for the person's email address, we'll use the words Email Address for the Label area.

We'll leave the Default Value of Field blank. But, if you wanted to force people to enter their email address, you could check this box.

Scroll down to the bottom of the screen, leaving all other options in their default mode, and click on the Add button.

In a few seconds, your web screen will refresh and show you that the Email Address field has been added to the form (see screenshot below).

5. Add the Submit Button

We've included all the fields for the form, but there's one remaining item that we need to add. That's the Submit button. Go to the pulldown list below the Insert a new ... text, and choose Submit Button and then click on the Add button. In a few seconds, the screen will refresh and you will see the Submit button added to your form (see screenshot below).

Go to screen two of the SiteMason Custom Form tutorial. We'll next learn how to set email options.