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".
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'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
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.
