Example 7.1: Creating a Web-Based Email Form

Team-Fly    

ColdFusion® MX: From Static to Dynamic in 10 Steps
By Barry Moore
Table of Contents
Step 7.  Using Email with ColdFusion MX


Going back to our Staff.mdb database project, we want to give administrators the capability to send email straight from their browser.

In this example, we are going create an email form that administrators can fill out. The form will contain fields for the TO address, SUBJECT line, and message body; the FROM address will be hard-coded into the form.

After the form has been filled out, the form variables will be submitted to an action page that actually sends the email, and a confirmation message will be displayed.

  1. Open your text editor and type the code in Listing 7.1 or open the EmailForm.cfm file from the CompletedFiles\Examples\Step07 folder.

    Listing 7.1 EmailForm.cfm

    [View full width]

     <!--- File:             EmailForm.cfm  Description:      Collect information for CFMAIL action page  Author:  Created:  --->  <HTML>    <HEAD>        <TITLE>Email Form</TITLE>    </HEAD>    <BODY>      <H2>Email Form</H2>        <!--- set the action page for this form --->        <CFFORM ACTION="SendEmail.cfm" METHOD="POST" >          <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5" BORDERCOLOR="#000000"  graphics/ccc.gifBGCOLOR="#FFFFCC">            <TR>              <TD><B>To:</B></TD>              <TD>                <CFINPUT TYPE="Text" NAME="ToAddress" MESSAGE="Please              enter TO address" REQUIRED="Yes" SIZE="30"              MAXLENGTH="50">              </TD>            </TR>            <TR>              <TD><B>From:</B></TD>              <TD>                admin@work.com                <!--- include a hidden field to pass the FROM                      address to the action page --->                <INPUT TYPE="hidden" NAME="FromAddress"              VALUE="admin@work.com">              </TD>            </TR>              <TR>              <TD><B>Subject:</B></TD>              <TD>                <CFINPUT TYPE="Text" NAME="Subject" MESSAGE="Please enter a subject"  graphics/ccc.gifREQUIRED="Yes" SIZE="30" MAXLENGTH="50">              </TD>            </TR>            <TR>              <TD><B>Message:</B></TD>              <TD><TEXTAREA COLS="40" ROWS="6" NAME="Message" WRAP="Virtual">Type  your message here</TEXTAREA></TD>            </TR>            <TR>              <TD><FONT SIZE="-1" COLOR="#FF0000">all fields are  required</FONT></TD>              <TD><INPUT TYPE="submit" VALUE="Send Mail"></TD>            </TR>          </TABLE>        </CFFORM>    </BODY>  </HTML>
  2. Save the file as EmailForm.cfm in your Examples\Step07 folder. Browse to the page to check your handiwork. You should see a page similar to the one in Figure 7.2.

    Figure 7.2. The EmailForm.cfm browser display.

    graphics/07fig02.gif

    This form is pretty straightforward. We are using a CFFORM so that we can perform some client-side validation and to make sure that our users enter values in all the fields required by the <CFMAIL> tag on our action page. In our form, we are not allowing the sender to enter his address; rather, we are hard-coding it in the table and including a hidden form field to pass the FROM value to the action page. Alternatively, we could have hard-coded the FROM value on our action page. However, by handling it this way, we can use our SendEmail.cfm page as the action page for other forms as well. Next we will create the action page.

  3. In your text editor, type the code in Listing 7.2 or open the SendForm.cfm file from the CompletedFiles\Examples\Step07 folder.

    Listing 7.2 SendEmail.cfm
     <!--- File:             SendEmail.cfm  Description:      Sends email values from MailForm.cfm  Author:  Created:  --->  <!--- send email        substitute your smtp server name in the SERVER attribute --->  <CFMAIL TO="#Trim(FORM.ToAddress)#"          FROM="#Trim(FORM.FromAddress)#"          SUBJECT="#Trim(FORM.Subject)#"          SERVER="your.mailserver.here">  #Trim(FORM.Message)#  --------------------------- Official My Company Email.  </CFMAIL>  <HTML>    <HEAD>        <TITLE>Mail Confirmation</TITLE>    </HEAD>    <BODY>    <!--- Provide confirmation message --->    Your mail to <CFOUTPUT>#FORM.ToAddress#</CFOUTPUT> has been sent.<BR>    <A HREF="EmailForm.cfm">&laquo; back to email form</A>    </BODY>  </HTML>

  4. Make sure you substitute the name of your SMTP mail server in the Server attribute. Save this file as SendEmail.cfm in your Examples\Step07 folder.

    Our action page receives the variables posted from our form, trims them using the Trim() function, and uses them in our <CFMAIL> tag. The <CFMAIL> tag passes the message on to the nominated mail server and then displays a confirmation to the sender.

  5. Browse to the Email Form page. Fill out the form using your own email address in the TO field. Submit the form. You should see a confirmation page similar to the one in Figure 7.3.

    Figure 7.3. The SendEmail.cfm browser display.

    graphics/07fig03.gif

  6. Open your email client and check for the new message. The message should only take a few moments to arrive, but of course, your mileage might vary. You should see an email message similar to the one in Figure 7.4.

    Figure 7.4. The ColdFusion-generated email message.

    graphics/07fig04.gif

There are some things to note here: First note the blank line at the beginning of the message. Also note that all the line returns within our <CFMAIL> tags are preserved and displayed in our email message. Unlike most HTML and CFML code, which normally ignores line returns and extra spaces, all characters between the opening and closing <CFMAIL> tags are treated as plain text by default. This means that all characters are significant and will be preserved, including line returns and blank spaces.

NOTE

To get rid of the blank line at the beginning of the email, start the message body immediately after the opening <CFMAIL> tag, not on the next line. The following code illustrates how to do this:

 <CFMAIL TO="#Trim(FORM.ToAddress)#"          FROM="#Trim(FORM.FromAddress)#"          SUBJECT="#Trim(FORM.Subject)#"          SERVER="your.mailserver.here">#Trim(FORM.Message)#  --------------------------- Official My Company Email.  </CFMAIL>



    Team-Fly    
    Top
     



    ColdFusion MX. From Static to Dynamic in 10 Steps
    ColdFusion MX: From Static to Dynamic in 10 Steps
    ISBN: 0735712964
    EAN: 2147483647
    Year: 2002
    Pages: 140
    Authors: Barry Moore

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net