Themes make it easier to create consistent styling across multiple forms by allowing you to build reusable CSS templates. With Themes, you can insert code to wrap your forms in a consistent design that mirrors your website style. You can customize your Themes using CSS, images, header/footer navigation menus, analytics trackers, and metatags. Using Themes requires knowledge of web development. Bonterra's Design Services team is always happy to discuss design customizations for these forms. Please feel free to reach out to Paul Kittredge at paul.kittredge@bonterratech.com to schedule a conversation.
Step 1: Access Themes in Online Actions
-
Open Online Actions from your EveryAction menu
-
Click on "Settings" in the top navigation
-
Select "Themes" from the dropdown menu
-
You'll see a list of existing themes or an option to create a new one
Step 2: Create a new Theme
-
Click "Create New Theme"
-
Enter a name for your theme
-
Add a description to help others understand when to use this theme
-
Click "Create" to begin building your theme
Step 3: Add HTML and CSS to your Theme
-
In the Theme editor, add your HTML and CSS code
-
Include standard HTML elements like <head>, <body>, etc.
-
Add the {{FormContent}} merge field where you want the form to appear
-
Include CSS styling that matches your organization's branding
-
Use merge fields for dynamic content (see Step 4)
Step 4: Add merge fields to your Theme
-
Common merge fields include:
-
{{FormContent}} - Required to display the form
-
{{Title}} - Displays the form title
-
{{Description}} - Shows the form description
-
{{CustomCss}} - Incorporates custom CSS files
-
Add these within your HTML where appropriate
Step 5: Apply a Theme to a form
-
Create or edit an Online Actions form
-
On the Build Page step, look for the "Theme" dropdown
-
Select your theme from the list
-
Preview the form to see how the theme affects its appearance
-
Make any necessary adjustments to the theme or form content
-
Publish your form when ready