Selectors
The CSS tab allows you to add your own custom CSS to style the form. Form elements are accessed via CSS selectors. See the help pages on the CSS tab for more information.
Additionally, the JavaScript library jQuery can be used for custom scripts in the script tab. jQuery uses CSS selectors with some additions. See the help pages on the script tab for further information on jQuery.
Xima® Formcycle adds certain classes and attributes to the rendered HTML events that can be used with CSS selectors. See the help pages on selecting elements for a list of selectors.
Selecting elements by name
Often you want to select a form element by its name, that has been assigned to it in the Xima® Formcycle Designer. Use the following the selector:
color: #DDD;
}
name
Select all elements with the attribute name set.element
Select all elements with this value for the attribute name.
The name can be changed in the basic properties panel of the Xima® Formcycle Designer.
Some form elements such as input fields, upload fields, or text areas consist of two HTML elements, ie. the main element and a label element for the form element. To select both elements together, use the attribute xn (=Xima name) instead.
font-weight: 600;
}
xn
Select all elements with the attribute xn set.element
Select all elements with this value for the attribute xn.
More attribute selectors
$('input[type=text]')
// All links linking to a pdf file, ie. with the attribute "href" ending on ".pdf".
$('a[href$=".pdf"]')
// All images with the "alt" attribute set.
$('img[alt]')
When you assign custom attributes to an element, you can select elements with that attribute with $('[myAttribute="myValue"]').
Working with selected elements
Once elements have been selected, you can read their contents or modify them via jQuery and additional functions provided by Xima® Formcycle
$('input[type=text]').visible(false)
// Make the element with the name zipCode a required form field.
$('[name=zipCode').setRequired(true)