Tech Stuff

ChronoForms for Joomla

This will take the form of an easy walk-through, touching on a few of the necessary-yet-obtuse tasks you have to make sure you handle along the way.

We’ll be working with the 2.5.x version of Joomla, by the way. In the previous iteration of the project I’m building, we were on the 1.5.x platform, forced there because of the version of PHP we were stuck with. Upgrading lets us use some features that WordPress users take for granted, like running updates through the browser and making backups. That reminds me, time to run Akeeba Backup…

That’s done, let’s return to the candy-colored Joomla interface to start building a form. I’m going to be pulling in components from a pre-existing form that I have to port over from the old installation.

Go to your dropdown menu for Components::ChronoForms::Forms Manager, then click the “New” icon.

At This Point you can switch over to the Easy Form Wizard, which avoids a lot of complications. But we love getting frustrated by complications so we’ll proceed with the Advanced mode.

Give it a name (only alphanumerics), then go into the “Code” tab and make the form type “Wizard.” Then click “Save and Close.” Nothing else needs to be configured at this point.

You’re now dropped back into the Forms Manager screen.

Click on the form title, you go back to the previous screen. Clicking on “Frontend view” gives you a blank screen, for one of the non-intuitive things we’ll get to later on.

We’re going to build the form, so we’ll choose the “Wizard edit” option.

Basically what you’ll be doing is dragging items from the left column into the Preview pane on the right. But wait. Take a look through all the elements, including the Advanced Elements tab. If you want to do fieldsets — which I think is really helpful — tabs or panes, you need to set those up first. Drag them in, and only then drag form elements in turn into the block. You can’t do it the other way around, you’ll have to delete the elements you created and build new ones. (The judges are already lowering the scores here.)

Then click on the icon to configure the container, give it a name, change the Container Type to Field Set, and click the blue “save” icon at the right edge.

Once you’ve done this, it might be a good idea to click “Save” in the menu bar. Do this periodically so you don’t get tricked into losing your work! If you do any wrong, you can always click the Configure button to make additional changes.

Your screen should refresh, and you should see the new legend for the fieldset. Next we’ll drag-and-drop a few elements into this block. Be sure they end up in the blue area, not above or below it. You can re-order things by clicking the middle icon.

The first fieldset of my form needs six text entry areas, two drop-downs, two sets of radio buttons, and a checkbox. I’ll drag them roughly into position, then re-order them like so:
As always, you can click on any of these for a larger view. The first thing sensible to do is give each one a proper label, and a couple of other characteristics. Click on the configure button, and give it a Label Text — what a user will see — and a Field Name. The field name is vital if you want to store your submissions in the database, as we will be doing. Follow the tips below so that you have something that you’ll understand the meaning of later, and that the MySQL database will accept. Don’t worry about the field lengths and so on right now. It’s nice that you can add IDs and class names, which will help you style the forms later on in CSS. But you’ll want to consider validation. All the fields in this project are mandatory, so I’ll go into the Validation tab and click “Required,” and optionally one of the types. This is for the field that captures the first name of a student, so I’m making it type Alpha. Then click the “Apply” button on the right edge.

You’ll also need to drag and drop a Submit button to the bottom of all this.

Later on I’ll have reason to do some of the others, like e-mail addresses, digits for ID numbers, and phone numbers. I’ll run through a few more of these, setting up fields for the Last Name and ID number, and a set of radio buttons for the student’s year (Junior, Senior, etc.). I find it helpful to do a lot of the same kind of thing in repetition, so that I remember the steps better.

Here’s how to build a set of radio buttons. As before, check the validation tab if you need to. Building a select box is almost identical. At this point you’re going to be tempted to click “Test Form” and see what your form looks like. Heck, you may have done that already, been frustrated, gone to Google, cursed me out for not covering it, and so on. Well who am I to criticize you for not reading through the instructions first? It’s one of the main reasons I get so frustrated with these things myself! If you’ve clicked “Test Form” you’ve been treated to this:

There are two reasons for this bizarre result. One is that you haven’t put it into a page template, so you’re not really viewing it as part of the site. The other, stranger reason is that you haven’t set any Actions. So let’s go to the Actions tab.

The single most annoyingly non-intuitive thing (the judges take off a few tenths more) is that you have to actually tell the form to display. In the Actions tab, under “Core Actions,” drag “Show html” over into the On Load box.

As an aside, is this an ugly set of colors or what?

I fully understand why you might want to do something other than load up the HTML first. We have a form for another purpose here where you have to click that you’ve read the instructions before you can enter anything. Ironically enough. I suppose if you want default actions you use the Simple Wizard. It follows many of the same steps

But since we’re here, let’s go ahead and put in a few more actions.

From the Anti Spam section, we’ll do Load Captcha, please go in and allow the Refresh, because sometimes they’re too hard to read.

Into the On Submit area we’ll pop open Validation and put Auto JavaScript Validation — which you can omit if you’re not doing any validation –, and from Anti Spam we’ll select Check Captcha. This comes with two different contains into which you can drag functions to fire off if it’s approved or if it fails. We’re not doing that here, though.

From the Data/DB Operations tab, drag in DB Save, and from the Redirect/Remote Submit area drag in Redirect User. It looks like this now:

Click “Save,” and now you should be able to see your bare-bones form in the Test Form area.

A couple of additional configurations are needed for these last items, so go back into your Actions page, click the Configure button for the Redirect URL and enter a Target URL. I’ve set up a separate “Thank You For Submitting” page, and use that URL.

The other settings you need to create are for your database. But you can’t do that until you have the entire form built. Let’s assume we have. You’ll go into the Forms Manager screen and tick the checkbox next to your form, and then click on the button for “Create Table.”

It will automatically generate a table name and put it into the default database. By default, you can leave everything as-is. But check to make sure your field names are what you expect. When you export data later on, you don’t want to have to go back and look up what exactly “input_text_14” is supposed to represent.

You might recognize this as a typical database table constructor. There are columns for data type, field size, primary key, default values, extra (an auto-increment field) and null.

After you’ve created your table and saved it, then you need to go back into your Actions screen, and click the Configure icon for DB Save, and pick your new table from the dropdown menu. Be sure it’s enabled.

Apply your changes, and save the form. At this point you should be good to go. Make a menu entry for your new form that way you would with other kinds of modules. The Menu Item Type is going to be “Chronoforms Display Form.” In “Basic Options” enter the Form Name you assigned to this one in the first step. Then you should be able to preview your form and submit a test run of data.

To retrieve your data, go into the Forms Manager, tick the box next to the form and don’t click Show Data. Even though you’ve associated a data table with the form, you still have to pick it from the Tables Connected dropdown. Sigh.

Then you can click on it. Unfortunately it shows a lot of fields that are only going to confuse and irritate the admins who will be working with this data. Good fields for you; not so much for them. To fix this, go back into your Forms Manager and click on the name of the form. From there, pick the tab for Data View and ctrl-click the fields you want to display, then then Save and Close.

After you’ve done that, you can safely go into the Forms Manager, check your form, select the table, and see your glorious data. Even export it!

And there it is. So simple a programmer with 17 years of Internet experience can do it.

Snarky? I know, but we’re snarky about a half-dozen things before breakfast here at world headquarters. It’s wonderful that it can do so many things, and a pretty solid package.

Tom McGee has been building web sites since 1995, and blogging here since 2006. Currently a senior developer at Seton Hall University, he's also a freelance web programmer and musician. Contact him if you have the need for a blog, web site, redesign or custom programming!

One thought on “ChronoForms for Joomla

  1. Hello Tom

    Firstly ,Thanks for your Blog .

    I am creating a website with Chronoforms and I want to display data from the form on the home page of the website .

    The form will receive all classified ads about stolen car .And all classified ads inserted on the form will be displayed on the Home page .

    Could you please tell me what php or html code to use in order to link the form with the home page and where to insert it in the website ?

    Thanks for your help .

    Best Regards


Leave a Reply

Your email address will not be published. Required fields are marked *