CSS and Javascript

You can use the CSS and Javascript tab to add CSS and Javascript code for your form in order to customize it.

CSS

In the CSS area you can type any styles that you wish to use when creating and customizing your form. The css declarations here will be placed in the HTML source code of the page and they will need the <style type="text/css"> and </style> tags. A small CSS style example would be the following:

<style type="text/css">
td
{
   color:red;
}
</style>

This example can be used if you are using the Inline layout in order to write all the text from <td> tags red.

Javascript

In the Javascript area you can set any scripts that you wished to trigger when the form loads, when the user clicks on a button or when the selection from a list changes. The tags are mandatory for the scripts to be loaded and executed correctly. The script below can be used as en example and it can be used in order to calculate the Total from two fields and to display the calculated value in a Textbox.

1. Add the following script in the Javascript area of the Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> CSS and Javascript tab:

<script type="text/javascript">
  function calculateText(){
    document.getElementById('total').value = parseInt(document.getElementById('Field1').value)
    + parseInt(document.getElementById('Field2').value);}
</script>

2. In the Additional Attributes section of a Button component we can place a trigger to call the function created above:

onclick="calculateText();"