Blend a standard form into your theme
Open the form's appearance/theme controls. Use Inherit from page for typography when the form should follow the Umbraco site's font. Enable inherited colours where appropriate. Adjust borders, card padding and input corners to match the page.
The page template owns the surrounding layout. Avoid wrapping a styled form in another padded card unless you intend that extra layer.
Keep a custom design contained
Premium templates may bring their own background, typography and card. Scope those styles to a unique form root. Use container-relative widths instead of 100vw, and avoid body, html or unqualified heading selectors. Keep decorative layers inside the form's positioning context.
A form embedded in a Block Grid cell has less room than a full-width page. Check both layouts. Backgrounds must stay in that cell and must not cover an introduction, neighbouring block or site navigation.
Accessibility checks
- Keep labels visible and associate help/error text with inputs.
- Use sufficient text/background contrast, including placeholders and disabled controls.
- Test keyboard focus, tab order and widget actions.
- Ensure columns stack logically at narrow widths.
- Keep a useful confirmation and validation message after submission.
Use the live gallery to compare designs, then test your own published page. Gallery styling is an example; the package does not require the demo site's header or CSS.