Good web form design consistently accomplishes:

• End User Convenience
• Data Validation

This web-to-contact form in the i-Dialogue Developer's Sandbox looks pretty simple on the surface, but it implements several subtle best practices that often get overlooked.

How to Make Web Forms Convenient

The "First Name" textbox incorporates use of the "HasFocus" attribute to ensure the user does not have to click on the textbox to begin data entry. They simply start typing.

<dlog:TextBox id='FirstNameTxt' FieldName='FirstName' HasFocus="true" />

Tab orders are logically defined so that the end user can progress through the web form without need for selecting each textbox (while a TabOrder attribute is available, default behavior is to simply progress through the form fields top-to-bottom).

Finally, the DScript button control sets the "IsDefault" attribute to "true" to ensure that if the Enter key is hit, the form will automatically submit the form on behalf of clicking the button.

<dlog:Button id='SubmitBtn' Text='Contact Us' IsDefault="true" />

Data Validation

There's a new Wiki article on Page Validation that describes both client-side and server-side validation techniques using Dialogue Script.

Client-side validation is sufficient for most marketing web forms, but portal applications typically must take extra precaution and also validate data entry on the server.

Dialogue Script supports the full array of ASP.NET Data validation controls. Our demo web to lead form uses the RequiredFieldValidator control to prevent the web form from being submitted with an empty Email value.

<asp:RequiredFieldValidator 
        id="valEmailRequired" 
        ControlToValidate="EmailTxt" 
        Display="dynamic">* Email Required
</asp:RequiredFieldValidator>

The RegularExpressionValidator control may be used to validate that the email address is well formed (such as requiring "@" and "." symbols in the address).

<asp:RegularExpressionValidator
        id="regEmail"
        ControlToValidate="EmailTxt"
        Text="(Invalid email)"
        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />    

Another side benefit of applying validation to web forms is the prevention of SPAM, which is caused by automated bots that roam the Internet hoping to share links of various V1@gra sites on unsuspecting Blogs.