- 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
Enabling Visitors to Submit an Input Form
As I alluded to in the rant introducing this article, the frustrating thing about creating forms for most designers is that those forms have to get activated somehow, so that the information entered into the form gets transmitted—somehow, to somebody, somewhere! Preferably in a useful format.
The only way that can work is if the data is sent to a web server that has a script that will interpret the form data and pass it along to an appropriate destination. In a large-scale website maintained by an army of IT and database programmers, that destination is a database connected to a whole set of calculations and programs. That's fine for Amazon.com, whose army of server and database programmers make sure that, when you purchase a book, your credit card gets charged and the book is deducted from inventory. But for the vast majority of folks designing websites without the resources to set up that kind of back-end programming, there are two basic options:
- Find a pre-made script at your web host provider. Most web hosting services provide these scripts, and I'll show you how to find them and connect them to your form.
- If your web hosting service really doesn't have any email-form handler scripts, you can use a script that I'll provide. This script launches the visitor's default email client (Apple Mail, Outlook, and so on), automatically embeds the form data in an email message, and places your email address in the "To:" field in the message.
To enable visitors to submit their data, follow these steps:
- At the bottom of your form (but inside the red lines that mark the parameters of the form!), insert a button from the Forms pop-up in the Insert panel. The by-now-familiar Input Tag Accessibility Attributes dialog box appears. Enter Submit in the ID field, but leave the Label field blank—there's no need for a label, since the purpose of the Submit button will be self-evident. Leave the rest of the parameters in the dialog box at their default settings and click OK. A Submit button appears at the bottom of your form.
- Select the entire form by clicking the red rectangle that encloses it. With the form selected, the Properties inspector displays form attributes, as shown in Figure 8.
Figure 8 A selected form with a Submit button.
- To make the form you designed actually send the input data anywhere, you need to enter a URL in the Action field in the Properties inspector. The URL leads to a script at your web host server that will manage the form. To find this URL, search your web host provider's support site for "add email functionality" or "manage email forms." For example, at Yahoo!'s small business hosting service, the URL is found by clicking the Email Forms link in the Create & Update tab of the Web Hosting Control Panel that you can access after you log in at Yahoo! (see Figure 9).
- When you've found out how your hosting service sets up this capability, copy only the URL—not the entire string of code in which the URL might be included. (Dreamweaver CS4 will handle the code; all you need is the URL.) Paste the URL into the Action field in the Properties inspector for your form (see Figure 10).
Figure 9 Selecting the URL for a server script to manage input form data.
Figure 10 Pasting the URL for a server script to manage input form data.
Alternate step 4: If you can't find a script at your web hosting provider's site to manage form data, enter the following code into the Action field in the Properties inspector for your form:
Replace 01@01.01 with your email address. For example, here's the code for my form:
- 5. You are now ready to upload and test your form. Upload the page with the form to your website, and view it in a browser window. You can't test the form in Dreamweaver; you need to do this in a browser window.
- Test your form's validation features by clicking the Submit button without entering required data, or by entering an email address that isn't in proper email address format (see Figure 11).
Figure 11 Testing your form without required data.
- Finally, test your form by entering complete, correct data and clicking the Submit button. Results will vary, depending on which script you used, but one way or another, the data in the form will be sent to your email address (see Figure 12).
)
)
)
)
)
Figure 12 Data from an online input form, received as email.
Elegant? Maybe not. But the combination of form design and server data management in this tutorial works. You didn't need a database programmer or a server guru. And it only took you, what, 20 minutes?
The ability to collect form data in your site opens up a whole world of interaction with your visitors. So adapt this tutorial to your business, organization, or cause, and use it to collect orders, members, feedback, and more.