Overview

The Custom CSS field lets you apply styling rules directly to a specific form template. Any CSS you add here is injected inside a <style> tag in the HTML header of the rendered form page, and only applies to that form — it won't affect other templates or pages.

It's the right place for anything visual and form-specific: brand fonts, colour tokens, field layout tweaks, button styling, or responsive adjustments. If you need to load an external stylesheet or font library, use the Custom Header instead — see the Add a Custom HTML Header to a Form guide for that.

‍

Add custom CSS

1. In the Receive module, go to Form management and open the relevant form template.
2. Click the Custom HTML/Javascript tab.
3. In the Custom CSS field, enter your CSS rules. Write only CSS here — no <style> tags needed, and no HTML or JavaScript.
4. Click Update to save your changes.
5. Click Publish to make the updated template live for new form instances.

‍CSS only in this field: The Custom CSS field is for CSS rules only. Don't include <style> tags, HTML elements, or JavaScript here — those belong in the Custom Header or Custom Javascript fields. Mixing code types can cause rendering issues.

‍

What you can style

Common things to control with Custom CSS include:

• Brand typography and colour tokens — set font families, sizes, weights, and colours to match your organisation's visual identity.
• Form field and label layout — adjust spacing, alignment, and width for input fields and their labels.
• Buttons and interactive elements — restyle the submit button, navigation arrows, or selection controls.
• Error messages and helper text — make validation messages more prominent or match your brand's error state styling.
• Responsive rules — add media queries to adjust the form layout for different screen sizes.

Once saved and published, your CSS rules will apply to every new instance of the form. Use the Test Form view to preview your changes before publishing.

‍