DreamWeaver Tip: Create a Simple Form for your Web Page By: Samuel Mela     If you are operating a Web Site for commerce or business then you need a "Contact Me" form for that site as much as you need an automatic answering machine for your telephone. Dreamweaver has form insertion and editing features that make it easy to add a form to any web page. Furthermore, the Dreamweaver Insert bar allows you to add a complete array of form fields, including Text Fields, Hidden Fields, Text Area, Check Boxes, Radio Buttons, Radio Groups, Button, Labels, and more advanced form items such as List Menus, Jump Menu, File Field, Image Field, and Fieldset. This article covers only very simple forms, but additional form elements will be covered in future articles. For this article, we assume the Form Accessibility options are turned off. To do this, click Edit on the menu bar, then Preferences, then select the Accessibility category, and then uncheck Form Objects. Three Tasks for Adding A form There are three tasks involved in adding a working form to a web site. They are: Add Form - Using Dreamweaver editing features, you create the form. Populate the Form - Using Dreamweaver editing features, you add form fields and other HTML tags (for example, tables). Add Form Processing - In general, a script is required to process form data when the user enters it. Here is a very simple example form I created using Dreamweaver: Example Form: http://www.weekendsuccess.com/TestForm.htm The following sections describe the steps necessary to create a form like this. Add the Form To add a form and form fields, you must the Insert Toolbar must be visible. If the Insert Toolbar is not visible, click View on the Dreamweaver main menu, then click Toolbars and click to put a check next to the Insert selection. Now click the down arrow on the left side of the Insert bar (right after the title), and select Forms. You are ready to add a form and some form fields. Position the Dreamweaver insertion pointer to the place in your document where you want the form to be inserted. Now click the Form button on the insert bar (should be the leftmost button), and a form will be inserted into your document. You cannot drag the edges of the form to resize it. The form will be resized automatically as you add content to it. Once the form is added, the Dreamweaver form property inspector box will display a number of options. From left to right and top to bottom, you will see "Form name", "Action", "Method", "Target", "Enctype", and "Class". Form Name is used to give the form a name. This makes it possible to manipulate the form with a scripting language. Action specifies what is done with the form data when the form submit button is pushed. In the real world, you the action is generally set to the file name of a form processing script. For example: "formmail.php" Method specifies the means by which the form data is communicated. For professional forms you will generally want to set this to "POST". The "GET" method sends the data as part of a URL, and it will be visible in the address bar of the browser. Also, the "GET" method is limited in how much information it can send. Target controls which window displays the results of a form submission. Normally this will be left empty. Enctype defaults to "application/x-www-form-urlencoded". That is the setting you would generally use with posted data. Class sets the "class" attribute of the form. In other words, applies a CSS style. It is left blank in this example, but you can experiment with it. Populate the Form Adding a table to contain the form fields is entirely optional, but it makes it much easier to line of the fields, and gives a professional look to your page, so I highly recommend it. To add a table, set the insertion pointer inside of the form, and insert a two column table into the form, just as you would normally insert it into a web page. Now add some Form Text Fields to the table. A typical selection would be name, address, email, and telephone number. The strategy for adding labeled text form fields to the table is simple -- add text descriptions to the left column of the table (right justify them), and add form text fields to the right column of the table (left justify them). This will work very nicely for such fields as name, street address, E-mail, and telephone number. To actually add the text fields click the Text Field button on the Insert Toolbar. The form text field will be inserted into the table cell, and the Property Inspector will display a list of Form Text Field related properties. In the field labeled "Textfield" type the name of the field. In the field, labeled "Char Width", select an appropriate width -- 50 is good for name, address, and E-mail; 2 is good for state abbreviations. Also, for simple fields like name, street address, and E-mail-- select the "Single Line" radio button option. The last thing you must add to the form to make it work is a "Submit" button. I suggest centering this in the bottom row of the table. To do this, merge the two cells in the bottom row of the table, then place the Dreamweaver insertion pointer in bottom row and click the Button button on the Insert Toolbar. By default the button should be named "Submit", have a value of "Submit", and an action of "Submit Form". If for some reason it does not, set these in the Property Inspector. Add Form Processing In order to actually use the information in the form, you need some sort of a script. The script will typically store the form contents in a data base file or email them somewhere. If you are not a script expert, I suggest you buy a script or use one of the free scripts available on the internet. For my example form, I used a script from "Jacks Scripts (Home of Jack's Formmail.php)". It's easy to find with Google. In general, you will need to customize the script for your site and email address, but this is quite easy. For the "FormMail" php script, you just make a few changes at the top of the file. They look like this: // for ultimate security, use this instead of using the form $recipient = "YourEmailAddress@YourEmailDomain.com"; // referrers.. domains/ips that you will allow forms to // reside on $referers = array ('YourDomain.com','www.Yourdomain.com'); You may also need to add some hidden fields to your form. The values of these fields are passed to the processing script. For my example form I had to add two hidden fields - a field named "redirect" whose value is the web address of the response page the user is sent to after submitting the form; and a field named "subject" whose value is the subject line of the email that is sent after the form is submitted. Finally, you should be aware that that this article did not discuss error checking and data validation. For reliable, high end, business form processing there are a number of commercial sites available. You can direct the output of your forms to a service, and they will database the information or email it to you. Conclusion It is easy to add a form to a web page using Dreamweaver. Just use the Form insertion bar to add the form and form fields, then hook the form to a script; or link your form to a site that processes form data professionally. Forms are absolutely necessary if you want to have a professional presence on the web. © 2006 Sam Mela Sam Mela runs a math tutoring business in Springfield Virginia. His web site is http://www.WeekendSuccess.com Article Source: zeronese.net article directory. Article Word Count Appx. : 1284 Article Category: Articles » Web-Design-Software » Dreamweaver See all articles by Samuel Mela Note: Copying of article contents in whole is permitted provided that article body and article author by-lines are kept intact and unchanged. Hyperlinks and/or URLs including article source link provided by authors and/or zeronese must remain active at all times.       The views and opinions of authors expressed on Zeronese Article Directory web sites do not necessarily state or reflect those of the Zeronese.net .