Projektant motywów

Wstęp

Projektant motywów to funkcja, która pozwala zaprojektować formularz w ciągu kilku minut, eliminując problemy związane z tworzeniem nowego projektu, takie jak pisanie i przepisywanie niestandardowego CSS.

Aby dostosować wygląd i sposób działania formularza, po prostu przejdź do Kreatora formularzy , po prawej stronie zobaczysz panel „Projekt”. Stamtąd ustaw żądane właściwości projektu formularza, a obszar podglądu formularza będzie aktualizowany w czasie rzeczywistym.

Sekcje projektowe

Panel „Projekt” składa się z następujących sekcji. Każda sekcja koncentruje się na klasie formularza, którą można zastosować do wielu elementów.

• Globalny: To kontener formularzy.
• Forma: Sama forma. Domyślnie nie posiada dopełnienia, aby zachować kompatybilność podczas wyświetlania widżetu formularza na zewnętrznej stronie internetowej.
• Grupa formularzy: Grupa etykiet, danych wejściowych, tekstu pomocy i wiadomości weryfikacyjnej.
• Kontrola formularza: Pole wejściowe.
• Przycisk: Przycisk Prześlij (przycisk podstawowy Bootstrap).
• Etykieta: Pole etykiety (etykieta kontrolki Bootstrap)
• Symbol zastępczy
• Nagłówek
• Ustęp
• Tekst pomocy
• Połączyć
• Kroki formularza: Pojawia się, gdy do formularza dodano pole PageBreak.
• Alerty formularzy: komunikat o powodzeniu lub błędzie wyświetlany po przesłaniu formularza.
• Walidacja pola: Aby dostosować stan błędów swoich pól.
• Inne komponenty: Dostępne są również opcje niestandardowych pól wyboru, niestandardowych przycisków opcji, reCAPTCHA, pola podpisu i paska postępu.

Skopiuj, wklej i zresetuj projekt ¶

Jeśli już wcześniej tworzyłeś formularz, wiesz, że proces ten z natury obejmuje znaczną ilość powtarzalnej pracy. Dzięki funkcjom kopiowania i wklejania projektu możesz kopiować i wklejać style CSS z jednego formularza do drugiego za pomocą kilku kliknięć. Jednym kliknięciem możesz także przywrócić domyślne style projektu.

Główne narzędzia i funkcje

Projektant motywów jest wyposażony w przydatne narzędzia ułatwiające złożone projekty.

- Selektor czcionek Google

Wybierz czcionki Google z podglądem na żywo z listy rozwijanej.

- Obrazy stockowe

Tysiące obrazów stockowych znajduje się teraz w Kreatorze formularzy. Dzięki naszej integracji z Unsplash możesz wyszukiwać i dodawać obrazy stockowe do swojego formularza za pomocą kilku kliknięć.

Nie musisz licencjonować obrazów Unsplash. Na licencji Unsplash możesz bezpłatnie kopiować, modyfikować, pobierać i rozpowszechniać dowolne obrazy tej firmy, nawet w celach komercyjnych. Nie musisz pytać artysty o pozwolenie ani podawać informacji o nim, ale mimo to zalecamy podanie jego autorstwa.

- Selektor gradientu sieciowego ¶

Możesz znaleźć selektor gradientu, aby zbudować własny gradient (liniowy, promieniowy, wybrać kolory i stopnie i więcej) lub wybrać spośród ponad 100 gotowych do użycia pięknych gradientów internetowych.

- Subtelne wzory

Wybieraj spośród setek subtelnych wzorów wybranych przez Toptal, pięknych tekstur dla Twoich formularzy.

Typowe przypadki użycia

Projektant motywów to elastyczne narzędzie, które pozwala dostosować różne części formularza w celu wygenerowania arkusza stylów. Oto niektóre typowe przypadki użycia:

- Ukryj etykiety pól

Jeśli chcesz ukryć etykietę pola, po prostu kliknij pole i wprowadź następującą klasę CSS Label:sr-only

Jeśli jednak chcesz usunąć wszystkie etykiety formularzy na raz, po prostu wykonaj następujące kroki:

1. W Projekt -> Otwórz sekcję Etykieta
2. Przewiń w dół do podsekcji Extra
3. Na wyświetlaczu wybierz Brak .

To wszystko!

Uwaga: Nigdy nie zostawiaj pola bez etykiety, gdyż pomoże to w identyfikacji Twojego pola w całym systemie.

- Wyrównaj formularz do środka

Jeśli chcesz wyświetlić formularz na całej stronie (Udostępnij formularz -> Link bez ramki) ta wskazówka będzie bardzo przydatna.

Istnieje kilka sposobów wyśrodkowania formularza, poniżej opiszemy najczęstszą opcję:

1. W globalnej wybierz opcję Wyrównanie tekstu: do środka
2. I w Formularz Sekcja, wybierz:
   • Wyrównanie tekstu: Do lewej    - Margines: Automatyczne     - Szerokość: 80%

To wszystko. Możesz zwiększyć lub zmniejszyć szerokość formularza zgodnie ze swoimi wymaganiami.

- Zaprojektuj przyciski o pełnej szerokości

Jeśli chcesz wyświetlić konkretny przycisk w pełnej szerokości, po prostu kliknij pole i wprowadź następującą klasę CSS:btn-block

Jeśli jednak chcesz zaprojektować od razu całe przyciski formularza, wykonaj następujące kroki:

1. W Projekt -> Otwórz sekcję Przycisk
2. Przewiń w dół do podsekcji Rozmiar
3. Google umieszcza integrację autouzupełniania

To wszystko!