Customising code in Forms
In addition to customising Forms via the visual editor, it is also possible to code your own unique experiences in Buzzspark with full access to code for developers.
All custom options for Forms are grouped into tabs in the right sidebar when editing a Form. This article covers the Custom Code tab, which allows you to customise the HTML, CSS, and JavaScript code for the Form. You can also view all available custom options along with the structure and terminology used in Forms.
From the left menu, browse to Content > Forms.
Click on the Edit button under the Actions column for Form you wish to edit.
On the Edit Form page, click on the Custom Code tab in the right sidebar.
Click to edit any of the code templates described below and click Apply at the bottom when done editing.
Back in the Edit Form page, click on the bottom right Save Changes button to save your changes.
The _Developer_ role is required for Account Users to access the ‘Custom Code’ tab.
The following code template are available:
HTML Template – contains markup for the Form.
CSS – contains the Cascading Style Sheets for the Form.
JS Overrides – for adding JavaScript overrides.
Custom JS – for adding custom JavaScript code.
HTML Templates - Variables
A list of all variables along with descriptions is available directly within the template editor and can be accessed by clicking on the ‘Allowed variables’ link at the bottom of the editor. All variables have the syntax:
[[VARIABLE_NAME]]
HTML Templates - Allowed Functions and Operators
In addition to variables, HTML templates also support the following functions:
[[IF ...]]
[[ELSEIF ...]]
[[ELSE]]
[[/IF]]
The following operators can be used with the above functions:
|| - OR
&& - AND
! – NOT
Curly brackets ‘()’ can also be used to group conditions, for example:
[[IF (A || B) && C ]]
…
[[/IF]]
CSS Template
This template contains the CSS styles for the Form. You can add your own additional styles or overrides at the end of the template or edit any of the existing styles.
Custom JS Template
The ‘Custom JS’ template is blank by default and allows you to add custom JavaScript code in the Form. Code added in this template is dynamically included in the ‘HTML Template’ before the closing </body> tag - the [[CUSTOM_JS]] variable in the ‘HTML Template’ is substituted by any custom JavaScript entered in the ‘Custom JS’ template when the Form is loaded.
Reach out to us via chat or email if you have any questions or need help with planning your custom implementation - our developers are always happy to help.
All custom options for Forms are grouped into tabs in the right sidebar when editing a Form. This article covers the Custom Code tab, which allows you to customise the HTML, CSS, and JavaScript code for the Form. You can also view all available custom options along with the structure and terminology used in Forms.
Editing HTML, CSS, and JavaScript code for Forms
From the left menu, browse to Content > Forms.
Click on the Edit button under the Actions column for Form you wish to edit.
On the Edit Form page, click on the Custom Code tab in the right sidebar.
Click to edit any of the code templates described below and click Apply at the bottom when done editing.
Back in the Edit Form page, click on the bottom right Save Changes button to save your changes.
The _Developer_ role is required for Account Users to access the ‘Custom Code’ tab.
Code templates available in Forms
The following code template are available:
HTML Template – contains markup for the Form.
CSS – contains the Cascading Style Sheets for the Form.
JS Overrides – for adding JavaScript overrides.
Custom JS – for adding custom JavaScript code.
HTML Templates - Variables
A list of all variables along with descriptions is available directly within the template editor and can be accessed by clicking on the ‘Allowed variables’ link at the bottom of the editor. All variables have the syntax:
[[VARIABLE_NAME]]
HTML Templates - Allowed Functions and Operators
In addition to variables, HTML templates also support the following functions:
[[IF ...]]
[[ELSEIF ...]]
[[ELSE]]
[[/IF]]
The following operators can be used with the above functions:
|| - OR
&& - AND
! – NOT
Curly brackets ‘()’ can also be used to group conditions, for example:
[[IF (A || B) && C ]]
…
[[/IF]]
CSS Template
This template contains the CSS styles for the Form. You can add your own additional styles or overrides at the end of the template or edit any of the existing styles.
Custom JS Template
The ‘Custom JS’ template is blank by default and allows you to add custom JavaScript code in the Form. Code added in this template is dynamically included in the ‘HTML Template’ before the closing </body> tag - the [[CUSTOM_JS]] variable in the ‘HTML Template’ is substituted by any custom JavaScript entered in the ‘Custom JS’ template when the Form is loaded.
Reach out to us via chat or email if you have any questions or need help with planning your custom implementation - our developers are always happy to help.
Updated on: 03/02/2023
Thank you!