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.
This article is from Chapter 3 “Styling your Form” of The ChronoForms Book and is included here with permission from Packt Publishing.
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.
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>
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.
