Custom code dialog box

Custom code dialog box

 

You can customize the generated pages adding custom CSS, XHTML or JavaScript code. Press the 'custom code' button in the Draw the form page to open the custom code dialog box.

 

customcode-javascript

There are three tabs in the 'custom code' dialog box.

 

XHTML - All Pages

The code you provide in this tab will be applied to all generated pages (The form page, confirm page and 'thank you' page) So, if you want to apply a certain customization to all pages ( like a common header and footer ), provide it here.

 

Code to place in the <head> tag

This is the ideal place to include external style sheets or JavaScript files.

 

Header

The custom XHTML code to be placed on the very top of the page.

 

Footer

The code to be placed at the bottom of the page.

Note that you can provide custom JavaScript code in <script> and </script> tags

 

XHTML - Form page only

The code provided here is applied only to the form page. Provide the customizations specific to the form page in this tab.

If 'custom XHTML for all pages' is also provided, the code for all pages is applied first and the code only for form page is applied next.

 

CSS

The custom CSS code you provide here is added to the generated CSS file. If you want to modify or improve style of the form, provide your custom CSS code in this tab.

 

JavaScript

Put the custom Javascript code that should run on page load in this tab. You can use jQuery as well since most of the dynamic features (like validation ) of Simfatic Forms uses jQuery

 

See Also: How to handle JavaScript events in the form