ColdFusion Form Tutorial

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.

This form page will submit to itself for ease of future maintenance of the page. The first step is to create a page called form.cfm

Add a <CFFORM> to the page:

<!--- Begin ColdFusion Form --->
<cfform id="contactForm" name="contactForm" method="post" action="#CGI.SCRIPT_NAME#">
</cfform>

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.

id="contactForm" name="contactForm" - Just gives the form an id and name.

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.

action="#CGI.SCRIPT_NAME#" - Tells the page to submit to itself.

Inside of that <CFFORM> we will add a table to hold all of the form elements in a neat manner:

<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="right"><strong>First Name:</strong></td>
<td>
<!--- First name input - REQUIRED --->
<cfinput
type="text"
name="FirstName"
id="FirstName"
required="yes"
message="Please enter your First Name!"
value="#Trim(FORM.FirstName)#" />
</td>
</tr>
<tr>
<td align="right"><strong>Last Name:</strong></td>
<td>
<!--- Last name input - REQUIRED --->
<cfinput
type="text"
name="LastName"
id="LastName"
required="yes"
message="Please enter your Last Name!"
value="#Trim(FORM.LastName)#" />
</td>
</tr>
<tr>
<td align="right"><strong>Email:</strong></td>
<td>
<!--- Email input - REQUIRED --->
<cfinput
type="text"
name="Email"
id="Email"
required="yes"
message="Please enter your Email!"
value="#Trim(FORM.Email)#" />
</td>
</tr>
<tr>
<td align="right"><strong>Comments:</strong></td>
<td>
<!--- Comments textarea - REQUIRED --->
<cftextarea
name="Comments"
id="Comments"
cols="30"
rows="5"
required="yes"
message="Please enter your Comments!"><cfoutput>#Trim(FORM.Comments)#</cfoutput></cftextarea>
</td>
</tr>
<tr>
<td>
<!--- Hidden field used to tell server to process form --->
<cfinput
type="hidden"
name="doForm"
id="doForm"
value="true">
</td>
<td>
<!--- Submit button --->
<cfinput
type="submit"
name="Submit"
id="Submit"
value="Submit" />
</td>
</tr>
</table>

 Look at the first <CFINPUT> tag and review its purpose.

<cfinput
type="text"
name="FirstName"
id="FirstName"
required="yes"
message="Please enter your First Name!"
value="#Trim(FORM.FirstName)#" />

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.

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.

value="#Trim(FORM.FirstName)#" - This will make the form element equal to the form field that was submitted. The Trim function removes leading and trailing empty spaces.

NOTE: If you view the page in a browser at this point you will get a ColdFusion error like this:

Element FIRSTNAME is undefined in FORM.

This happens because we have not set the <CFPARAM> default for the form elements yet.

Next 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. We will add these tags to the top of the page, before any content.

<!--- 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.

We will also create a string that will be used to tell the ColdFusion server to either process the form data or show the form again, depending on the contents of the string.

<!--- Create an empty error string --->
<cfset strError = "">
<!--- Create an string to show the form and set it to true--->
<cfset showForm = "true">

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.doForm") AND FORM.doForm EQ "true">
</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 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>

Now we add another <CFIF> block to add the <CFMAIL> tag to send the email if there were no errors on the page.

<!--- If the error string is still empty --->
<cfif strError EQ "">
<!--- Set showForm as false --->
<cfset showForm = "false">
<!--- Send the email --->
<cfmail
from="validemail@yoursite.com"
to="#FORM.Email#"
cc="someone@yoursite.com"
replyto="#FORM.Email#"
subject="cfnoob.com Online Form"
server="mail.yoursite.com"
username="validuser"
password="validuserpassword">
Thank you for submittong 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>
</cfif>

from="validemail@yoursite.com" - This is the from address for the email. Most hosts require a valid email address from your domain.

to="#FORM.Email#" - The person submitting the form will receive the email.

cc="someone@yoursite.com" - This person will receive a Carbon Copy (cc) of the email.

subject="cfnoob.com Online Form" - 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.

username="validuser" - This is a valid email user from your site.

password="validuserpassword" - This is the valid email user's password

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)#>"

Next we will add a <CFIF> block to show the error message if strError is not empty. This will be added right above the <CFFORM>.

<!--- If the error string is not empty --->
<cfif strError NEQ "">
<!--- Show the contents of the error string --->
<p><strong>Please fix the following errors:<br />
<cfoutput>#strError#</cfoutput></strong></p>
</cfif>

Now we will wrap the <CFFORM> inside a <CFIF> block that will show the form if showForm is equal to true.

We will also use a <CFELSE> to show the form response.

<!--- Show the form if showForm is set to true --->
<cfif showForm EQ "true">
<!--- Show the form results if showForm is set to false --->
<cfelse>
<h1>Thank you!</h1>
<p>Thank you for submitting our form.</p>
<p>You submitted the following information:</p>
<cfoutput>
<p><strong>First Name:</strong> #Trim(FORM.FirstName)#<br />
<strong>Last Name:</strong> #Trim(FORM.LastName)#<br />
<strong>Email:</strong> #Trim(FORM.Email)#<br />
<strong>Comments:</strong> #ParagraphFormat(Trim(FORM.Comments))#</p>
</cfoutput>
<p>Someone will contact you if necessary.</p>
</cfif>

Now we are going to add some SPAM protection to the page. This first section of SPAM control can be added to any form. The second section of SPAM control can only be used on ColdFusion 8 or later.

For the first section we will need to add a CSS style to the page that will hide the form element from view. This will be added between the <head> and </head> tags on the page.

<style type="text/css">
<!--
.special {
display:none;
}
-->
</style>

Now we will add a text input to the form that is wrapped in this CSS class.

<div class="special">
<input type="text" name="moreInformation" id="moreInformation" value="More information here!" />
</div>

Then we add the error checking to make sure that the value of this text input has not changed. We do this because robots will see this text input and change it and normal people will not even see the text input because of the dispay:none CSS.

<!--- If the moreInformation text input is changed a robot is trying to SPAM --->
<cfif Trim(FORM.moreInformation) NEQ "More information here!">
<!--- Add this to the error string --->
<cfset strError = strError & "Please don't try to SPAM me!<br />">
</cfif>

This section of SPAM protection is only available on ColdFusion 8 or higher. It uses the <CFIMAGE> tag and CAPTCHA to display an image with some text in it that must be verified by the person submitting the form.

The following code is added to the top of the page after the <CFPARAM> definitions.

<!--- Set the length of the text string for the CAPTCHA image. --->
<cfset stringLength=6>
<!--- Specify the list of characters used for the random text string. The following list limits the confusion between upper- and lowercase letters as well as between numbers and letters. --->
<cfset stringList="2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z">
<cfset rndString="">
<!--- Create a loop that builds the string from the random characters. --->
<cfloop from="1" to="#stringLength#" index="i">
<cfset rndNum=RandRange(1,listLen(stringList))>
<cfset rndString=rndString & listGetAt(stringList,rndNum)>
</cfloop>
<!--- Hash the random string. --->
<cfset rndHash=Hash(rndString)>

Now we need to add the image and a text input to the page to validate it.

<!--- Hidden field with CAPTCHA VALUE --->
<cfinput
type="hidden"
name="hashVal"
id="hashVal"
value="#rndHash#">
<!--- Image holding CAPTCHA VALUE --->
<cfimage
action="captcha"
fontsize="24"
fonts="Times New Roman"
width="200"
height="50"
text="#rndString#">
<!--- capText text input - REQUIRED --->
<cfinput
type="text"
name="capText"
id="capText"
required="yes"
message="Please enter the text above!" />

And now we need to add the error checking to ensure the correct CAPTCHA data was entered.

<!--- If the CAPTCHA values are not equal --->
<cfif #FORM.hashVal# NEQ Hash(#FORM.capText#)>
<!--- Add this to the error string --->
<cfset strError = strError & "The text you entered was incorrect!<br />">
</cfif>

The code for the entire page looks like this.

<!--- 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="">
<!--- Set the length of the text string for the CAPTCHA image. --->
<cfset stringLength=6>
<!--- Specify the list of characters used for the random text string. The following list limits the confusion between upper- and lowercase letters as well as between numbers and letters. --->
<cfset stringList="2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z">
<cfset rndString="">
<!--- Create a loop that builds the string from the random characters. --->
<cfloop from="1" to="#stringLength#" index="i">
<cfset rndNum=RandRange(1,listLen(stringList))>
<cfset rndString=rndString & listGetAt(stringList,rndNum)>
</cfloop>
<!--- Hash the random string. --->
<cfset rndHash=Hash(rndString)>
<!--- Create an empty error string --->
<cfset strError = "">
<!--- Create an string to show the form and set it to true--->
<cfset showForm = "true">
<!--- If the form is submitted --->
<cfif isDefined("FORM.doForm") AND FORM.doForm EQ "true">
<!--- 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 moreInformation text input is changed a robot is trying to SPAM --->
<cfif Trim(FORM.moreInformation) NEQ "More information here!">
<!--- Add this to the error string --->
<cfset strError = strError & "Please don't try to SPAM me!<br />">
</cfif>
<!--- If the CAPTCHA values are not equal --->
<cfif #FORM.hashVal# NEQ Hash(#FORM.capText#)>
<!--- Add this to the error string --->
<cfset strError = strError & "The text you entered was incorrect!<br />">
</cfif>
<!--- If the error string is still empty --->
<cfif strError EQ "">
<!--- Set showForm as false --->
<cfset showForm = "false">
<!--- Send the email --->
<cfmail
from="validemail@yoursite.com"
to="#FORM.Email#"
cc="someone@yoursite.com"
replyto="#FORM.Email#"
subject="cfnoob.com Online Form"
server="mail.yoursite.com"
username="validuser"
password="validuserpassword">
Thank you for submittong 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>
</cfif>
</cfif>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Page</title>
<style type="text/css">
<!--
.special {
display:none;
}
-->
</style>
</head>
<body>
<!--- Show the form if showForm is set to true --->
<cfif showForm EQ "true">
<!--- If the error string is not empty --->
<cfif strError NEQ "">
<!--- Show the contents of the error string --->
<p><strong>Please fix the following errors:<br />
<cfoutput>#strError#</cfoutput></strong></p>
</cfif>
<!--- Begin ColdFusion Form --->
<cfform id="contactForm" name="contactForm" method="post" action="#CGI.SCRIPT_NAME#">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="right"><strong>First Name:</strong></td>
<td>
<!--- First name input - REQUIRED --->
<cfinput
type="text"
name="FirstName"
id="FirstName"
required="yes"
message="Please enter your First Name!"
value="#Trim(FORM.FirstName)#" />
</td>
</tr>
<tr>
<td align="right"><strong>Last Name:</strong></td>
<td>
<!--- Last name input - REQUIRED --->
<cfinput
type="text"
name="LastName"
id="LastName"
required="yes"
message="Please enter your Last Name!"
value="#Trim(FORM.LastName)#" />
</td>
</tr>
<tr>
<td align="right"><strong>Email:</strong></td>
<td>
<!--- Email input - REQUIRED --->
<cfinput
type="text"
name="Email"
id="Email"
message="Please enter your Email!"
validateat="onSubmit"
validate="email"
required="yes"
value="#Trim(FORM.Email)#" />
</td>
</tr>
<tr>
<td align="right"><strong>Comments:</strong></td>
<td>
<!--- Comments textarea - REQUIRED --->
<cftextarea
name="Comments"
id="Comments"
cols="30"
rows="5"
required="yes"
message="Please enter your Comments!"><cfoutput>#Trim(FORM.Comments)#</cfoutput></cftextarea>
</td>
</tr>
<tr>
<td>
<!--- Hidden field with CAPTCHA VALUE --->
<cfinput
type="hidden"
name="hashVal"
id="hashVal"
value="#rndHash#">
</td>
<td>
<!--- Image holding CAPTCHA VALUE --->
<cfimage
action="captcha"
fontsize="24"
fonts="Times New Roman"
width="200"
height="50"
text="#rndString#">
</td>
</tr>
<tr>
<td align="right"><strong>Enter text above:</strong></td>
<td>
<!--- capText text input - REQUIRED --->
<cfinput
type="text"
name="capText"
id="capText"
required="yes"
message="Please enter the text above!" />
</td>
</tr>
<tr>
<td>
<!--- Hidden field used to tell server to process form --->
<cfinput
type="hidden"
name="doForm"
id="doForm"
value="true">
<div class="special">
<input
type="text"
name="moreInformation"
id="moreInformation"
value="More information here!" />
</div>
</td>
<td>
<!--- Submit button --->
<cfinput
type="submit"
name="Submit"
id="Submit"
value="Submit" />
</td>
</tr>
</table>
</cfform>
<!--- End ColdFusion Form --->
<!--- Show the form results if showForm is set to false --->
<cfelse>
<h1>Thank you!</h1>
<p>Thank you for submitting our form.</p>
<p>You submitted the following information:</p>
<cfoutput>
<p><strong>First Name:</strong> #Trim(FORM.FirstName)#<br />
<strong>Last Name:</strong> #Trim(FORM.LastName)#<br />
<strong>Email:</strong> #Trim(FORM.Email)#<br />
<strong>Comments:</strong> #ParagraphFormat(Trim(FORM.Comments))#</p>
</cfoutput>
<p>Someone will contact you if necessary.</p>
</cfif>
</body>
</html>

7 comments - Posted by Ken Ford at 12:21 AM - Categories: Tutorials | CFFORM | ColdFusion