Greyhead.net

The HTML produced by the ChronoForms Form Wizard puts each field into a single column. This works well for short forms but may not always be useful for longer or more complex forms. We'll see later how you can add your own HTML. Here, we'll look at one small way that ChronoForms can help.

This article is from Chapter 3 “Styling your Form” of The ChronoForms Book and is included here with permission from Packt Publishing.

Getting ready

We'll work with a form that has three short text fields intended to input a date (day, month, and year). Created with the Wizard it looks like this:

How to do it...

1. Open the form again with Wizard Edit then drag a MultiHolder into the workspace.
   

   The MultiHolder needs to go after the elements that are to be placed into it.

   

2. In the Properties for the MultiHolder is an Elements box. You enter the numbers of the elements that you want to include in the MultiHolder here. Unfortunately, ChronoForms doesn't give you any easy way of finding out what these numbers are. They are the order in which elements were added, starting with 1, so a little trial and error is sometimes required.
3. Once the MultiHolder is applied, the form looks like this:
   

   

   Here we've used the Hide Label checkbox in the Properties box of the MultiHolder element to hide the Click Me to Edit text in the displayed form.

4. This is still not ideal but with a little more tweaking of the code and styling this can be very useful.

There are different styles of laying out both JavaScript and PHP and sometimes fierce debates about where line breaks and spaces should go. We've adopted a style here that is hopefully fairly clear, reasonably compact, and more or less the same for both JavaScript and PHP. If it's not the style you are accustomed to, then we're sorry.