Chronoforms

Chronoforms is an extension for Joomla! that allows you to easily create forms.  The most common uses are to email information to someone (e.g. the results of a contact form) or store it in a database for later use.  I’ve used it to implement basic contact forms, appointment request forms and membership applications.  It’s surprisingly powerful, even for folks who don’t know the ins and outs of HTML, CSS and PHP.

Sending Email

With excellent support for sending email, Chronoforms allows one to generate multiple messages based on templates.  The blanks in the templates are filled in with information submitted via the form.  With a little imagination, you can create many useful responses.  For example, you could send one message to the user, thanking them for their submission, and send another to someone at your company with the details of the request.  If you need to set up an autoresponder that doesn’t have to do any calculations, I recommend using the native functionality provided.  The vendor supplies tutorials for installation, configuration and sending email.

Autoresponders with Calculations

Recently, I had a request from a customer to create a form for their Joomla! site that would automatically generate price quotes based on the user’s input.  This isn’t something that I’d done before using Chronoforms.  I knew that Chronoforms would allow me to capture the required information, but I’d never seen anything in the interface that hinted at the ability to run custom PHP code in order to perform calculations.

After some time spelunking the forum, I hit upon a solution posted by Bob Janes (a.k.a. Greyhead).  In a nutshell, you have to write some custom PHP code and add it to the “On Submit code – after sending email” field of your form, under the “Form Code” tab.

Creating the Form

If you want to do calculations, you’re going to need to know PHP, or hire someone who knows PHP.  Then create a form.  For this example, we’re going to create a form that collects information for a child’s birthday party to generate a price quote.  Such a form might appear on a site for the local pizza joint / indoor playground with a suspiciously large rodent theme.

Steps

Step 1: If you don’t have Chronoforms installed, visit the extension’s page to download it.

Step 2: Start the Chronoforms form wizard via Components -> Chronoforms -> Form Wizard

Step 3: In the “Toolbox” area on the right, click on the “TextBox” item and drag it into the form.

Step 4: Click on the item that you just dropped on the form and fill out the following fields:

1. Label: enter “Your email address”
2. Small Label: enter “email address”
3. Under “Validation”, check off
   1. “Required”
   2. “Email”
4. Field Name: replace “text_0″ with “email”
5. Click “Apply”, or the changes won’t be saved.

You can explore the functionality of the other properties to customize the form further.

Step 5: Repeat steps 3 and 4 twice more, using the following values:

1. Label: enter “Number of children”
2. Small Label: enter “# children”
3. Under “Validation”, check off
   1. “Required”
   2. “Digits Only”
4. Field Name: replace “text_1″ with “num_children”
5. Click “Apply”

1. Label: enter “Number of adults”
2. Small Label: enter “# adults”
3. Under “Validation”, check off
   1. “Required”
   2. “Digits Only”
4. Field Name: replace “text_1″ with “num_adults”
5. Click “Apply”

Step 6: Add a “submit” button. Drag the button control from the list on the right and drop it onto the form. It will become a submit button automatically.

Step 7: Create the email message that will come to you.  This is your copy of the information entered by the customer.  It does not go back to them.  Click on the big “Step 2 Choose Email(s) Settings” at the top.  This will take you to the screen where you add the email messages that you want to send when the form is submitted.  Click on the “New Email” button on the toolbar (see the image).

Step 8: Add the following minimum fields to your email and populate them:

1. To: This should be the email address that will receive the message.
2. Subject: A simple subject that will let you know that the message was the result of a form submission.
3. From Name: Chronoforms requires you to supply this.  It can be anything you want, but don’t use anything silly that’s likely to get caught in spam filters.
4. From Email: This should probably be an address that’s part of the same domain as the web-site.  E.g. if your site is www.example.com, the email address should be “forms@example.com”, “info@example.com”, etc.
5. Under the “Properties”, set “Enabled” to “yes”, then click “Apply”

Step 9: Skip “Step 3 Design Your Email(s)”.  Chronoforms will generate a template for you automatically.  You can always go back and tweak this.

Step 10: Click on “Step 4 After Form Submission”.  In the text area, enter any information that you would like to have displayed to the user after they submit their form.

Step 11: Save the form.  Click on the “Save” button on the toolbar.

Step 12: After saving your form in Step 11, you should be presented with the list of forms. Click on the name of your new form to open it. On the “General” tab, the second field from the top should be “Email the results?”. Set this to “Yes” and then click the “Apply” button on the upper left corner of the window. That will allow the email that you created in the steps above to be sent, alerting you when a customer has completed the form.

How to Run a Custom PHP Script with Chronoforms

All of that work got you a form that will email you the information supplied by the customer, but it won’t do any calculations to send the customer their price quote. For that, you need a custom PHP script. Here is the code that we’re using for this example. It has some comments to help you follow along if your PHP skills are weak. If they’re nonexistent, show it to a skilled PHP programmer or hire someone who knows PHP:

<?php

// Define some constants to be used later
define('CHILD_COST', 8.0);
define('ADULT_COST', 5.0);

// Set some values for the email headers
$from = 'info@example.com';
$fromname = 'Little Kids Parties';
$subject = 'Party Price Quote';

// Get values from the form
$recipient = $_POST['email'];
$child_count = isset($_POST['num_children']) ? intval($_POST['num_children']) : 0;
$adult_count = isset($_POST['num_adults']) ? intval($_POST['num_adults']) : 0;

// Do our calculations
$child_cost = $child_count * CHILD_COST;
$adult_cost = $adult_count * ADULT_COST;
$total_cost = $child_cost + $adult_cost;

// Define the body of the message
$html_message = <<<EOS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Requested Quote</title>
		<link rel="stylesheet" type="css/text" href="http://www.example.com/email_styles.css" />
	</head>
	<body>
		<p>Thanks for requesting a quote.  Here it is:</p>
		<table>
			<thead>
				<tr>
					<th>Item</th>
					<th>Cost</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td><strong>Total Cost</strong></td>
					<td><strong>\$$total_cost</strong></td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>Cost for $child_count children</td>
					<td>\$$child_cost</td>
				</tr>
				<tr>
					<td>Support for $adult_count adults</td>
					<td>\$$adult_cost</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
EOS;

// Call the Joomla! function to send the message
JUtility::sendMail( $from, $fromname, $recipient, $subject, $html_message, true );

?>

Step 13: After Step 12, you should be on the “General” tab of the form. Click on the “Form Code” tab. Find the field labeled “On Submit code – after sending email:” and click on the “[+/-]” to the right of it. That will open a text field.

Step 14: Paste the code into the field below the current contents. Do not overwrite the current contents, as that is what your users will see after they complete the form. Make sure that you’ve changed the example email addresses that I used to something legitimate.

Click the “Apply” button in the upper right corner to save the change.

Step 15: To test your form, create a menu item to link to it. Click on Menus -> Main Menu. Click the “New” button, and then click on “Chrono Forms”. Give it a title and then enter the name of the form in the “Form name” field on the right side under “Basic Parameters”. Make sure to enter it exactly or you’ll get an error when you try to use the form.

Conclusion

That’s it! Test out your new form. It should now generate two email messages – 1 to the customer with the price quote and one to you with the information that they put in the form. You can experiment with adding fields, improving validation and performing more complex calculations. Chronoforms also supports storing records in custom database tables, so check their documentation and tutorials to see if that might be useful to you.