fordwebs.com ColdFusion form tutorial
Form Page
This tutorial will show you how to create a ColdFusion form that will include client-side and server-side validation of the form. Using both client-side and server-side validation will insure that you will get the input that you desire, even if the user has JavaScript disabled on their browser. It will also show you how to use the <CFMAIL> tag to email the form results.
Click here to download the files used in this tutorial.
We use a form.cfm page for the user's input and a response.cfm page to provide output to the user. We will create the form.cfm page first.
Create a dynamic page and save it as form.cfm
To add a form to the page add a <CFFORM> between the <body> and </body> tags. In Code View your page should look like this.
<!--- Begin ColdFusion Form --->
<cfform name="contactForm" action="response.cfm" method="post">
<!--- End ColdFusion Form --->
</cfform>
name="contactForm" - Just gives the form a name.
action="response.cfm" - Tells the browser to send the data to the response.cfm page.
method="post" - Tells the browser to send the data using form data. If you use GET instead of POST, the data would be added as a URL variable.
NOTE: Using <CFFORM> and the following <CFINPUT> tags is just like using <FORM> and <INPUT> tags. It just tells the ColdFusion server to process the tags. The resulting HTML on the processed page will be <FORM> and <INPUT> tags.
NOTE: I use ColdFusion comments <!--- and ---> to comment my code. I do that because if I, or someone else, come back to this form at a later time, the code will be easier to understand.
Add the <CFINPUT> fields to the form. We also added a table to format the form.
<!--- Begin ColdFusion Form --->
<cfform name="contactForm" action="response.cfm" method="post">
<table width="400" border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="right">First Name:</td>
<td>
<!--- First Name textfield - REQUIRED --->
<cfinput
type="text"
name="FirstName"
size="30"
required="yes"
message="Please enter your First Name!">
</td>
</tr>
<tr>
<td align="right">Last Name: </td>
<td>
<!--- Last Name textfield - REQUIRED --->
<cfinput
type="text"
name="LastName"
size="30"
required="yes"
message="Please enter your Last Name!">
</td>
</tr>
<tr>
<td align="right">Email:</td>
<td>
<!--- Email textfield - REQUIRED --->
<cfinput
type="text"
name="Email"
size="30"
required="yes"
message="Please enter your Email!">
</td>
</tr>
<tr>
<td align="right">Comments:</td>
<td>
<!--- Comments textarea - REQUIRED - will be validated on response page --->
<textarea name="Comments" cols="30" rows="5"></textarea>
</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<!--- Submit button --->
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</table>
<!--- End ColdFusion Form --->
</cfform>
Look at the first <CFINPUT> tag and review its purpose.
<cfinput
type="text"
name="FirstName"
size="30"
required="yes"
message="Please enter your First Name!">
cfinput - Tells the ColdFusion server to process the form.
type="text" - This denotes a standard <input> text field.
name="FirstName" - This will give the <cfinput> a name that we will use to retrieve its value on the response.cfm page.
size="30" - This controls how wide the <cfinput> will be.
required="yes" - This adds the client-side validation to the <CFINPUT>. The user will be required to input data to this field. ColdFusion creates the necessary JavaScript - when the page is processed - to validate that data has been entered into the field.
message="Please enter your First Name!" - This is used in the JavaScript prompt that a user will see if they submit the form and this field is left blank.
Note: There is not a ColdFusion equivalent to the <textarea> tag. We will use server-side validation on the response.cfm page to validate all of the form fields, including the <textarea>.
Response Page
Now for creation of the response.cfm page, the real work horse in this example.
Create a dynamic page and save it as response.cfm
First we will add some <CFPARAM> tags to prevent errors on the page if one of the form fields does not contain any data. The <CFPARAM> tags will create defaults in case the form doesn't receive the information it is expecting. In this case, we set the <CFPARAM> as empty if no input is received from the form.
<!--- Add cfparams to prevent errors on the page --->
<cfparam name="FORM.FirstName" default="">
<cfparam name="FORM.LastName" default="">
<cfparam name="FORM.Email" default="">
<cfparam name="FORM.Comments" default="">
Now create an empty error string that will be used for the server-side validation. Later on we will add code to tell the ColdFusion server to either process the form data or show the form again, depending on the contents of this string.
<!--- Create an empty error string --->
<cfset strError = "">
We will now add a <cfif> block that checks that the form is submitted. We do this so ColdFusion does not process the code if someone just browses to the response.cfm page. We will also redirect the user to the form.cfm page if they browse to the response.cfm page.
<!--- If the form is submitted --->
<cfif isDefined("FORM.Submit")>
<!--- If the form was not submitted --->
<cfelse>
<!--- Send the user to the form page --->
<cflocation addtoken="no" url="form.cfm">
</cfif>
Now we will add the server-side validation to the page.
This validation will add to the error string when the <cfif> is returned as true.
We will also use the Len and Trim ColdFusion functions. The Len function determines the length of the string you are evaluating, and the Trim function removes leading and trailing empty spaces.
Our comments explain the code, which inserts an additional error message for each field returned empty; meaning that upon submission of the form, the user receives an error message asking them to complete any empty field(s).
<!--- If the form is submitted --->
<cfif isDefined("FORM.Submit")>
<!--- If the First Name field is empty --->
<cfif Len(Trim(FORM.FirstName)) LT 1>
<!--- Add this to the error string --->
<cfset strError = strError & "Please enter your First Name!<br>">
</cfif>
<!--- If the Last Name field is empty --->
<cfif Len(Trim(FORM.LastName)) LT 1>
<!--- Add this to the error string --->
<cfset strError = strError & "Please enter your Last Name!<br>">
</cfif>
<!--- If the Email field is empty --->
<cfif Len(Trim(FORM.Email)) LT 1>
<!--- Add this to the error string --->
<cfset strError = strError & "Please enter your Email!<br>">
</cfif>
<!--- If the Comments field is empty --->
<cfif Len(Trim(FORM.Comments)) LT 1>
<!--- Add this to the error string --->
<cfset strError = strError & "Please enter your Comments!<br>">
</cfif>
<!--- If the form was not submitted --->
<cfelse>
<!--- Send the user to the form page --->
<cflocation addtoken="no" url="form.cfm">
</cfif>
Now you need to add a <cfif> block in the <body> of the page. This block will show the results of the form if there were no errors, or it will show the form again, with our built-in error messages, if there were any errors.
<!--- If the error string is still empty show the results --->
<cfif strError EQ "">
<!--- If the error string is not empty show the form again --->
<cfelse>
</cfif>
Next add the form results that will be returned if the error string is empty, which means the form was completed properly.
<!--- If the error string is still empty show the results --->
<cfif strError EQ "">
<p>Thank you for submitting our form.</p>
<p>You submitted the following information:</p>
<cfoutput>
<p>First Name: #Trim(FORM.FirstName)#<br>
Last Name: #Trim(FORM.LastName)#<br>
Email: #Trim(FORM.Email)#<br>
Comments: #Trim(FORM.Comments)#</p>
</cfoutput>
<p>Someone will contact you if necessary. </p>
<!--- If the error string is not empty show the form again --->
<cfelse>
</cfif>
<cfoutput></cfoutput> - Tells ColdFusion to parse the information between these tags.
First Name: #Trim(FORM.FirstName)# - The contents of the FirstName form field will be placed here.
Now add the <CFMAIL> tag to send the email. You add this inside the <cfif> block
<!--- Send the email --->
<cfmail
from="someone@yoursite.com"
to="otherperson@yoursite.com"
cc="#FORM.Email#"
subject="Online Form Submission"
server="mail.yoursite.com">
Thank you for submitting our online form.
You submitted the following information:
First Name: #Trim(FORM.FirstName)#
Last Name: #Trim(FORM.LastName)#
Email: #Trim(FORM.Email)#
Comments: #Trim(FORM.Comments)#
Someone will contact you if necessary.
</cfmail>
<!--- If the error string is not empty show the form again --->
<cfelse>
</cfif>
from="someone@yoursite.com" - This is the from address for the email. Most hosts require a valid email address from your domain.
to="otherperson@yoursite.com" - This is who will receive the email.
cc="#FORM.Email#" - The person submitting the form will receive a Carbon Copy (cc) of the email.
subject="Online Form Submission" - The subject of the email.
server="mail.yoursite.com" - Some hosts require this. others do not. Simply remove it if your host does not require it.
First Name: #Trim(FORM.FirstName)# - The contents of the FirstName form field will be placed here.
NOTE: The email will be formatted exactly as you have the contents of the <CFMAIL> tag.
NOTE: You can use friendly email addresses, which means that you can show a name in the from, to and cc fields like this:
from="Joe Someone <someone@yoursite.com>"
to="Jane Otherperson <otherperson@yoursite.com>"
cc="#Trim(FORM.FirstName)# #Trim(FORM.LastName)# <#Trim(FORM.Email)#>"
Now you need to add the form to the page again in case the error string is not empty. This is so your user can fill out the form correctly this time, without having to return to the form.cfm page.
We will make the form elements equal to the form fields that were submitted. Since we used the <CFPARAM> tag to set the defaults as empty, any form fields that were left blank will just be empty, and errors will not occur on the page.
We will also add a table row above the form to show the error message.
<!--- If the error string is not empty show the form again --->
<cfelse>
<!--- Begin ColdFusion Form --->
<cfform name="contactForm" action="response.cfm" method="post">
<table width="400" border="0" cellspacing="0" cellpadding="3">
<!--- Add table row to show error message --->
<tr>
<td colspan="2" align="center"><strong><cfoutput>#strError#</cfoutput></strong></td>
</tr>
<tr>
<td align="right">First Name:</td>
<td>
<!--- First Name textfield - REQUIRED --->
<cfinput
type="text"
name="FirstName"
size="30"
required="yes"
message="Please enter your First Name!"
value="#FORM.FirstName#">
</td>
</tr>
<tr>
<td align="right">Last Name: </td>
<td>
<!--- Last Name textfield - REQUIRED --->
<cfinput
type="text"
name="LastName"
size="30"
required="yes"
message="Please enter your Last Name!"
value="#FORM.LastName#">
</td>
</tr>
<tr>
<td align="right">Email:</td>
<td>
<!--- Email textfield - REQUIRED --->
<cfinput
type="text"
name="Email"
size="30"
required="yes"
message="Please enter your Email!"
value="#FORM.Email#">
</td>
</tr>
<tr>
<td align="right">Comments:</td>
<td>
<!--- Comments textarea - REQUIRED - will be validated on response page --->
<textarea name="Comments" cols="30" rows="5"><cfoutput>#FORM.Comments#</cfoutput></textarea>
</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<!--- Submit button --->
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</table>
<!--- End ColdFusion Form --->
</cfform>
</cfif>
We have just built a form for users to complete and a response page which allows them to either 1) send a message to us or 2) complete the form correctly and then send a us a message.
© Copyright 2008 Fordwebs, LLC All Rights Reserved.
