Formularze w Bitrix24 tworzysz i konfigurujesz we wbudowanym edytorze. Gdy standardowe opcje nie wystarczają, wygląd formularza możesz zmienić za pomocą CSS. Na przykład: powiększyć czcionkę, zmienić kolor tekstu i tła, odpowiednio wystylizować przyciski, dodać obramowanie lub zaokrąglić rogi pól. Dzięki temu formularz lepiej wpisuje się w projekt wizualny i staje się wygodniejszy dla użytkowników.

Aby zmodyfikować formularz CRM, dodaj własne style CSS na stronie, na której się znajduje. Możesz to zrobić na dwa sposoby:

• edytując podłączony do strony plik CSS,
• otwierając stronę w trybie edycji kodu i wstawiając style w bloku <style> przed kodem formularza.

Tekst pomiędzy znacznikami /* i */ to komentarze – ułatwiają orientację w kodzie i nie wpływają na wygląd formularza. Możesz je zostawić lub usunąć.

Jak dopasować formularz do wyglądu strony

Dzięki CSS możesz ujednolicić formularz CRM z resztą witryny: dostosować kolory, czcionki, wygląd pól i przycisków. Formularz będzie wtedy wyglądał spójnie i nie będzie rzucał się w oczy niepasującym stylem.

Szerokość formularza. Ustaw maksymalną szerokość, aby formularz poprawnie wyświetlał się na różnych urządzeniach.

 /* Szerokość formularza */ .b24-form-wrapper { min-height: 250px !important; max-width: 540px !important; } 

Czcionka formularza. Ustaw jedną czcionkę dla wszystkich elementów formularza.

 /* Czcionka formularza */ html, body, .form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; } 

Nagłówek i podtytuł formularza. Zmień rozmiar, grubość, kolor czcionki, odstępy między wierszami oraz marginesy pod nagłówkiem.

 /* Nagłówek formularza */ .b24-form-header-title { font-size: 25px !important; /* rozmiar czcionki */ line-height: 38px !important; /* odstęp między wierszami */ margin-top: 60px !important; /* margines górny */ margin-bottom: 10px !important; /* margines dolny */ font-weight: 700 !important; /* grubość czcionki */ } /* Podtytuł formularza */ .b24-form-header-description { font-size: 16px !important; /* rozmiar czcionki */ line-height: 26px !important; /* odstęp między wierszami */ color: #4b5563 !important; /* kolor tekstu */ } 

Wygląd pola. Ustaw wysokość, kolor tła i obramowania. Zmiana dotyczy wszystkich pól w formularzu.

 /* Wygląd pól */ .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; /* wysokość pola */ background-color: #FAFBFC !important; /* kolor tła */ padding-left: 16px !important; /* odstęp od lewej */ padding-right: 16px !important; /* odstęp od prawej */ border: 1px solid #c9d2dd !important; border-color: #E2E2E2 !important; /* kolor obramowania */ border-radius: 12px !important; /* zaokrąglenie rogów */ } 

Etykieta pola – dostosuj kolor, rozmiar i odstępy, aby dobrze komponowała się z resztą strony.

Możesz osobno stylizować etykietę w stanie domyślnym, podczas fokusu i po wypełnieniu pola.

 /* Etykieta pola */ .b24-form-control-label { font-size: 16px !important; line-height: 52px !important; color: #525C69 !important; opacity: 1 !important; padding-left: 16px !important; padding-right: 16px !important; } /* Etykieta podczas fokusu lub po wypełnieniu */ .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; top: -10px !important; color: #525C69 !important; background: transparent !important; padding-left: 14px !important; padding-right: 12px !important; } 

Tekst wpisywany w polu. Określ rozmiar i kolor czcionki dla treści wprowadzanej przez użytkownika.

 /* Tekst w polu */ .b24-form-control { font-size: 16px !important; color: #000000 !important; } 

Pole wielokrotnego wyboru. Ustaw odpowiedni rozmiar czcionki opcji listy, styl krzyżyka usuwającego wybór oraz ikonę rozwijania listy.

 /* Rozmiar tekstu opcji listy */ .b24-form-control-list-selector-item-title { font-size: 16px !important; } /* Krzyżyk usuwania wyboru */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; top: 4px !important; } /* Kontener krzyżyka */ .b24-form-control-list .b24-form-icon-remove { height: 60px !important; right: 50px !important; } /* Ikona rozwijania listy */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; width: 12px !important; top: 26px !important; right: 20px !important; } 

Zgody. Dopasuj wielkość pól wyboru oraz styl tekstu zgody do reszty projektu.

 /* Wielkość pola wyboru */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 20px; height: 20px; } /* Odstępy w tekście zgody */ .b24-form-control-desc { font-size: 14px !important; line-height: 1.45 !important; } /* Rozmiar linku w zgodzie */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 14px !important; } /* Margines po bloku zgód */ .b24-form-btn-container { margin-top: 24px !important; } 

Przyciski. Zmień kolor tła, tekstu, wielkość, obramowanie i zaokrąglenie przycisków.

 /* Styl przycisku */ .b24-form-btn { background: #10B769 !important; color: #fff !important; font-weight: 400 !important; font-size: 16px !important; height: 62px !important; border: 1px solid #10B769 !important; border-radius: 12px !important; } 

Formularze wielostronicowe. Dostosuj wyświetlanie numeru strony, tytułu oraz pola „Komentarz”.

 /* Numer strony */ .b24-form-progress-bar-counter { font-size: 14px !important; top: 46% !important; } /* Tytuł strony */ .b24-form-progress-bar-title { font-size: 18px !important; } /* Pole „Komentarz” */ .b24-form-control-text .b24-form-control { height: 190px !important; min-height: 190px !important; max-height: 190px !important; padding: 34px 16px 16px !important; box-sizing: border-box !important; resize: none !important; } /* Etykieta w polu tekstowym */ .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; left: 16px !important; right: 16px !important; transform: none !important; font-size: 13px !important; line-height: 1.2 !important; opacity: 1 !important; padding: 0 !important; } 

Elementy interaktywne. Zmień sposób wyróżniania pól, checkboxów i przycisków podczas najechania myszką lub fokusu klawiaturowego – zgodnie ze stylem całej strony.

 /* Obramowanie podczas fokusu / najechania */ .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; outline: 3px solid #bcdcff !important; outline-offset: 2px !important; } /* Fokusu klawiaturowy na przycisku „Wyślij” */ .b24-form-btn:focus-visible { outline: 3px solid #1f2937 !important; outline-offset: 2px !important; } /* Fokusu klawiaturowy na checkboxach */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 3px solid #1f2937 !important; outline-offset: 2px !important; } /* Ikona zamykania okna zgody */ .b24-window-close { background-color: #005def !important; } /* Krzyżyk w ikonie zamykania */ .b24-window-close::after, .b24-window-close::before { background-color: #000000 !important; } 

Jak poprawić dostępność i czytelność formularza

Pokażemy, jak dostosować formularz do potrzeb osób z wadami wzroku lub trudnościami w odbiorze tekstu. Zmiany te są zgodne z wymaganiami normy PN-EN 301 549 oraz WCAG 2.1 (poziom AA).

Czcionka formularza. Ustaw jedną, czytelną czcionkę dla całego formularza.

 /* Czcionka formularza */ html, body, .form-container, .b24-form, .b24-form * { font-family: 'Inter', sans-serif !important; } 

Nagłówek i podtytuł formularza. Powiększ czcionkę, zwiększ odstępy między wierszami oraz marginesy – tekst będzie znacznie łatwiejszy do przeczytania.

 /* Nagłówek formularza */ .b24-form-header-title { font-size: 38px !important; line-height: 60px !important; margin-top: 60px !important; margin-bottom: 20px !important; } /* Podtytuł formularza */ .b24-form-header-description { font-size: 30px !important; line-height: 36px !important; } 

Wygląd pola. Zwiększ wysokość pól, ustaw białe tło i ciemniejsze, grubsze obramowanie – uzyskasz lepszy kontrast i miejsce na większą czcionkę.

 /* Wygląd pól */ .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; background-color: #fff !important; padding-left: 20px !important; padding-right: 20px !important; border: 2px solid #A8ADB4 !important; border-color: #A8ADB4 !important; border-radius: 20px !important; } 

Etykieta pola – użyj dużej, ciemnej czcionki w stanie spoczynku. Po kliknięciu lub wypełnieniu pola etykieta może się zmniejszyć i przesunąć do góry.

 /* Etykieta pola */ .b24-form-control-label { font-size: 30px !important; line-height: 100px !important; color: #000 !important; opacity: 1 !important; padding-left: 20px !important; padding-right: 20px !important; } /* Etykieta podczas fokusu lub po wypełnieniu */ .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; top: -24px !important; padding-left: 20px !important; padding-right: 20px !important; } 

Tekst wpisywany w polu. Ustaw dużą, ciemną czcionkę – tekst musi być wyraźnie widoczny.

 /* Tekst w polu */ .b24-form-control { font-size: 30px !important; color: #000000 !important; padding-top: 24px !important; } 

Pole wielokrotnego wyboru. Powiększ czcionkę opcji listy – ułatwi to wybór np. programu wycieczki.

 /* Rozmiar tekstu opcji listy */ .b24-form-control-list-selector-item-title { font-size: 25px !important; } /* Krzyżyk usuwania wyboru */ .b24-form-icon-remove::after, .b24-form-icon-remove::before { height: 24px !important; top: 30px !important; } /* Kontener krzyżyka */ .b24-form-control-list .b24-form-icon-remove { height: 100px !important; right: 50px !important; } /* Ikona rozwijania listy */ .b24-form-control-list .b24-form-control-container::after { height: 12px !important; width: 12px !important; top: 45px !important; right: 20px !important; } 

Zgody. Powiększ pola wyboru i tekst zgody – ułatwi to zaznaczanie np. zgody na przetwarzanie danych osobowych.

 /* Wielkość pola wyboru */ .b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { width: 28px; height: 28px; } /* Tekst zgody */ .b24-form-control-desc { font-size: 25px !important; } /* Link w zgodzie */ .b24-form-field-agreement .b24-form-field-agreement-link { font-size: 25px !important; } /* Margines po bloku zgód */ .b24-form-btn-container { margin-top: 40px !important; } 

Przyciski. Zwiększ kontrast przycisków – dzięki temu będą lepiej widoczne i łatwiejsze w obsłudze.

 /* Styl przycisku */ .b24-form-btn { background: #000000 !important; color: #fff !important; font-size: 32px !important; height: 100px !important; border: 20px solid #000000 !important; border-radius: 20px !important; } 

Formularze wielostronicowe. Dostosuj numer strony, tytuł oraz pole „Komentarz”.

 /* Numer strony */ .b24-form-progress-bar-counter { font-size: 20px !important; top: 46% !important; } /* Tytuł strony */ .b24-form-progress-bar-title { font-size: 28px !important; } /* Pole „Komentarz” */ .b24-form-control-text .b24-form-control { height: 300px !important; min-height: 300px !important; max-height: 300px !important; padding: 44px 20px 20px !important; box-sizing: border-box !important; resize: none !important; } /* Etykieta w polu tekstowym */ .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; left: 20px !important; right: 20px !important; transform: none !important; font-size: 18px !important; line-height: 1.2 !important; opacity: 1 !important; padding: 0 !important; } 

Elementy interaktywne. Zwiększ widoczność fokusu i najechania – użytkownik od razu zobaczy, na którym elemencie aktualnie się znajduje.

 /* Obramowanie podczas fokusu / najechania */ .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; outline: 5px solid #636363 !important; outline-offset: 5px !important; } /* Dodatkowe obramowanie przycisku „Wyślij” */ .b24-form-btn:focus-visible { outline: 5px solid #000 !important; outline-offset: 5px !important; } /* Fokusu klawiaturowy na checkboxach */ .b24-form-control-agreement input[type="checkbox"]:focus-visible, .b24-form-control-bool input[type="checkbox"]:focus-visible { outline: 5px solid #000 !important; outline-offset: 5px !important; } /* Ikona zamykania okna zgody */ .b24-window-close { background-color: #000 !important; } /* Krzyżyk w ikonie zamykania */ .b24-window-close::after, .b24-window-close::before { background-color: #000 !important; }