You can create a web form visually in Dreamweaver by inserting form elements into a page, but that's only part of the job. The other, more complex part is developing a mechanism to handle the data your visitors submit with the form. The data is sometimes saved in a customer database, for example. Typically, web application technology such as PHP or Adobe ColdFusion handles the form data.

This article describes how to create a simple web form. Developing a mechanism to handle submitted form data is beyond the scope of the article. For detailed instructions on building forms and a mechanism to handle submitted data with PHP, see this tutorial series on Adobe Developer Center.

Create a web form

  1. Open a page in Design view in Dreamweaver and place the insertion point where you want the form to appear.
  2. Choose Insert > Form > Form. Or, select the Forms category in the Insert panel (the small triangle below the panel’s tab) and click the Form icon. Dreamweaver inserts an empty form. In Design view, a dotted red outline indicates forms. If you don’t see this outline, select View > Visual Aids > Invisible Elements.
  3. Specify the page or script that processes the form data. In the Document window, click the form outline to select the form. In the Property inspector (Window > Properties), enter the filename (and path, if necessary) of the processing page in the Property inspector’s Action text box. Or, click the folder icon to navigate to the appropriate page or script. Example: process_order.php.
  4. Specify the method to use to transmit the form data to the server. In the Property inspector, select one of the following options in the Method pop-up menu:
    • POST embeds the form data in the HTTP request. For more information, see HTML form parameters in Dreamweaver Help.
    • GET appends the value to the URL requesting the page. For more information, see URL parameters in Dreamweaver Help.
    • Default uses the browser’s default setting to send the form data to the server. The default is usually the GET method.
  5. Insert form objects. Place the insertion point where you want the form object to appear in the form. Then select the object in the Insert > Form menu, or in the Forms category of the Insert bar. Place form objects within the form’s dotted red outline on the page. For more information on the form objects, see Form objects  in Dreamweaver Help.

  6. Adjust the layout of the form. Use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form, but you can include more than one form in a page. When designing forms, remember to label the form objects with descriptive text to let users know what they’re responding to. For example, “Type your name” to request name information. Use tables to provide structure for form objects and labels. Make sure that all the table tags are included between the form tags.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy