propform forms look clean right out of the box — but if you embed them in your website or use them under your own domain, you’ll want to adapt them to your corporate design. Here are the available options.
All design settings can be configured at two levels:
| Level | Where | When |
|---|---|---|
| Account-wide | Account settings → Default form styling | Default values, apply to all forms where ‘Use default styling’ is enabled |
| Per form | Form settings → Styling | Overrides the account setting for this specific form |
> 💡 Recommendation: Set up your logo, colours and font once in the account settings. Only deviate per form in special cases (co-branding, special promotions).
Appears above your forms.
Small logo in the browser tab.
Three options for hosting logo/favicon images:
https://meinmaklerbüro.de/wp-content/uploads/logo.png)mcms.onoffice.de/...)> 💡 Tip for logos from emails: If your logo is already embedded in an onOffice email template, you can copy the image address from there and use it in propform — usually a transparent PNG as well.
Enter as hex code (e.g. #FF6B35 for orange) or via the colour picker.
> 💡 CI tip: Choose an accent colour that matches the primary colour of your website — this makes the embedded form feel like a seamless part of the page.
The font is selected in the account/form settings from a selection of hosted Google Fonts.
> 🔒 We host all Google Fonts on our servers — when your form is accessed, no connection to Google is established. This allows you to avoid the GDPR issues associated with Google Fonts warnings.
If your brand’s font isn’t in the selection:
Instead of a simple background colour, you can set an image as the background — e.g. an atmospheric lifestyle photo for a lead generation form.
Setup: Account/Form settings → Styling → Background image → Enter image URL.
In the form settings → Styling → Design style, you can choose how buttons and input fields look:
| Design style | Look | Suitable for |
|---|---|---|
Square (rounded-0) |
sharp 90° corners | technical / classic websites |
Rounded (rounded) |
slight rounding | modern websites (default) |
Pill (rounded-pill) |
completely round | friendly / playful websites |
> 💡 Choose the design style that matches the look of your main website so that embedded forms look like a natural part of it.
propform offers four different embedding options (JavaScript embed, Web Component, iFrame with auto-height, Plain iFrame) plus additional settings such as thank-you page target, script version and cookie consent behaviour.
📖 Complete guide covering all four options and additional settings: Form Settings → iFrame Embedding
<script> tags, but the iFrame is allowed throughform-id must be the system slug, not the custom URL pathpropform forms are automatically responsive — fields, buttons and layout adapt to the screen width.
<head>: <meta name="viewport" content="width=device-width, initial-scale=1.0"> (default, but sometimes forgotten in very old templates)100% (not in px)min-widthiPhone caveat: “Take photo” only allows 1 image. For multi-photo upload, “Library” must be selected — see File upload fails → iPhone multi-photo.
## Custom CSS (on the roadmap)
Currently, custom CSS cannot be used per form — the design is limited to the options above.
On the roadmap: An input field per form for custom CSS and CSS classes, allowing you to further customise the styling of existing elements (e.g. button hover effects, custom icons in labels, custom spacing). If you’d like this feature and have a specific use case, please drop us a quick note — use cases help us prioritise.
In the meantime: If you absolutely need custom CSS (e.g. due to very specific brand guidelines), you can apply it around the iFrame in your website’s CSS — e.g. a coloured border, shadows, or a container with padding.