Creating a Form

Buy Microsoft Expression Web Professional Design Tool | Get Microsoft Expression Web Upgrade | Microsoft Expression Web Upgrade from FrontPage [Any Version]

Creating a Form

Sunday, September 09, 2007

Creating a form is pretty easy with XHTML code if you understand a bit of the code. FrontPage helped you create forms very easily and processed the form on the server with FrontPage Server Extensions.

With Expression Web, there are many way to create and process a form actually. Later, we will show you how to create a form with Expression Web and process it with .NET (a server side language). Today, let's talk more about creating a simple form and processing it with an ASP component known as JMail.

Form Processing with JMail

JMail is an ASP component that must be installed on the (Windows) server. There are a few different ASP email components like CDONTS / CDOSYS, ASPMail, ASPEmail. Check with your hosting company to see what they offer and support. I am pretty certain that TechEvolution will support JMail, along with a few other ASP components.

Creating the Form

Creating the form is pretty easy. In this example, I laid out the form using Cascading Style Sheets (CSS) instead of tables and cells. If you have any problems with this, please ask in the Expression-Frontpage Forum or the International Web Developers Network. You can download the code in this text file. (Microsoft Internet Users: Right Click and download TXT file*) (Don't forget to change the SMTP Server and update the recipient email address.)

This can easily be changed or you can add more inputs as needed. I'll show you in the next blog on how the JMail ASP component processes the form and I will show you how you can add an input field if needed.

Adding a Field

Let's say that you want to add a telephone number to the form. And you want to add it to the under the email address. So you have something like:

<label for="email">E-Mail</label><input id="EMail" name="EMail" /><br />

Now all you need to do is add:

<label for="telephone">Telephone</label><input id="Telephone" name="Telephone" /><br />

Make sure that if you do add this code, you also add the proper code to your JMail processing form, which we will also show you how to do this as well.

Don't be afraid to dive into your code some and make a few changes. If you are on a *NIX server (Linux / Unix), chances are you will need to use PHP. For some help with processing a PHP email form, check out the International Web Developer's Network.

*There is an option in Microsoft Internet Explorer 7.0: Go to Tools - Internet Options - Security - Custom Level called open files based on content, not file extension. If this is disabled then it correctly opens the text file for viewing. You can change the setting or leave as is. (I would just right click on the TXT file and say Save As.)