Online-Formulare in Bitrix24 können Sie im integrierten Editor erstellen und anpassen. Reichen die Standardoptionen nicht aus, können Sie das Erscheinungsbild des Formulars mit CSS verändern. Beispielsweise lassen sich Schriftgröße, Text- und Hintergrundfarben, Button-Design, Rahmen und Abrundungen der Felder anpassen. So können Sie das Formular perfekt an das Design Ihres Projekts angleichen und gleichzeitig benutzerfreundlicher gestalten.
In diesem Beitrag erfahren Sie, wie Sie Elemente eines Online-Formulars mit CSS bearbeiten können, um:
- das Formular an das Design Ihres Projekts anzupassen,
- die Zugänglichkeit und Lesbarkeit des Formulars zu verbessern.
Wenn Sie das Design des Formulars ohne Code anpassen möchten, lesen Sie den Beitrag Design der Online-Formulare.
Wie Sie ein Formular auf einer externen Website einbetten, erfahren Sie im Beitrag Online-Formular mit externer Website verbinden.
Um ein Online-Formular anzupassen, fügen Sie CSS-Stile auf der Seite hinzu, in die das Formular eingebettet ist. Dies ist auf zwei Arten möglich:
- Bearbeiten Sie die mit der Seite verknüpfte CSS-Datei,
- öffnen Sie die Seite im Code-Bearbeitungsmodus und fügen Sie die Stile in den Block
<style>vor dem Code des Online-Formulars ein.
Text zwischen den Tags /* und */ ist ein Kommentar. Er dient nur der Orientierung im Code und hat keinen Einfluss auf das Aussehen des Formulars. Kommentare können beibehalten oder entfernt werden.
Sie können eigene CSS-Stile mit den in diesem Artikel genannten Selektoren erstellen. Um sicherzustellen, dass Ihre Änderungen angewendet werden, fügen Sie !important zu jeder Eigenschaft hinzu – die Standardstile von Bitrix24 haben eine höhere Priorität.
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Online-Formular an das Design des Projekts anpassen
Mit CSS können Sie das CRM-Formular an das Design der Website anpassen: Farben, Schriftarten sowie die Gestaltung von Feldern und Buttons können entsprechend dem Stil der Seite angepasst werden. So wirkt das Formular harmonisch und ohne visuellen Kontrast.
Breite des Formulars: Passen Sie die maximale Breite des Formulars für eine korrekte Darstellung auf verschiedenen Geräten an.
/* Breite des Formulars / .b24-form-wrapper { min-height: 250px !important; max-width: 540px !important; }
Schriftart des Formulars: Legen Sie eine einheitliche Schriftart für alle Elemente des Formulars fest.
/ Schriftart des Formulars / html, body, .form-container, .b24-form, .b24-form { font-family: 'Inter', sans-serif !important; }
Überschrift und Untertitel des Formulars: Ändern Sie Schriftgröße, Schriftstärke, Farbe, Zeilenabstand und Abstände nach der Überschrift.
/* Überschrift des Formulars / .b24-form-header-title { font-size: 25px !important; / Schriftgröße / line-height: 38px !important; / Zeilenabstand / margin-top: 60px !important; / Abstand nach oben / margin-bottom: 10px !important; / Abstand nach unten / font-weight: 700 !important; / Schriftgroße / } / Untertitel des Formulars / .b24-form-header-description { font-size: 16px !important; / Schriftgstärke / line-height: 26px !important; / Zeilenabstand / color: #4b5563 !important; / Farbe des Untertitels*/ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Feldgestaltung: Passen Sie die Höhe, die Hintergrundfarbe und den Rahmen an. CSS ändert die Parameter aller Felder im Formular.
/* Feldparameter / .b24-form-control-string .b24-form-control, .b24-form-control-list .b24-form-control, .b24-form-control-text .b24-form-control, .b24-form-control-select .field-item { height: 60px !important; / Feldhöhe / background-color: #FAFBFC !important; / Hintergrundfarbe / padding-left: 16px !important; / Linker Abstand vor dem Text / padding-right: 16px !important; / Rechter Abstand nach dem Text / border: 1px solid #c9d2dd !important; / Rahmenstärke / border-color: #E2E2E2 !important; / Rahmenfarbe / border-radius: 12px !important; / Rahmenabrundung / }
Feldname: Ändern Sie die Farbe, die Größe und die Abstände des Feldnamens, damit er zum Stil der Website passt.
Für verschiedene Feldzustände – Standard, Fokus und nach Ausfüllen – können separate Parameter festgelegt werden, z. B. Größe oder Position des Feldnamens anpassen.
/ Feldname / .b24-form-control-label { font-size: 16px !important; / Schriftgröße des Feldnamens / line-height: 52px !important; / Höhe des Eingabefelds / color: #525C69 !important; / Textfarbe des Feldnamens / opacity: 1 !important; / Texttransparenz / padding-left: 16px !important; / Linker Abstand vor dem Namen / padding-right: 16px !important; / Rechter Abstand nach dem Namen / }
/ Namen beim Fokus oder ausgefülltem Feld / .b24-form-control-select-label, .b24-form-control:focus + .b24-form-control-label, .b24-form-control-not-empty + .b24-form-control-label { font-size: 13px !important; / Schriftgröße des Namens / top: -10px !important; / Position des Namens / color: #525C69 !important; / Farbe / background: transparent !important; / oder entfernen Sie einfach die Hintergrundfarbe / padding-left: 14px !important; / Linker Abstand vor dem Feldnamen / padding-right: 12px !important; / Rechter Abstand nach dem Feldnamen / }
Text im Feld: Legen Sie Schriftgröße und Farbe für den vom Nutzer eingegebenen Text fest.
/ Text im Feld / .b24-form-control { font-size: 16px !important; / Schriftgröße / color: #000000 !important; / Textfarbe */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Listenfeld: Passen Sie die Schriftgröße im Dropdown-Menü so an, dass sie zum Design der übrigen Formularfelder passt. Konfigurieren Sie die Steuerelemente: das Kreuzsymbol zum Entfernen einer Auswahl und das Symbol zum Öffnen der Liste.
/* Schriftgröße der Optionen in der Liste / .b24-form-control-list-selector-item-title { font-size: 16px !important; }
/ Kreuzsymbol im Dropdown-Feld / .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; / Höhe / top: 4px !important; / Position / }
/ Feld / .b24-form-control-list .b24-form-icon-remove { height: 60px !important; / Höhe / right: 50px !important; / Abstand vom rechten Rand / }
/ Symbol zum Öffnen der Liste / .b24-form-control-list .b24-form-control-container::after { height: 12px !important; / Höhe / width: 12px !important; / Breite / top: 26px !important; / Position / right: 20px !important; / Abstand vom rechten Rand */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Zustimmungen: Passen Sie das Design der Checkboxen und des Zustimmungstextes an das Design der Website an: Ändern Sie die Größen, Abstände und Farben der Elemente.
/* Größe der Checkbox / .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 20px; / Breite der Checkbox / height: 20px; / Höhe der Checkbox / }
/ Zeilenabstand im Zustimmungstext / .b24-form-control-desc { font-size: 14px !important; line-height: 1.45 !important; }
/ Schriftgröße im Zustimmungstext / .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 14px !important; }
/ Abstand nach der Zustimmung / .b24-form-btn-container { margin-top: 24px !important; }
Buttons: Ändern Sie das Design der Buttons: Farbe, Schriftart, Größe usw.
/ Button-Parameter / .b24-form-btn { background: #10B769 !important; / Hintergrundfarbe des Buttons / color: #fff !important; / Schriftfarbe des Buttons / font-weight: 400 !important; / Schriftstärke / font-size: 16px !important; / Schriftgröße des Buttons / height: 62px !important; / Höhe des Buttons / border: 1px solid #10B769 !important; / Rahmen des Buttons / border-radius: 12px !important; / Abrundung der Ecken */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Mehrseitige Online-Formulare: Passen Sie die Anzeige der Seitenzahl, des Seitennamens und des Feldes Kommentar an.
/* Seitenzahl / .b24-form-progress-bar-counter { font-size: 14px !important; / Schriftgröße / top: 46% !important; / Position / }
/ Seitenname / .b24-form-progress-bar-title { font-size: 18px !important; / Schriftgröße / }
/ Feld „Kommentar“ / .b24-form-control-text .b24-form-control { height: 190px !important; / Höhe / min-height: 190px !important; / Minimale Höhe / max-height: 190px !important; / Maximale Höhe / padding: 34px 16px 16px !important; / Position des Labels oben / box-sizing: border-box !important; / Feldgröße / resize: none !important; / Größenänderung beim Ausfüllen deaktivieren / }
/ Label im Textfeld / .b24-form-control-text .b24-form-control-label, .b24-form-control-text .b24-form-control:focus + .b24-form-control-label, .b24-form-control-text .b24-form-control-not-empty + .b24-form-control-label { top: 12px !important; / Position / left: 16px !important; / Abstand links / right: 16px !important; / Abstand rechts / transform: none !important; / Elementänderung / font-size: 13px !important; / Schriftgröße / line-height: 1.2 !important; / Zeilenabstand / opacity: 1 !important; / Transparenz / padding: 0 !important; / Innenabstände / }
Aktive Elemente: Ändern Sie die Farbe und das Design von Feldern, Checkboxen und Buttons beim Navigieren und Fokus über die Tastatur, um sie an den Stil der Website und das allgemeine Formulardesign anzupassen.
/ Rahmen des Feldes beim Navigieren oder Tastaturfokus / .b24-form-control-string .b24-form-control:focus:not([readonly]), .b24-form-control-list .b24-form-control:focus:not([readonly]), .b24-form-control-text .b24-form-control:focus:not([readonly]), .b24-form-control-select .field-item:focus:not([readonly]) { border-color: #10B769 !important; / Rahmenfarbe / outline: 3px solid #bcdcff !important; / Rahmenstärke / outline-offset: 2px !important; }
/ Rahmen des Buttons „Senden“ beim Tastaturfokus / .b24-form-btn:focus-visible { outline: 3px solid #1f2937 !important; / Farbe und Stärke des Rahmens / outline-offset: 2px !important; }
/ Rahmen der Checkboxen beim Tastaturfokus / .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 3px solid #1f2937 !important; / Farbe und Stärke des Rahmens / outline-offset: 2px !important; }
/ Schließen-Symbol im Zustimmungsfenster / .b24-window-close { background-color: #005def !important; / Hintergrundfarbe / }
/ Schließen-Symbol im Zustimmungsfenster / .b24-window-close::after, .b24-window-close::before { background-color: #000000 !important; / Farbe des Kreuzsymbols */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Zugänglichkeit und Lesbarkeit des Online-Formulars verbessern
Die Anpassung eines Formulars für Menschen mit Sehbehinderungen und besonderen Wahrnehmungsanforderungen wird erläutert. Es wird gezeigt, wie Parameter geändert werden können, die die Lesbarkeit und Wahrnehmung der Benutzeroberfläche beeinflussen.
Schriftart des Formulars: Legen Sie eine einheitliche Schriftart für alle Elemente des Formulars fest.
/* Schriftart des Formulars / html, body, .form-container, .b24-form, .b24-form { font-family: 'Inter', sans-serif !important; }
Überschrift und Untertitel des Formulars: Erhöhen Sie Schriftgröße, Zeilenabstand und die Abstände nach der Überschrift, um den Text besser lesbar und ansprechender zu gestalten.
/* Überschrift des Formulars / .b24-form-header-title { font-size: 38px !important; / Schriftgröße / line-height: 60px !important; / Zeilenabstand / margin-top: 60px !important; / Abstand nach oben / margin-bottom: 20px !important; / Abstand nach unten / }
/ Untertitel des Formulars / .b24-form-header-description { font-size: 30px !important; / Schriftgröße / line-height: 36px !important; / Zeilenabstand */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Feldgestaltung: Erhöhen Sie die Höhe, ändern Sie die Hintergrundfarbe auf Weiß und fügen Sie einen schwarzen Rahmen hinzu. Dies ermöglicht die Verwendung einer größeren Schrift und sorgt für einen klaren Kontrast der Elemente. CSS ändert die Parameter aller Felder im Formular.
/* Feldparameter / .b24-form-control-string .b24-form-control, .b24-form-control-list .b24-form-control, .b24-form-control-text .b24-form-control, .b24-form-control-select .field-item { height: 100px !important; / Feldhöhe / background-color: #fff !important; / Hintergrundfarbe / padding-left: 20px !important; / Linker Abstand vor dem Text / padding-right: 20px !important; / Rechter Abstand nach dem Text / border: 2px solid #A8ADB4 !important; / Rahmenstärke / border-color: #A8ADB4 !important; / Rahmenfarbe / border-radius: 20px !important; / Rahmenabrundung / }
Feldname: Passen Sie die Parameter an, die sich je nach Nutzeraktion ändern. Standardmäßig sollte eine große, dunkle Schrift verwendet werden, um die Lesbarkeit zu verbessern und die erforderlichen Eingaben klar zu machen.
Für Felder im Fokus oder nach dem Ausfüllen können Sie die Größe des Namens reduzieren, um den Nutzereingabetext nicht zu überdecken.
/ Feldname / .b24-form-control-label { font-size: 30px !important; / Schriftgröße des Feldnamens / line-height: 100px !important; / Höhe des Feldnamens / color: #000 !important; / Textfarbe des Feldnamens / opacity: 1 !important; / Texttransparenz / padding-left: 20px !important; / Linker Abstand vor dem Feldnamen / padding-right: 20px !important; / Rechter Abstand nach dem Feldnamen / }
/ Feldname beim Fokus oder ausgefülltem Feld / .b24-form-control-select-label, .b24-form-control:focus + .b24-form-control-label, .b24-form-control-not-empty + .b24-form-control-label { font-size: 20px !important; / Schriftgröße des Feldnamens / top: -24px !important; / Position des Feldnamens / padding-left: 20px !important; / Linker Abstand dem Feldnamen / padding-right: 20px !important; / Rechter Abstand nach dem Feldnamen / }
Text im Feld: Legen Sie die Schriftgröße und Farbe für den Nutzereingabetext fest. Der Text sollte groß und gut sichtbar auf dem Feldhintergrund sein.
/ Text im Feld / .b24-form-control { font-size: 30px !important; / Schriftgröße / color: #000000 !important; / Textfarbe / padding-top: 24px !important; / Abstand */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Listenfeld: Passen Sie die Schriftgröße im Dropdown-Menü an, um dem Nutzer das Lesen und Auswählen des gewünschten Eintrags zu erleichtern, z. B. einer Liefermethode.
/* Schriftgröße der Optionen in der Liste / .b24-form-control-list-selector-item-title { font-size: 25px !important; }
/ Kreuzsymbol im Dropdown-Feld / .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; / Höhe / top: 30px !important; / Position / }
/ Feld / .b24-form-control-list .b24-form-icon-remove { height: 100px !important; / Höhe / right: 50px !important; / Abstand vom rechten Rand / }
/ Symbol zum Öffnen der Liste / .b24-form-control-list .b24-form-control-container::after { height: 12px !important; / Höhe / width: 12px !important; / Breite / top: 45px !important; / Position / right: 20px !important; / Abstand vom rechten Rand */ }
Links – Standard-Listenfeld, rechts – nach Anpassung mit CSS
Zustimmungen: Vergrößern Sie die Checkboxen, in denen Nutzer ihre Auswahl treffen können, z. B. um der Verarbeitung personenbezogener Daten zuzustimmen oder die Lieferbedingungen zu bestätigen.
/* Größe der Checkbox / .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 28px; / Breite der Checkbox / height: 28px; / Höhe der Checkbox / }
/ Zeilenabstand im Zustimmungstext / .b24-form-control-desc { font-size: 25px !important; }
/ Schriftgröße im Zustimmungstext / .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 25px !important; }
/ Abstand nach der Zustimmung / .b24-form-btn-container { margin-top: 40px !important; }
Buttons: Passen Sie das Design der Buttons an: Farbe, Schriftart, Größe usw. Erhöhen Sie den Kontrast, um die Benutzerfreundlichkeit zu verbessern.
/ Button-Parameter / .b24-form-btn { background: #000000 !important; / Hintergrundfarbe des Buttons / color: #fff !important; / Schriftfarbe des Buttons / font-size: 32px !important; / Schriftgröße des Buttons / height: 100px !important; / Höhe des Buttons / border: 20px solid #000000 !important; / Rahmen des Buttons / border-radius: 20px !important; / Abrundung der Ecken */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Mehrseitige Formulare: Passen Sie die Anzeige der Seitenzahl, des Seitennamens und des Feldes Kommentar an.
/* Seitenzahl / .b24-form-progress-bar-counter { font-size: 20px !important; / Schriftgröße / top: 46% !important; / Position / }
/ Seitenname / .b24-form-progress-bar-title { font-size: 28px !important; / Schriftgröße / }
/ Feld „Kommentar“ / .b24-form-control-text .b24-form-control { height: 300px !important; / Höhe / min-height: 300px !important; / Minimale Höhe / max-height: 300px !important; / Maximale Höhe / padding: 44px 20px 20px !important; / Position des Labels oben / box-sizing: border-box !important; / Feldgröße / resize: none !important; / Größenänderung beim Ausfüllen deaktivieren / }
/ Label im Textfeld / .b24-form-control-text .b24-form-control-label, .b24-form-control-text .b24-form-control:focus + .b24-form-control-label, .b24-form-control-text .b24-form-control-not-empty + .b24-form-control-label { top: 16px !important; / Position / left: 20px !important; / Abstand links / right: 20px !important; / Abstand rechts / transform: none !important; / Elementänderung / font-size: 18px !important; / Schriftgröße / line-height: 1.2 !important; / Zeilenabstand / opacity: 1 !important; / Transparenz / padding: 0 !important; / Innenabstände / }
Aktive Elemente: Machen Sie die ausgewählten Elemente deutlicher sichtbar, damit der Nutzer sofort erkennt, wo er sich im Formular befindet. Beim Navigieren mit der Tastatur oder beim Fokussieren sollten Felder, Checkboxen oder das Schließen-Symbol im Zustimmungsfenster klar hervorgehoben werden.
/ Rahmen des Feldes beim Navigieren oder Tastaturfokus / .b24-form-control-string .b24-form-control:focus:not([readonly]), .b24-form-control-list .b24-form-control:focus:not([readonly]), .b24-form-control-text .b24-form-control:focus:not([readonly]), .b24-form-control-select .field-item:focus:not([readonly]) { border-color: #000000 !important; / Rahmenfarbe / outline: 5px solid #636363 !important; / Rahmenstärke / outline-offset: 5px !important; }
/ Zusätzlicher Rahmen des Buttons „Senden“ beim Tastaturfokus / .b24-form-btn:focus-visible { outline: 5px solid #000 !important; / Farbe und Stärke des Rahmens / outline-offset: 5px !important; }
/ Rahmen der Checkboxen bei Tastaturfokus / .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 5px solid #000 !important; / Farbe und Stärke des Rahmens / outline-offset: 5px !important; }
/ Schließen-Symbol im Zustimmungsfenster / .b24-window-close { background-color: #000 !important; / Hintergrundfarbe / }
/ Schließen-Symbol im Zustimmungsfenster / .b24-window-close::after, .b24-window-close::before { background-color: #000 !important; / Farbe des Kreuzsymbols */ }
Links – Standardformular von Bitrix24, rechts – nach Anpassung mit CSS
Zusammenfassung
- Online-Formulare in Bitrix24 können Sie im integrierten Editor erstellen und anpassen. Reichen die Standardoptionen nicht aus, können Sie das Erscheinungsbild des Formulars mit CSS verändern.
- CSS-Stile ermöglichen es, Formulare an verschiedene Anforderungen anzupassen. Zum Beispiel können die Höhe eines Feldes, die Schriftgröße und -farbe geändert oder aktive Elemente beim Navigieren oder Tastaturfokus hervorgehoben werden.
- Sie können eigene CSS-Stile mit den in diesem Artikel genannten Selektoren erstellen. Um sicherzustellen, dass Ihre Änderungen angewendet werden, fügen Sie
!importantzu jeder Eigenschaft hinzu – die Standardstile von Bitrix24 haben eine höhere Priorität.
