Contact Form Customization Instructions

Basic Formatting

Removing Fields

Changing Items in a DropDownList box

Adding New Fields

Changing the Confirmation Message

Changing the Error Message

Basic Formatting

After generating the form code and inserting it into your page, switch to Design View in Expression Web. You should now see something that looks like a contact form inside of a large gray box. Don't worry; the gray box will not show when the page is viewed in a browser. Each form field is represented by an ASP.NET control (either a TextBox, CheckBox or DropDownList control). You can format the contact form to fit your website by rearranging the order of the controls, adding tables/divs for better layout, formatting the labels, adding CSS, etc. Just be sure all the controls stay inside the gray box.

To format the "* Required" text that displays when a user tries to submit blank or invalid data, use a css class selector named ValidateMessage. For example, to make the "*Required" text red, add the following to your style sheet:

.ValidateMessage {color: red;}

Now, if user tries to submit blank data, they will see this...

...instead of this:

Removing Fields

You can remove any unwanted fields by simply deleting the ASP.NET control for that field. Be sure to also delete the associated field validator (the red text next to the field that displays "*Required").

Changing Items in a DropDownList box

1. Select the DropDownList control that you would like to change.
2. Click its "Smart Tag" button and choose "Edit Items"
3. In the "ListItem Collection Editor" window, click the Add button to add a new item.
4. Set its Text and Value properties. The Text property is what the end user will see and the value property is the value that will be submitted.
5. Repeat steps 3 & 4 to add additional items.
6. Click OK when finished.

Adding New Fields

You can add new fields to your contact form. Here's how:

1. If the Toolbox task pane in Expression Web is not visible, display it now by choosing Task Panes > Toolbox from EW's main menu.
2. In the Toolbx task pane, be sure the "ASP.NET Controls" section is expanded by clicking its plus icon.
3. In the "Standard" sub-section, drag a TextBox, CheckBox, or DropDownlList control onto your contact form.
4. Give each of the new controls a useful name. The new name must not contain any spaces and must not begin with a number.
5. That's it! No changes to the script are needed.

Changing the Confirmation Message

Directly below the contact form, there is a gray box labeled "FormConfirmationMessage".  The contents of this box will be displayed to the user after they successfully submit the form. You can modify the contents of this box as desired.

Changing the Error Message

Directly below the "FormConfirmationMessage" box, there is a third gray box labeled "FormErrorMessage".  The contents of this box will be displayed to the user if for some reason an unexpected error occurs while submitting the form. You can modify the contents of this box as desired.