design web page

Dreamweaver Tip: Create a simple form for your website

Posted by maija | Design Webpage Articles | Friday 15 January 2010 6:51 pm

If you operate a Web site for the trade or business, then you need to contact "Me" form of this site so much like an answering machine for your phone.

Dreamweaver form of input and editing features that made it easy to create a form to add any web page is possible.

In addition, the Dreamweaver Insert bar allows a full range of form fields, including text fields, hidden fields, add text area, check boxes, radio buttons, groups of radio buttons, labels,and advanced form elements, such as jump menu list of menus, image files and field fieldset. This article applies only to very simple form, but elements of an additional module will be covered in future articles.

For this article we will take the form of accessibility features are disabled. To do this, click on Edit in the menu bar, then Preferences, then select the category for wheelchair users, and disable the shape of objects.

Three tasks for adding a shape

There areinvolved three tasks by a working group to build a website. They are:

Add Module – editing features using Dreamweaver, you create the form.

Fill out the form – Dreamweaver use editing features that add form fields e) other HTML tags (such as tables.

Add processing module – usually requires a script to process the form if the user enters.

Here is a very simple example is the form that I have with Dreamweaver:

SampleForm:
http://www.weekendsuccess.com/TestForm.htm

The following sections describe the steps needed to create a form like this.

Add module

To add a form and form fields, you must add the toolbar is visible. When you insert the toolbar is not visible, click the menu in Dreamweaver, and then click Toolbars, and click the checkbox next to the Insert selection. Now click the arrow on the left side ofInsert bar (right after the title), and select Forms. They are willing to form a shape and a few boxes here.

Dreamweaver, position the cursor in the document where you want the module to be inserted. Now click on the form button on the Insert bar (the button should be left), and a form will be inserted in the document. You can not drag the edges of the form to enlarge it. The form is then automatically adjusted when you add contentit.

Once the module is inserted into Dreamweaver Property Inspector window is displayed as a series of options.

From left to right and from top to bottom, you'll see, "Module Name", "Action", "method", "targets", "enctype" and "class".

Module name is used to form a name. This allows you to manipulate the shape with a scripting language.

Action determines what will happen with the form data when the form submit button is pressed. In the real world, itaction is usually set to the filename of a script processing shape. Eg

"formmail.php"

Method described, for the way in which the data form. For professional forms that usually set that you want this, "POST". The method "GET" sends the data as part of a URL, and will be visible in the address bar of your browser. Moreover, the method "GET", as more limited information that can be sent.

Target controls thatWindow displays the results of a form. Normally this will be empty.

Enctype set to "application / x-www-form-urlencoded". This is the attitude that you normally use with Data.

Class sets the "class" attribute of the form. In other words, apply a CSS style. It is empty in this example, but you can experiment.

Fill in the form

Adding a table to the form fields is given voluntarily, but makesmuch easier to line the fields and gives a professional look of your page, so I recommend. To add a table, place the cursor in the form and add a table with two columns in shape, as you would normally put into a web page.

Now add some form of text boxes on the table. A typical selection would be name, address, e-mail address and telephone number.

The strategy for the addition of text form fields shown in the table is simple – add text descriptionsThe left column of the table (right justify them), and add text boxes in the form on the right hand column of the table (left justified). This works very well for these sectors, such as name, address, e-mail address and telephone number.

Actually add the text fields on the Insert Text Box button on the toolbar. The text field the form will be inserted into a table cell, and the Property inspector is a list of the text box form to display its properties. Box"Text box, type the name of the field. In the" Char Width ", select an appropriate width – 50 is good for your name, email address, and 2 is good for state abbreviations. Even simple fields such as name, address and e-mail – Select the "single-line option" button.

The last thing you need to add the module so that it works is a "send" button. I propose that this centering on the bottom row of the table. To do this, merge the two cells in the bottom row ofTable, Dreamweaver and set the cursor on the bottom line, and click the Paste button on the toolbar. By default, the name of "submit" button should have a value of "Send", and an action of "Form Send ". If for some reason it does not, put them in the Property inspector.

Add Form Processing

Effectively use information in a form, you need some kind of script. The script is usually stored as entries in a databaseE-mail or file somewhere. If you are not an expert on scripts, I suggest you buy a script or a series of free scripts available on the Internet. To make my example, I have a script of "Jack Scripts (Home of Formmail.php Jack). It 'easy to find with Google.

In general, you must adapt the script to your website and e-mail, but this is quite simple. For the "Form Mail" PHP script, you are just a few changes for the start of the file. They are:

/ /for maximum security, use this instead of using the module

$ To = "YourEmailAddress@YourEmailDomain.com";

/ / References .. Domains / IPS active form

/ / If there are

$ Referer = array ( 'YourDomain.com', 'http://www.Yourdomain.com');

You may need to add some hidden fields to the form. The values of these fields are passed to the script processing. For my example, I had to create two hidden fields – a field named "redirect", the value of addingis the web address of the reply to send the user site, after sending the form has a field named "subject", the value of the subject line of your e-mail after the form has been sent.

Finally, you should be aware that this item was not discussed error checking and data validation. For a reliable, high-end form processing business, there are a number of commercial Web sites. You can use the issue of forms of direct services, and will be the databaseInformation or e-mail to you.

Conclusion

It 'simply a form on a Web page using Dreamweaver to add. Simply use the form on the insertion point on the shape and form fields, please submit the form on the hook to attach a script or module on a Web site that processes the data as professionally. The forms are absolutely necessary if you want to have a professional presence on the Internet.

© 2006 Sam Mela

design web

Related post

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

Related posts

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment