Styling your Joomla! form using ChronoForms

Exclusive offer: get 50% off this eBook here
ChronoForms 3.1 for Joomla! site Cookbook

ChronoForms 3.1 for Joomla! site Cookbook — Save 50%

80 recipes for building attractive and interactive Joomla! forms

$26.99    $13.50
by Bob Janes | August 2010 | Joomla! Content Management Open Source Web Development

Joomla! is a fantastic way to create a dynamic CMS. Now, you want to go to the next step and interact with your users. Forms are the way you ask questions and get replies. ChronoForms is the extension that lets you do that and this article tells you how.

In this article by Bob Janes, author of the book ChronoForms 3.1 for Joomla! site Cookbook , we will cover:

  • Using ChronoForms default style
  • Switching styles with "Transform Form"
  • Adding your own CSS styling
  • Putting several inputs in one line
  • Adding your own HTML

(For more resources on ChronoForms, see here.)

Introduction

Styling forms is more a subject for a book on Joomla! templating, but as not all templates handle it very well, ChronoForms has some basic formatting capabilities that we will look at here.

We'll look at two areas—applying CSS to change the "look and feel" of a form and some simple layout changes that may be helpful.

We'll be assuming here that you have some knowledge of both CSS and HTML.

Using ChronoForms default style

ChronoForms recognizes that many Joomla! templates are not strong in their provision of form styling, so it offers some default styling that you can apply (or not) and edit to suit your needs.

Getting ready

It might be helpful to have a form to look at. Try creating a test form using the ChronoForms Wizard to add "one of each" of the main inputs to a new form and then save it.

How to do it...

Each of the five steps here describes a different way to style your forms. You can choose the one (or more) that best meets your needs:

  1. When you create a form with the Wizard, ChronoForms does three things:
    • Adds some <div> tags to the form HTML to give basic structure
    • Adds classes to the <div> tags and to the input tags to allow CSS styling
    • Loads some default CSS that uses the classes to give the form a presentable layout

    If you look at the Form HTML created by the Wizard you will see something like this (this is a basic text input):

    <div class="form_item">
    <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">
    Click Me to Edit</label>
    <input class="cf_inputbox" maxlength="150" size="30"
    title="" id="text_2" name="text_2" type="text" />
    </div>
    <div class="cfclear">&nbsp;</div>
    </div>

    This example uses the default values from the Wizard. The label text, size, and name may have been changed in the Wizard Properties box.

    There is a wrapper <div> with a class of form_item. Then, there is a second wrapper around the <label> and <input> tags with two classes—form_element and cf_textbox.

    There are the <label> and <input> tags themselves with classes of cf_label and cf_inputbox respectively.

    And lastly there is an "empty" <div> with a class of cfclear that is used to end any CSS floats used in styling the previous tags.

    The coding for other types of input is very similar, and usually the only difference is the class of the input tag and the <div> tag wrapped around the label and the input.

    There is nothing very special about any of this; it provides a basic framework for styling.

    You can't change the default styling used by the Wizard but you can use your own HTML, or edit the Form HTML created by the Wizard. If you change the class names or override the ChronoForms CSS styling with your own styles, then the ChronoForms CSS will no longer apply.

    Here's what the test form looks like with the default ChronoForms styling:

  2. To see the effect of the ChronoForms CSS, open the form in the Form Editor. Go to the General tab, open Core/View Form Settings, and change Load Chronoforms CSS/ JS Files to No.

    Save the form and refresh the front-end view. Here is the same form without the ChronoForms CSS styling loaded. Not so pretty, but still fully functional.

    Note: If you create your form in the Form Editor rather than the Wizard, the default setting for Load Chronoforms CSS/JS Files is No. So, you need to turn it on if you want to use the default styling.

See also

Switching styles with "Transform Form"

The ChronoForms default styling doesn't always suit. So, ChronoForms provides a basic form theming capability. There are only two themes provided—"default" and "theme1".

Getting ready

We're using the same form as in the previous recipe.

How to do it...

  1. In the Forms Manager, check the box next to your form name and then click the Transform Form icon in the toolbar.

    You will see a warning that using Transform Form will overwrite any manual changes to the Form HTML and two form images—one for the "default" theme and one for "theme1".

    There's a radio button under each theme, and Preview and Transform & Save buttons at the bottom left.

    The Preview button allows you to see your form with the theme applied. This will not overwrite manual changes; Transform & Save will!

    Warning: Using Transform & Save will recreate the Form HTML from the version that ChronoForms has saved in the database table. Any manual changes that you have made to the Form HTML will be lost.

  2. Applying "theme1" changes the Form HTML structure significantly. Select the "theme1" radio button and click the Preview button to see the result.

    You can't see this from the preview screen but here's what the text input block now looks like:

    <div class="cf_item">
    <h3 class="cf_title" style="width: 150px;">
    Click Me to Edit</h3>
    <div class="cf_fields">
    <input name="text_2" type="text" value=""
    title="" class="cf_inputtext cf_inputbox"
    maxlength="150" size="30" id="text_2" />
    <br />
    <label class="cf_botLabel"></label>
    </div>
    </div>

    The wrapping <div> tags and the input are still the same; the old label is now an <h3> tag and there's a new <label> after the input with a cf_botlabel class. The <div> with the cfclear class has gone.

    This theme may work better with forms that need narrower layouts or where the cfclear <div> tags cause large breaks in the form layout.

    Neither theme creates a very accessible form layout, and "theme1" is rather less accessible than the "default" theme. If this is important for you then you can create your own form theme.

How it works...

A ChronoForms theme has two parts—a PHP file that defines the form elements and a CSS file that sets the styling. The Transform Form gets the "Wizard" version of your form that is saved in the database, and regenerates the form HTML using the element structures from the PHP file. When the file is loaded, the theme CSS file will be loaded instead of the default ChronoForms CSS.

See also

Adding your own CSS styling

Many users will want to add their own styling to their forms. This is a short guide about ways to do that. It's not a guide to create the CSS.

To add your own Form CSS, you will need to have a working knowledge of HTML and CSS.

Getting ready

You need nothing to follow the recipe, but when you come to it out, you'll need CSS and a form or two.

How to do it...

  1. Adding CSS directly in the Form HTML:

    The quickest and least desirable way of styling is to add CSS directly to the Form HTML. The HTML is accessible on the Form Code tab in the Form Editor. You can type directly into the text area. For example:

    <input name="text_2" type="text" value=""
    title="" class="cf_inputtext cf_inputbox"
    maxlength="150" size="30" id="text_2"
    style="border: 1px solid blue;" />

    The only time when you might need to use this approach is to mark one or two inputs in some special way. Even then it might be better to use a class and define the style outside the Form HTML.

  2. Using the Form CSS styles box:

    In the Form Code tab, ChronoForms has a CSS Styles box, which is opened by clicking the [+/-] link beside CSS Styles. You can add valid CSS definitions in this box (without <style> or </style> tags) and the CSS will be included in the page when it is loaded. For example, you could put this definition into the box:

    cf_inputbox {
    border: 1px solid blue;
    }

    This will add the following script snippet to the page. If you look at the page source for your form in the front-end you'll find it correctly loaded inside the <head> section.

    <style type="text/css">
    cf_inputbox {
    border: 1px solid blue;
    }
    </style>

  3. Editing the ChronoForms default CSS:

    If you have Load Chronoforms CSS/JS Files? set to Yes, then ChronoForms will apply one of its themes, the default one unless you have picked another.

    The theme CSS files that are used in the front-end are in the components/com_ chronocontact/themes/{theme_name}/css/ folder. Usually there are three files in the folder.

    The style1-ie6.css file is loaded if the browser detected is IE6; style1-ie7. css is loaded as well for IE7 or IE8; Lstyle1.css is loaded for other browsers.

    If you edit the ChronoForms CSS, you may need to edit all three files.

    Note: The themes are duplicated in the Administrator part of ChronoForms, but those files are used in the Transform Form page only.

  4. Editing the template CSS:

    If you want to apply styling more broadly across your site then you may want to integrate the Form CSS with your template style sheets.

    This is entirely possible; the only thing to make sure of is that the classes in your Form HTML are reflected in the template CSS. You can either manually edit the Form HTML or add the ChronoForms classes to your template styles sheets.

    Note that this is a much better approach than editing the ChronoForms theme CSS files. Upgrading ChronoForms could well overwrite the theme files. If you have the styles in your template's style sheets, this is not a problem.

  5. Creating a new ChronoForms theme is a better solution than editing the default themes as it is protected against overwriting, and allows you to change the layout of the HTML elements in the form.

    The simplest way to do this is to copy one of the existing theme folders, rename the copy, and edit the files in the new folder.

    The CSS files are straightforward, but the elements.php file needs a little explanation. If you open the file in an editor, you will find a series of code blocks that define the way in which ChronoForms will structure each of the form elements in the Wizard. Here is an example of a text input:

    <!--start_cf_textbox-->
    <div class="form_item">
    <div class="form_element cf_textbox">
    <label class="cf_label"{cf_labeloptions}>{cf_labeltext}
    </label>
    <input class="{cf_class}" maxlength="{cf_maxlength}"
    size="{cf_size}" title="{cf_title}" id="{cf_id}"
    name="{cf_name}" type="{cf_type}" />
    {cf_tooltip}
    </div>
    <div class="cfclear">&nbsp;</div>
    </div>
    <!--end_cf_textbox-->

    The comment lines at the beginning and end mark out this element and must be left intact.

    Between the comment lines you may add any valid HTML body tags that you like, except that the text input element must include <input type='text' . . . /> and so on.

    The entries in curly brackets, for example {cf_labeltext}, will be replaced by the corresponding values from the Properties box for this element in the Form Wizard. If they appear they must be exactly the same as the entries in the ChronoForms default theme.

    Most of the time you will not need to create a new theme, but if you are building Joomla! applications, this provides a very flexible way of letting users create forms with a predetermined structure and style.

    Note that if you create a new theme, you need to ensure that the files are the same in both theme folders (administrator/ components/com_chronocontact/themes/ and components/com_chronocontact/themes/). Maybe a future version of ChronoForms will remove the duplication.

ChronoForms 3.1 for Joomla! site Cookbook 80 recipes for building attractive and interactive Joomla! forms
Published: August 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

(For more resources on ChronoForms, see here.)

There's more...

Sometimes, you want to add "conditional" CSS, that is you want your styling to respond in some way to the information submitted on the form or to something else that changes from one session to another. The classic example we've already seen is to serve a different CSS file to users browsing with Internet Explorer.

Browser sniffing

Joomla! provides some code that can be used to detect the user's browser and we can adopt that to serve different files. First though, here is the basic code to load a CSS file from Joomla!:

<?php
$doc =& JFactory::getDocument();
$doc->addStyleSheet('url_of_css_file');
?>

Inside the familiar <?php . . .?> tags we have two lines. The first of these gets us access to the Joomla! Document Object, which is a predefined group of variables and methods that Joomla! will use to build the final web page.

The =& is important to make sure that we get access to the same object that Joomla! will use and don't create a new copy of our own.

The second line calls one of the Document Object methods to add a CSS file to the page. This file will be called from a CSS link placed in the page tags. What you will see in the page source is:

<link href="url_of_css_file"
rel="stylesheet" type="text/css" />

Now we need to find out what kind of browser is being used. Joomla! has a browser object for this, so we'll need to access that too:

jimport('Joomla!.environment.browser');
$browser = JBrowser::getInstance();

This will get us an instance of the Joomla! browser object, We can get the browser type from this and set the CSS file to be loaded accordingly:

if ( $browser->getBrowser() == 'msie' ) {
$css_file = 'url_of_css_file_for_ie_browsers';
} else {
$css_file = 'url_of_css_file_for_other_browsers';
}

This example uses a PHP if . . . else to switch between IE and non-IE browsers; we could use a PHP "switch" statement to distinguish between several different groups of browsers. There is also browser version information available in the Joomla! browser object so, for example, we could have different files for different IE versions.

Putting all this together, our code snippet looks like this:

<?php
jimport('Joomla!.environment.browser');
$browser = JBrowser::getInstance();
if ( $browser->getBrowser() == 'msie' ) {
$css_file = 'url_of_css_file_for_ie_browsers';
} else {
$css_file = 'url_of_css_file_for_other_browsers';
}
$doc =& JFactory::getDocument();
$doc->addStyleSheet($css_file);
?>

This code may look a bit cryptic at first glance, but broken down into small chunks it should make sense and will introduce you to some of the richer features of Joomla!.

Conditional CSS

Let's assume that our form is asking about babies and there is an input boy_or_girl that returns either "girl" or "boy". We want to display a pink or blue "thank you" message depending on the result.

Let's assume that in our thank-you HTML we have:

<div class='boy_or_girl'> . . . </div>

And we need to set the background color of this div. This will need a CSS snippet such as the following:

div.boy_or_girl {
background-color: //color goes here
}

First, we need to get the value of the boy_or_girl field from the form:

$boy_or_girl =
JRequest::getString('boy_or_girl', 'boy', 'post');

Then we can use this to set the color:

switch ($boy_or_girl ) {
case 'boy':
default:
$color = '#8888FF';
break;
case 'girl':
$color = '#FF8888';
break;
}

We've used a "switch" statement to show its use; an if . . . else would have worked equally well.
We also added a default case to our switch statement. It is always good programming practice to have a default in case the input is not one of the values that we were expecting.

We insert this color into a style snippet:

$style = "
div.boy_or_girl {
background-color: $color ;
}
";

And insert into the page using the Joomla! document object again:

$doc->addStyleDeclaration($style);

Putting it all together, we get the following code snippet, which will go into the OnSubmit After code box so that it displays after the form is submitted:

<?php
$boy_or_girl =
JRequest::getString('boy_or_girl', 'boy', 'post');

switch ($boy_or_girl ) {
case 'boy':
default:
$color = '#8888FF';
break;
case 'girl':
$color = '#FF8888';
break;
}

$style = "
div.boy_or_girl {
background-color: $color ;
}
";
$doc =& JFactory::getDocument();
$doc->addStyleDeclaration($style);
?>
<div class='boy_or_girl'> . . . </div>

Putting several inputs in one line

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.

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.

Adding your own HTML

The ultimate in form layout is to hand-craft your own HTML one way or another. Here we'll just look at a quick way to change the layout.

In order to add your own Form HTML, you will need to have a working knowledge of HTML and CSS.

Getting ready

You can start with any form created with the ChronoForms Wizard.

How to do it...

  1. The Wizard is an easy way of getting the key form elements into your Form HTML and being reasonably sure that they will work with ChronoForms. But, as we've seen, it brings with it quite a lot of "framework" HTML that gives the ChronoForms its look and feel, but may not be what you want.

    So, you can strip away everything but the core HTML and rebuild your own framework around it. Here, we'll switch the date form in the previous recipe to use an HTML table.

    HTML tables are anathema to purist coders but they have their practical uses and sometimes they are the easiest way to lay out complex forms.

    After we created the form from the Wizard (before using the MultiHolder), the code for each of the three input boxes looked like this:

    <div class="form_item">
    <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Day</label>
    <input class="cf_inputbox" maxlength="4" size="4" title=""
    id="text_0" name="text_0" type="text" />
    </div>
    <div class="cfclear">&nbsp;</div>
    </div>

    The key line in here is the <input> tag:

    <input class="cf_inputbox" maxlength="4" size="4" title=""
    id="text_0" name="text_0" type="text" />

    That is the core code, we can throw the rest away.

  2. If we use a table with four columns then we can neatly accommodate our three inputs:

    <table>
    <tr>
    <td>
    <label class="cf_label" style="width:150px;" >
    Date</label>
    </td>
    <td>
    <input class="cf_inputbox" maxlength="4" size="4"
    title="" id="text_0" name="text_0" type="text" />
    </td>
    <td>
    <input class="cf_inputbox" maxlength="4" size="4"
    title="" id="text_1" name="text_1" type="text" />
    </td>
    <td>
    <input class="cf_inputbox" maxlength="4" size="4"
    title="" id="text_2" name="text_2" type="text" />
    </td>
    </tr>
    </table>

    The end result is a neatly formatted section of a form.

  3. Clearly, this is a simple example. Add in a few text inputs, a couple of text areas, and a drop-down or two, and there has to be some careful tuning of the code to keep it looking good.

    The message to take from here is that you don't need to stick with ChronoForms code, except for the core tags.

    In practice, ChronoForms will work with almost any legal HTML. The key things to remember are:

    • That names are required and can only contain a-z, A-Z, 0-9, and underscore '_'. No dashes, spaces, or other special characters.
    • id attributes are highly desirable if you want to use JavaScript with your form. The same naming rules apply plus id attributes must be unique in the page.
    • The input type attribute is required.

     

Summary

The topics covered in this article used the ChronoForms built-in styles, switching to another form template, adding your own CSS, using the Wizard Edit to put several form inputs in one line, and changing the layout by adding your own HTML.


Further resources on this subject:


ChronoForms 3.1 for Joomla! site Cookbook 80 recipes for building attractive and interactive Joomla! forms
Published: August 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Bob Janes

Bob Janes has been involved in IT of one form or another throughout his working career. In the last decade he’s worked mainly on CMS support and development, first with E-Xoops, more recently with Joomla! and WordPress. He’s been the principal support person for ChronoForms for the last three years and has made more than 12,000 posts answering user questions. Bob has an extensive knowledge of Joomla! and WordPress and he enjoys solving the problems involved in building interactive sites on these CMSs.

Books From Packt


Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Joomla! Social Networking with JomSocial
Joomla! Social Networking with JomSocial

Joomla! 1.5 Site Blueprints
Joomla! 1.5 Site Blueprints

Mastering Joomla! 1.5 Extension and Framework Development Second Edition
Mastering Joomla! 1.5 Extension and Framework Development Second Edition

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

Joomla! 1.5 Templates Cookbook
Joomla! 1.5 Templates Cookbook

Joomla! with Flash
Joomla! with Flash

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software