Stylizacja formy
Kreator formularzy Auto Form daje Ci pełną kontrolę nad stylem formularzy. Dopasuj kolory swojej marki, użyj własnych czcionek, dostosuj odstępy i zaprojektuj formularze, które będą wyglądać jak naturalna część Twojej witryny.
Dlaczego stylizacja formularzy ma znaczenie
Twoja witryna internetowa ma markę. Twoje formularze powinny to odzwierciedlać.
Gdy formularze wyglądają inaczej niż reszta witryny, odwiedzający wahają się. Zastanawiają się, czy nadal są na tej samej stronie. To wahanie obniża konwersję.
Odpowiednio zaprojektowane formularze świadczą również o profesjonalizmie. Dopracowany formularz pokazuje odwiedzającym, że zależy Ci na szczegółach – a jeśli dbasz o wygląd formularza, prawdopodobnie zależy Ci również na ich danych.
Jak działa stylizacja formularzy
Auto Form Builder zawiera edytor stylów wizualnych wbudowany w interfejs kreatora formularzy.
- Wybierz, co chcesz stylizować. Wybierz spośród kontenerów formularzy, etykiet pól, pól wprowadzania danych, przycisków lub komunikatów o błędach.
- Dostosuj ustawienia. Użyj selektorów kolorów, suwaków i list rozwijanych, aby zmieniać wartości. Nie musisz uczyć się ani zapamiętywać składni CSS.
- Podgląd natychmiastowyKażda zmiana jest natychmiast widoczna w podglądzie na żywo. Zobacz dokładnie, jak będzie wyglądał Twój formularz przed publikacją.
- Zapisz jako domyślneAutomatycznie stosuj styl do nowych formularzy. Stwórz raz, używaj wszędzie.
Co możesz dostosować
Kolory
Kontroluj każdy kolor w swoim formularzu. Kolory tła dla kontenera formularza i poszczególnych pól. Kolory tekstu dla etykiet, symboli zastępczych i tekstu wejściowego. Kolory obramowania dla stanów domyślnych, fokusu i błędów. Kolory przycisków dla tła, tekstu i efektów najechania kursorem.
Typografia
Wybierz czcionki dla etykiet i pól wprowadzania danych. Dostosuj rozmiary czcionek niezależnie – większe etykiety dla podkreślenia, mniejszy tekst pomocniczy dla informacji drugorzędnych. Kontroluj grubość czcionki, aby pogrubić etykiety lub zmniejszyć rozmiar tekstu wejściowego.
Odstępy i układ
Ustaw odstępy między polami, aby zapewnić sobie przestrzeń do oddychania. Dostosuj odstępy wewnątrz pól, aby zapewnić komfort wprowadzania tekstu. Kontroluj marginesy wokół całego formularza, aby idealnie dopasować go do układu strony.
Granice i narożniki
Określ szerokość, styl i kolor obramowania. Zaokrągl rogi dla nowoczesnego wyglądu lub zachowaj ostrość, aby uzyskać minimalistyczny design. Zastosuj różne style obramowania do różnych stanów formularza – domyślnie subtelne obramowania, a w centrum uwagi wyraźne obramowania.
przyciski
Zaprojektuj przyciski „Wyślij”, które pasują do Twojej marki. Kolor tła, kolor tekstu, promień obramowania, odstęp, rozmiar i grubość czcionki. Dostosuj stany najechania kursorem i aktywności, aby przyciski były responsywne i klikalne.
Kontener formularzy
Nadaj styl całemu szablonowi formularza. Dodaj kolor tła lub pozostaw je przezroczyste. Zastosuj cienie pól dla uzyskania głębi. Ustaw promień obramowania dla zaokrąglonych kontenerów formularza. Kontroluj maksymalną szerokość, aby zapobiec zbytniemu rozciąganiu się formularzy.
Typowe scenariusze stylizacji formularzy
Wytyczne dotyczące marki Match
Twoja firma ma określone kolory – #0F2D5F dla kolorów podstawowych, #F59E0B dla kolorów akcentowych. Wprowadź te wartości w edytorze stylów. Przyciski formularzy używają koloru akcentowego. Etykiety formularzy używają koloru podstawowego. Idealna spójność marki.
Twórz formularze o wysokim kontraście
Strona internetowa z ciemnym tłem? Stwórz jasne, wyróżniające się formularze. Jasne tło? Użyj obramowanych formularzy z subtelnymi cieniami, aby zdefiniować obszar formularza bez wizualnego konkurowania.
Projektuj minimalne formy
Usuń obramowania, zmniejsz odstępy, użyj przezroczystego tła. Twórz formularze, które będą zintegrowane ze stroną, a nie tkwić w ramkach.
Twórz odważne formularze wezwania do działania
Duże przyciski, wyraziste kolory, obszerne wypełnienie. Twórz formularze, które przyciągają uwagę na najważniejszych stronach generujących leady.
Formularze pasujące do każdego motywu
Auto Form Builder współpracuje z każdym motywem WordPress. Twoje formularze ze stylami dostosowują się do każdego kontekstu projektu.
Używasz motywu Woodmart, Astra, GeneratePress, Divi lub innego? Twoje formularze będą wyglądać naturalnie. Edytor stylów daje Ci wystarczającą kontrolę, aby dopasować się do każdego systemu projektowego.
Żadnych konfliktów motywów. Żadnych problemów z dziedziczeniem stylów. Po prostu formularze wyglądające dokładnie tak, jak chcesz.
Nie jest wymagany CSS
Nie musisz pisać niestandardowego kodu CSS, aby stylizować swoje formularze. Edytor wizualny zajmie się wszystkim.
Jeśli jednak chcesz kontrolować CSS, Auto Form Builder obsługuje niestandardowy CSS dla każdego formularza. Dodaj nadpisania dla przypadków skrajnych lub zastosuj zaawansowane style niedostępne w edytorze wizualnym. Zaawansowani użytkownicy zyskują potrzebną elastyczność.
