FAQs

How can I add CSS to my form?

Written

In CFv4 both the Easy and normal Form Wizards have a box where you can enter CSS. In the Easy Wizard it is the CSS Code box on the Others | JS/CSS settings tab. in the CFV4 normal Wizard you can click the Events tab and then drag a Load CSS action from the Utilities action Group.

In CFv5 for the Simple Form it is the Setup | CSS tab; in the standard Form click the Setup tab and Drag in a Load CSS action from the Basic group. CSS added in these boxes will be loaded as a script declaration in the page header. You can also load a CSS file to format your form.

Making CSS specific

To make sure that CSS applies only to ChronoForms you can use the form.Chronoform selector; to make it specific to a particular form you can use the form#chronoform_form_name selector.

To overide existing CSS you may also need to use the !important attribute, or set a very specific selector.

Use your browser web developer tools to see exactly what CSS is being applied to your form and to test changes. 

For more about CSS and CSS Selectors see, for example the W3Schools tutorials

Loading a CSS file

There is a very simple Load CSS file [GH] action available here. If you are happy to use simple code then you can use a Custom Code action in the On Load event of your form with code like this:

<?php
$doc =& JFactory::getDocument();
$doc->addStyleSheet(JURI::root().'path/to/css_file.css');
?>