Creating a simple form with the Form Wizard

ChronoForms is all about creating forms so this is where all the proper action starts.

Forms in Joomla! can do many things, from the very simple example that we will create here, to complex multi-page forms that change depending on the entries that are made, do calculations, send e-mails, and update databases. However, the basic building blocks are just the same.

In this recipe, we're going to create just about the simplest form possible. It's a newsletter signup with just one field for an e-mail address and a submit button:

Getting ready

All you need is a Joomla! site with ChronoForms installed.

How to do it...

1. 1. Go to the ChronoForms Forms Manager and click on Form Wizard, or choose Components | ChronoForms | Form Wizard from the Administrator Menus.

   The Form Wizard tab opens up looking like this:

   

2. 2. There are four steps that the Wizard can help with, though we're only going to use Step 1 Design your form here. There's an empty work area with Preview and Save icons to the top left and a Toolbox to the right with a Properties box below it that is currently empty. To the top right of the image is a Cancel button in case you change your mind.

   Note

   You can also click the other blue links above the "Steps" — Forms Management, Wizard Custom Elements, and so on — but if you do so without saving first, you will lose your work.

3. 3. For our form we want a textbox for the e-mail address. Use your mouse to drag the Textbox entry from the Toolbox into the empty workspace.

   

4. 4. Once you drop the textbox into the workspace, you can see a new form element. When that is clicked, the Properties box for the form element opens up under the Toolbox.

   

   This isn't the world's easiest screen layout but it will be fine once you get used to it.

5. 5. There are a whole row of properties that you can set, but we're only going to change one right now. Click the form element so that the Properties box is open, then go to the input marked Label and delete the Click Me to Edit text; instead type Email. Then click Apply at the bottom of the Properties box.

   Although you can type into the input box in the workspace at the left, that has no effect. So, just leave it empty. You should only make changes in the Property box.

   Note

   Clicking Apply here records the properties. If you make a change then click on another element, or save the form without clicking Apply first, your changes will be lost. Note that Apply here does not save your form.

6. 6. When you've relabeled the element, drag a Button into the workspace.

   

   The button is automatically labelled as a Submit button. You can change this in the (much smaller) Properties box, but we'll leave it just as it is for now.

7. 7. Now click the "blue screen" icon at the top left of the workspace to see a preview of our form.

   The preview opens in a "modal" window over the working area. While this is open you will not be able to access the administrator menus or tools. The preview is shown in the following screenshot:

   

8. 8. Perfect, now we just need to save it. Close the Form Preview window from the close link at the top right-hand corner, and then click the "floppy disk" icon to save the form.

   

9. 9. Type a name in the box. Let's use "newsletter_signup" and click Save.

   Note

   Warning: The text box here will accept almost anything but some choices of name will cause problems later. The rule to follow is: Only use a-z 0-9 and underscore (no capital letters, no spaces, no dashes, or any other special or accented characters). We'll see these same rules applied later to names and IDs, and it's useful to be consistent here.

10. 10. When you click Save, you'll be taken back to the Forms Manager, where there should now be a form in the list.

    

    Reading across the form row, the entries are :

    • # (form number): This is just the place in the list and may change

    • Form ID: The unique ID of the form

    • Checkbox: A check box is used for selecting the form when we want to work with some ChronoForms features

    • Name: This is a link, if you click it the Form will open for editing

    • Link: We'll come back to this in a minute

    • Emails and Tables Connected: We'll save this for later

    • Publish: The red icon shows the form is not available in the site front end and an error message will be displayed if the link is clicked

11. 11. Click the publish icon now to make this form available and, after a moment, the icon should change to a green tick to show that the form is now published.

    Note

    You can also use the Publish and Unpublish icons in the Toolbar, which is useful if you want to change more than one form at a time.

12. 12. Go back to the Link column and click on the form link there. This will open the form in a new browser window or tab showing the form as it will appear on your website.

    

13. 13. And there we have it, our first fully-functioning ChronoForms form.

    You can submit it, but nothing will happen yet. We have to set up a little more code to tell ChronoForms what to do when the submit button is pressed.

How it works...

There's been quite a lot going on behind the scenes here. The ChronoForms Form Wizard builds a set of Form HTML for your form. It also applies some CSS styling and sets up the framework for a lot more features and functionality that we will come to shortly.

Here's the Form HTML that's been generated for this form, copied from inside the Form Editor, as we'll see later:

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">
Email</label>
<input class="cf_inputbox" maxlength="150" size="30"
title="" id="text_0" name="text_0" type="text" />
</div>
<div class="cfclear">&nbsp;</div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" name="button_1" type="submit" />
</div>
<div class="cfclear">&nbsp;</div>
</div>