propform-Formulare sehen out-of-the-box bereits sauber aus — aber wenn du sie in deine Website einbettest oder unter eigener Domain nutzt, willst du sie ans Corporate-Design anpassen. Hier die verfügbaren Optionen.
Alle Design-Einstellungen können auf zwei Ebenen konfiguriert werden:
| Ebene | Wo | Wann |
|---|---|---|
| Account-weit | Account-Einstellungen → Standard-Formular-Styling | Standardwerte, gelten für alle Formulare, in denen „Standard-Styling verwenden" aktiv ist |
| Pro Formular | Formulareinstellungen → Styling | Übersteuern den Account-Wert für dieses eine Formular |
💡 Empfehlung: Pflege Logo, Farben und Schriftart einmalig in den Account-Einstellungen. Nur in Spezialfällen (Co-Branding, Sonder-Aktionen) pro Formular abweichen.
Erscheint über deinen Formularen.
Kleines Logo im Browser-Tab.
Drei Optionen für das Hosten der Logo-/Favicon-Bilder:
https://meinmaklerbüro.de/wp-content/uploads/logo.png)mcms.onoffice.de/...)💡 Tipp für Logo aus E-Mail: Wenn dein Logo bereits in einer onOffice-Mail-Vorlage eingebettet ist, kannst du dort die Bild-Adresse kopieren und in propform verwenden — meistens auch transparenter PNG.
Eingabe als Hex-Code (z.B. #FF6B35 für Orange) oder über Farb-Picker.
💡 CI-Tipp: Akzentfarbe identisch zur Primärfarbe deiner Website wählen — dann fühlt sich das eingebettete Formular wie ein nahtloser Teil der Seite an.
Die Schriftart wird in den Account-/Formulareinstellungen aus einer Auswahl gehosteter Google-Fonts gewählt.
🔒 Wir hosten alle Google-Fonts auf unseren Servern — beim Aufruf deines Formulars wird keine Verbindung zu Google aufgebaut. Damit umgehst du die DSGVO-Problematik der Google-Fonts-Abmahnungen.
Wenn deine CI-Schrift nicht in der Auswahl ist:
Statt einer einfachen Hintergrundfarbe kannst du ein Bild als Hintergrund hinterlegen — z.B. ein stimmungsvolles Lifestyle-Foto für ein Akquise-Formular.
Setup: Account-/Formulareinstellungen → Styling → Hintergrundbild → Bild-URL eintragen.
⚠️ Plus-Bilder vermeiden: Bilder mit „Plus"-Label sind kostenpflichtig (Unsplash+ Abo)
In den Formulareinstellungen → Styling → Designart wählst du, wie Buttons und Eingabefelder aussehen:
| Designart | Optik | Passt zu |
|---|---|---|
Eckig (rounded-0) |
scharfe 90°-Ecken | technische / klassische Websites |
Abgerundet (rounded) |
leichte Rundung | moderne Websites (Standard) |
Pille (rounded-pill) |
komplett rund | freundliche / verspielte Websites |
💡 Wähle die Designart passend zum Stil deiner Hauptwebsite, damit eingebettete Formulare wie ein natürlicher Teil wirken.
propform bietet vier verschiedene Einbettungs-Varianten (JavaScript-Embed, Web Component, iFrame mit Auto-Höhe, Plain iFrame) plus Zusatz-Einstellungen wie Dankeseite-Target, Skript-Version und Cookie-Consent-Verhalten.
📖 Komplette Anleitung mit allen vier Varianten und Zusatz-Optionen: Formulareinstellungen → iFrame-Einbettung
<script>-Tags blockt, der iFrame aber durchgelassen wirdform-id muss der systemseitige Slug sein, nicht der Custom-URL-Pfadpropform-Formulare sind automatisch responsiv — Felder, Buttons und Layout passen sich an die Bildschirmbreite an.
<head>: <meta name="viewport" content="width=device-width, initial-scale=1.0"> (Standard, aber bei sehr alten Templates manchmal vergessen)100% (nicht in px)min-width habeniPhone-Falle: bei „Foto aufnehmen" geht nur 1 Bild. Für Multi-Foto-Upload muss „Mediathek" gewählt werden — siehe Datei-Upload schlägt fehl → iPhone-Multi-Foto.
Aktuell ist kein eigenes Custom-CSS pro Formular möglich — das Design ist auf die obigen Optionen beschränkt.
Auf der Roadmap: Eingabefeld pro Formular für eigenes CSS und CSS-Klassen, mit dem du bestehende Elemente weiter individuell stylen kannst (z.B. Button-Hover-Effekte, eigene Icons in Labels, Custom-Spacing). Wenn du das gerne hättest und einen konkreten Use-Case hast, schreib uns kurz — Use-Cases helfen bei der Priorisierung.
In der Zwischenzeit: Wenn du zwingend Custom-CSS brauchst (z.B. wegen sehr spezifischer Brand-Guidelines), kannst du das um den iFrame herum in deiner Website-CSS lösen — z.B. einen farbigen Rahmen, Schatten, oder einen Container mit Padding.