Changing Field Properties with Rules

April 2, 2014 , by
Pistachio offers several themes that define the styling used by your forms (colors, fonts, etc.)  You can change or create  themes, but any styles will apply equally to form elements that are the same, like all fields or labels.  If you need to style one specific element, use a rule along with some basic javascript to change it.  Here's how to do it.
Let's say we want to change the background color of a field so it stands out from the rest.  Go to the Rules tab for the form and add a new rule.  Give it a name, the order it should be run in (in relation to other rules), and then add a Result. In the result definition form, pick Execute JavaScript from the Result Type dropdown list and enter the code in the JavaScript field that is displayed.


I want to change the background color of the "Request Date" field on my form to a pale orange.  To do this I add a styling property to the form input field by referencing its unique ID, which in this case is ss_319_RequestDate. The full property is:

ss_319_RequestDate.style.backgroundColor="#F5DA81";

How do you know what ID to use for the form input field?  You'll have to go behind the scenes in your browser to identify it.  In Chrome, right-click over the field you want to identify and select Inspect element from the menu.  It will display the HTML code of the form and all its elements.  Look for the id property for the input tag.  The image below shows the ID of the field we are changing the background color on.



What code do you use for the color you want?  Here is a handy chart you can use to pick colors: http://www.w3schools.com/tags/ref_colorpicker.asp  


    Form with the background color changed on one field



Categories: Configuring Rules