ColdFusion Mad Libs (Part 1 of 2)

With the narrative set, create a file named madlibs_1.cfm. Inside, build a simple form that contains seven <input> elements. Each input should have a descriptive name attribute so the second page can reference it easily. The form also includes a small JavaScript function called validateFields() that runs when the user clicks submit. This routine loops through every field; if one is empty, it alerts the visitor, focuses the empty field, and stops the form from sending. Even though the script is straightforward, it prevents the second page from receiving incomplete data, which would otherwise produce a story that looks like a patchwork of blanks.

The form tag looks like this: <form action="madlibs_2.cfm" method="post" onsubmit="return validateFields(this);">. Notice the onsubmit attribute that calls the validator. If the script returns false, the form is not submitted. The validator itself can be placed inside a <script> block at the top of the file or referenced from an external .js file - both options work fine.

When you’re satisfied with the form layout, publish madlibs_1.cfm to your web server and open it in a browser. Fill in the fields with your own silly choices: maybe dragon for the noun, quickly for the adverb, and so on. After submitting, the browser should navigate to madlibs_2.cfm and display the finished story. At this point the front end is complete.

Next you’ll focus on the second page. Begin with a <cfsilent> block at the very top of the file. Because you’re delivering XHTML, the first line of the response must be the XML declaration <?xml version="1.0" encoding="utf-8"?>. Any whitespace or output generated before that declaration breaks compliance. By wrapping the initial ColdFusion logic in <cfsilent>, you suppress unwanted whitespace and keep the document valid.

Within that same block, use cfif and structKeyExists() to verify that the request actually came from the form. The expression cfif NOT structKeyExists(form, "ff_1") checks if the key ff_1 (the first field you named) exists in the form scope. If it doesn’t, redirect the visitor back to the form page or display an error. This test is faster than isDefined() because it bypasses string parsing and works directly with the form structure.

After the validation block, the page can safely access each form field. Use cfoutput tags to echo the values into the story. For example: <cfoutput>#form.ff_1# and #form.ff_2# went up the #form.ff_3# to #form.ff_4# a #form.ff_5# of #form.ff_6#.<br />. You can insert line breaks with <br /> to preserve the original rhyme’s rhythm.

When you preview madlibs_2.cfm, the placeholders should be replaced by the user’s input, creating a personalized and often comical version of the story. You’ll notice that the output is clean, with no stray tags or whitespace that could disrupt the page’s layout.

This basic structure works well for a one‑time visitor. If you want to add a social element - such as letting users save their stories for later or view a gallery of past Mad Libs - just extend the second page. In Part 2 of this tutorial, you’ll learn how to store completed stories in a database. That step involves a simple cfquery insert statement, a table schema that holds each field, and a page that loops through records to display them. By the end of the series, you’ll have a fully functional Mad Libs application that encourages repeat visits and community interaction.

The Processing Page: From Form to Story

When a visitor clicks the submit button on madlibs_1.cfm, the browser sends a POST request to madlibs_2.cfm. ColdFusion receives the request, populates the form scope with the submitted values, and begins executing the page from top to bottom. The first thing you’ll see in the source is a <cfsilent> block, the single line that keeps the XHTML declaration pristine.

Inside that block, the cfif statement protects against accidental or malicious requests that bypass the front‑end form. Because the code uses structKeyExists(form, "ff_1"), it checks whether the key ff_1 is present before trying to use it later. If the key is missing, the code might output an empty string or, better yet, redirect back to the form. This check is a lightweight alternative to isDefined() and ensures that every story you render has all the necessary components.

Once the guard passes, the rest of the page becomes a series of <cfoutput> statements that pull values from the form scope and weave them into the narrative. Here’s a typical pattern:

Because ColdFusion parses the tags before sending the response, you don’t need to escape quotes or worry about HTML injection in this context. The values the visitor typed will appear exactly as entered, which is what makes Mad Libs fun - you get a literal, sometimes outrageous, combination of words.

The example in the original article shows a whimsical story: PABLO and SHANIA TWAIN went up the STREET to DRINK a pail of BEER. PABLO fell down and broke his COMPUTER and SHANIA TWAIN came SQUARE‑DANCING after. Notice how the placeholders are replaced by user input, producing a playful narrative that reads naturally. You can experiment with different word categories to keep the game fresh - add a noun, a verb in past tense, or even a color to spice things up.

After you finish the cfoutput block, the rest of the page may include a simple <cfoutput>#form.ff_7#</cfoutput> to display the seventh field, a final line break, or a link that invites the user to play again. If you want to capture the story for later, you can wrap the output inside a cfquery that inserts the values into a database table. Each column would correspond to a field, and you could store the combined story text for quick retrieval.

In practice, you’ll often want to keep the processing page focused on rendering, leaving data persistence to a separate action script. That way, the page that displays the story can remain lightweight and fast, while a background job or a dedicated form handler takes care of logging and analytics.

Once your processing page is functioning, test it thoroughly. Try leaving a field blank in the form; the JavaScript validator should prevent submission. Verify that the story updates correctly when you change any word. Finally, make sure the page’s output starts with the XML declaration and contains no leading whitespace. Tools like the W3C Markup Validation Service can confirm XHTML compliance.

With this foundation in place, you can enhance the application in numerous ways. Add CSS to style the form and story output, incorporate jQuery UI widgets for nicer input fields, or even use ColdFusion’s built‑in cfmail tag to send the finished story to a friend. The part two tutorial will walk you through storing stories in a database, but even without that feature, the simple two‑page solution offers a delightful interactive experience for visitors. Happy coding, and enjoy watching the laughs roll in from your Mad Libs page!