Skip to main content

How do I use custom CSS for Online Actions?

  • January 21, 2025
  • 0 replies
  • 38 views
Happie Pingol
Forum|alt.badge.img

Cascading Style Sheets (CSS) are used to control the visual appearance of web pages. Custom CSS gives you advanced control over the appearance of your Online Actions forms, allowing for sophisticated design that matches your brand perfectly. 

While we don't provide support to help you learn CSS coding, there are many online tutorials you can use to get you started if this is new for you. Alternatively, Bonterra's Design Services team is always happy to discuss design customizations. Please feel free to reach out to Paul Kittredge at paul.kittredge@bonterratech.com to schedule a conversation. 

 

Step 1: Create your CSS file 

  1. Use a text editor to create a CSS file with your custom styles 

  1. Ensure your CSS targets the correct elements of the form 

  1. Save the file with a .css extension 

  1. Host the file on a publicly accessible server with HTTPS support 

 

Step 2: Add custom CSS to your form 

  1. Create or edit an Online Actions form 

  1. On the Build Page step, scroll to the "Custom CSS" section 

  1. Enter the full URL to your hosted CSS file (must start with https://) 

  1. Click "Save" to apply the CSS file to your form 

 

Step 3: Preview your form with custom CSS 

  1. Click the "Preview" button to see how your form looks with the custom CSS 

  1. Check that all elements are styled as expected 

  1. Test the form on different devices and browsers if possible 

  1. Make adjustments to your CSS file as needed and update the URL if you upload a new version 

 

Step 4: Use custom CSS with Themes 

  1. If using a Theme, ensure it includes the {{CustomCss}} merge field: 

<link href="{{CustomCss}}" rel="stylesheet"/> 

  1. Without this merge field, your custom CSS won't load when using a Theme 

  1. Add this code to your Theme's HTML in the <head> section 

 

Step 5: Embed forms with custom styling 

  1. Publish your form with or without custom CSS 

  1. Click "Link & Embed" to get the embed code 

  1. Add the form to your website using the provided code 

  1. Your website's CSS will affect the embedded form 

  1. You can add additional CSS on your website to further style the embedded form 

 

What else do you need help with? 

 

    Terms & ConditionsCookie settingsAccessibility statement