(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:
- 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"> </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:
- 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
- W3Schools CSS tutorials and references at http://www.w3schools.com/css/ default.asp provide a useful online introduction to CSS
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…
- 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.
- 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
- The article “Accessible Forms using WCAG 2.0” (http://www.usability.com.au/resources/wcag2/) is a practical introduction to the topic of web form accessibility.
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…
- 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.
- 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> - 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.
- 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.
- 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"> </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.
