For the purposes of out tutorial, we are going to ignore Dreamweaver entirely, looking instead only at the code. We will be making an email form--that is a form that generates an email containing the information submitted by the user. This email will be sent to an address that is put into the script.
When the browser parses HTML and comes to this string of characters, <form action, it is configured to interpret the rest of the code as part of a Web form until it reaches this string of characters, /form>
The first part of the form contains administrative information telling the browser where to send the information, and by what method. Unless the Web server is configured otherwise, the name of the script file that will process the data must be at the end of URL. Two methods are commonly used to encode the data: GET and POST. GET encodes the data within the URL string, and is good only for short amounts of data. The POST method sends data within the body of the request. Normally you would have to configure this part of the form. However the method used in this tutorial will do that for you. The code shown below demonstrates the way you would usually code the form.
As with images, the URL for a Web form may either be relative to the Web page or be an absolute, or full, URL. In the code shown below, the URL is for a script called, form_handler.php.
<html>The code above produces the following on the Web form (The script does not exist, so submitting this form will do nothing.):
<body>
<form action="form_handler.php" method="post">
Your Name: <input name="user" type="text" />
<br />
Your Email: <input name="email" type="text" />
<br />
<input type="submit" />
</form>
</body>
</html>
Your Name
Your Email
Web forms have a number of input methods, including the single-line text, shown above in the two text boxes. Others include radio buttons, check boxes, text areas (multi-line text input), passwords, and drop-downs. Additionally, a Web form can be used to upload and download files, and to populate data into a database. Information on these things is contained within the references at the end of this post.
The element that sends the form, <input type="submit" />, sends the form data in much the same way as a clicked link sends data over the Internet. When the data arrives at the Web server, a script is called up, to processes the data. Many different computer languages can be used to accomplish this, the most common being PHP.
Configuring a script is not a trivial matter. At the same time, a customized script is necessary to process the data. The Computer Science Department conducts classes, most notably CS116, on how to write scripts to process Web forms.
Fortunately, programs exist that write computer code. For the purposes of this tutorial, we are going to use an online code generator called, The Web Form Factory. This utility takes the Web page containing your form, along with a Thank You page, and converts them into a PHP script. It is important to note here that the Form Factory script actually replaces the Web pages. The information contained within your two HTML pages is assimilated into the script, which generates the respective Web pages at the appropriate time. Usually, the script is kept separate from the HTML page.
The Web Form Factory does not work the same way it used to. Some elements are missing from the pagkage that is returned. Or perhaps I am confused about the way it works. In either case, I have come up with a work-around so that the scripts will will work.
The PHP script created in this process will analyze submissions made by users, returning error messages if the forms are improperly filled out. For instance, a user may enter an email address without the @ character. When the script encounters an error, it will generate an error message to the replace the Web page containing the form on the user's computer. In order to implement this feature, you must include the following code on your Web page in the place where you want the error message to appear:
<wff:validation_errors></wff:validation_errors>.
After you have entered this code, follow the instructions on The Web Form Factory site. Select Email Form in step#2. After you have submitted your two HTML files, you will be prompted to download a Zip file containing the scripts. For some reason, the package of scripts is incomplete. To correct this, add these files to those that you upload to your server.
The PHP file containing your form will have the name form.YourFileName.php. You may change this file name to work with your site, but you must retain the php extension on the end. Links to this page must also carry the .php extension. You do not have to upload the original two HTML files to your site.
At the top of this file are three lines of code:
include_once("configuration.php");The text will be slightly different. Copy and paste the code shown here above in place of the code in your file. When you upload your script, be sure to include the three files referenced in the same directory as the PHP file containing your form. The total number of files to upload will be four.
include_once("wff_misc.php");
include_once("class.phpmailer.php");
On lines 10 and 11, you should replace the placeholder text with your own information.
$mail->From = 'johnrobertlemon@yahoo.com';On line 14, insert the text that you want to appear at the top of your email message. The characters \n\n are code that will force two line returns.
$mail->FromName = 'John Lemon';
$message = "The following was submitted to the Web form:\n\n";In the file configuration.php, replace the placeholder text with the email address that you want to receive the report.
To review:
- Create the Web page containing your form with the additional line of code, <wff:validation_errors></wff:validation_errors>.
- Create a Thank You page.
- Follow the instructions on the Form Factory site.
- Change the configuration.php file included in the files returned from the Form Factory to include the email address that will receive the emails.
- Change the main script as shown above.
- Upload the files to your server.
Further reading:
See also:
- The files used in this tutorial.
- A series of video tutorials on Dreamweaver, including one on form creation, and one on creating a PHP file.
- Email Me Form, a free online form generator service for creating HTML forms, no programming required. It has a form wizard to design simple or complex forms to make a form mail script. After creating the Web form, you get HTML code to paste into your Web page. This process creates a script housed on their servers.
0 comments:
Post a Comment