Creating an Attractive, Useful Form in Dreamweaver CS4
- Creating Forms in Dreamweaver CS4: A Quick Overview
- Creating an Input Form with Labels and Validated Fields
- Enabling Visitors to Submit an Input Form
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding input forms to your website can be exhausting. In order to work, input must be meshed with a server database—a connection that remains annoyingly elusive even with Dreamweaver CS4. But input remain the most powerful tool for substantial engagements with visitors to your sites.
In this article, I'll show you how to create a basic, intuitive form to allow visitors to your site to join your mailing list, place an order, provide feedback, complete a survey—and how you can collect that data without messing with server scripting or online databases.
Creating Forms in Dreamweaver CS4: A Quick Overview
Creating an attractive, intuitive, highly usable input form in Dreamweaver CS4 involves three basic phases:
- Use Dreamweaver CS4's accessible form-design tools to create the form and populate it with form fields to collect data—automatically generating all the necessary HTML code to make the form work.
- Use Dreamweaver CS4's Spry Validation Widgets to generate JavaScript to test form input before the data is accepted. For example, if you ask visitors to supply an email address, the validation script will make sure that the data looks like an email address. If you require a phone number, the validation script will insist that visitors supply that info before they can submit the form.
- Add attributes to the Dreamweaver CS4 form to allow visitors to submit the data, and to send that submitted data to your email address.
But wait—it gets easier! Dreamweaver CS4 allows you to generate form fields with labels and validation scripts all at once. So phases 1 and 2 of the list above can be done at the same time.
With this as an overview, think about the kinds of information you'll want to collect from visitors to your site. Some examples:
- Site feedback
- Mailing list info
- Article submissions for blogs
- Submitted artwork
- Surveys
- ??? (your own custom form needs)
In the remainder of this article, I'll walk you through the entire process of creating a working form, using the example of a form that collects comments on a video. Of course, you can adapt this feedback form by changing the text to suit your own needs.
Before we get into the steps, here are my underlying assumptions:
- You understand that everything you do in Dreamweaver starts with building a Dreamweaver website to manage your files and to upload them to a remote server.
- You have a remote server and a web hosting service. These services are available all over the Web—reliable ones start as low as $5/month.
- You know how to upload your Dreamweaver website to your remote server, using Dreamweaver's Site panel. Either of two widely available basic Dreamweaver CS4 books—my Adobe Dreamweaver CS4 How-Tos: 100 Essential Techniques or our hated rival, the Dummies book—explains these basic techniques, without which you can't do anything useful in Dreamweaver.
So, with that three-point caveat, you're ready to roll!