Jak dodać niestandardową zawartość HTML do formularzy WordPress

Formularze to nie tylko pola wprowadzania danych. Czasami trzeba coś wyjaśnić, podzielić sekcje, wyświetlić obraz lub dodać kontekst między pytaniami. Niestandardowa zawartość HTML przekształca statyczne formularze w interaktywne doświadczenia. Oto jak dodać bogatą zawartość do formularzy WordPress.

Czym jest blok HTML?

Definicja

Blok HTML to specjalny element formularza, który wyświetla treść bez konieczności wprowadzania danych. Renderuje kod HTML między polami formularza, umożliwiając dodawanie tekstu, obrazów, filmów, separatorów i innych elementów.

Blok HTML kontra pola zwykłe

Dlaczego warto używać bloków HTML?

1. Instrukcje i wskazówki

Pomóż użytkownikom zrozumieć, co mają zrobić:

• Wyjaśnij złożone pytania
• Podaj kontekst
• Lista wymagań
• Przewodnik po sekcjach

2. Organizacja wizualna

Podziel długie formy:

• Nagłówki sekcji
• Przegrody poziome
• Separatory wizualne
• Zgrupowana zawartość

3. Bogate media

Dodaj elementy wizualne:

• Obrazy i ikony
• Osadzone filmy
• Infografika
• Schematy

4. Prawo i zgodność

Wyświetl ważne informacje:

• Tekst regulaminu
• Powiadomienia o ochronie prywatności
• Disclaimers
• Wymagane ujawnienia

5 Branding

Wzmocnij swoją markę:

• logo
• Kolory marki
• Niestandardowa stylizacja
• Spójny wygląd

Dodawanie bloku HTML

Krok 1: Dodaj pole

1. Otwórz formularz w A.F.B.
2. Znajdź Blok HTML na liście pól
3. Przeciągnij do żądanej pozycji w formularzu

Krok 2: Dodaj swoją treść

1. Kliknij blok HTML, aby go wybrać
2. Otwórz panel ustawień
3. Wprowadź swoją zawartość HTML
4. Podgląd w celu sprawdzenia wyglądu

Krok 3: Pozycja i styl

1. Przeciągnij, aby zmienić kolejność, jeśli to konieczne
2. Dodaj style lub klasy wbudowane
3. Test na front-endzie

Typowe zastosowania bloków HTML

1. Nagłówki sekcji

Informacje osobiste Proszę podać poniżej swoje dane kontaktowe.

Wynik:

Informacje osobiste
Proszę podać poniżej swoje dane kontaktowe.

2. Poziomy separator

Wynik: Czysta linia oddzielająca sekcje.

3. Pole instrukcji

 Ważne: Przed kontynuacją prosimy przygotować numer zamówienia.

4. Instrukcje punktowane

Przed wysłaniem upewnij się, że: Wszystkie wymagane pola zostały wypełnione Twój adres e-mail jest poprawny Przejrzałeś poniższe warunki

5. Wizerunek

6. Wbudowane wideo

7. Pole ostrzeżenia/alert

 ⚠️ Ostrzeżenie: Zgłoszeń nie można edytować po wysłaniu.

8. Pole sukcesu/informacji

 ✓ Twoje postępy są zapisywane automatycznie.

9. Polityka prywatności

Twoje dane są chronione zgodnie z naszą Polityką Prywatności . Nigdy nie udostępnimy Twoich danych osobom trzecim.

10. Podsumowanie warunków umowy

 Warunki korzystania z usługi Wysyłając ten formularz wyrażasz zgodę na...

Przykłady układów formularzy

Formularz wielosekcyjny

[Blok HTML: Sekcja 1 — Nagłówek danych osobowych] Pole imienia i nazwiska Pole adresu e-mail Pole telefonu [Blok HTML: Separator] [Blok HTML: Sekcja 2 — Nagłówek szczegółów projektu] Rozwijane menu typu projektu Pole tekstu opisu Pole budżetu [Blok HTML: Separator] [Blok HTML: Sekcja 3 — Nagłówek kroków końcowych] Pole wyboru warunków przesyłania pliku Przycisk Prześlij

Formularz instruktażowy

[Blok HTML: Wiadomość powitalna i instrukcje] [Blok HTML: Wskaźnik kroku 1] Pytanie 1 Pytanie 2 [Blok HTML: Wskaźnik kroku 2] Pytanie 3 Pytanie 4 [Blok HTML: Przypomnienie o przeglądzie] Przycisk Prześlij

Formularz zgłoszeniowy

[Blok HTML: Logo firmy] [Blok HTML: Nazwa i opis stanowiska] Pole imienia i nazwiska Pole adresu e-mail [Blok HTML: Polecenie „Prześlij swoje CV” z wymaganiami dotyczącymi formatu] Pole przesyłania pliku [Blok HTML: Oświadczenie o równych szansach] Przycisk Prześlij

Stylizowanie bloków HTML

Style wbudowane

Dodaj style bezpośrednio do elementów:

Tutaj znajdziesz Twoją stylizowaną treść.

Wspólne właściwości stylu

Tło: tło: #f5f5f5; Wypełnienie: wypełnienie: 15px; Margines: margin: 20px 0; Obramowanie: obramowanie: 1px solid #ddd; Promień obramowania: border-radius: 5px; Rozmiar czcionki: font-size: 14px; Kolor: color: #333; Wyrównanie tekstu: text-align: center;

Tworzenie stylizowanych pól

Pole informacyjne (niebieskie):

 ℹ️ Tutaj wiadomość informacyjna

Pole sukcesu (zielone):

 ✓ Tutaj pojawia się komunikat o powodzeniu

Pole ostrzegawcze (żółte):

 ⚠️ Tutaj znajduje się komunikat ostrzegawczy

Pole błędu (czerwone):

 ✕ Błąd lub ważny alert tutaj

Porady dotyczące projektowania responsywnego

Obrazy

Zawsze używaj max-width w przypadku obrazów responsywnych:

Filmy

Użyj responsywnego wrappera dla osadzonych filmów:

Czytelność tekstu

• Użyj względnych rozmiarów czcionek (em, rem)
• Utrzymuj czytelną długość linii
• Odpowiednie wypełnienie na urządzeniach mobilnych

Najlepsze praktyki

1. Zachowaj zwięzłość

• Krótki, czytelny tekst
• Punkty wypunktowane nad akapitami
• Tylko istotne informacje

2. Hierarchia wizualna

• Wyczyść nagłówki
• Spójny styl
• Przepływ logiczny

3. Dostępność

• Tekst alternatywny dla obrazów
• Wystarczający kontrast kolorów
• Semantyczny HTML (h2, h3, p, ul)
• Nie opieraj się wyłącznie na kolorze, aby uzyskać znaczenie

4. Nie przesadzaj

• Zbyt dużo treści przytłacza
• Zrównoważyć zawartość z polami wprowadzania danych
• Cel każdego bloku HTML

5. Dokładnie przetestuj

• Podgląd na komputerze i urządzeniu mobilnym
• Sprawdź, czy wszystkie linki działają
• Sprawdź ładowanie obrazów
• Testuj w różnych przeglądarkach

Zaawansowane pomysły na bloki HTML

Wskaźnik postępu

1  2  3 Krok 2 z 3: Szczegóły projektu

Układ dwukolumnowy

Opcja A Opis opcji A... Opcja B Opis opcji B...

Sekcja składana (szczegóły/podsumowanie)

Kliknij, aby przeczytać pełne warunki Pełny tekst regulaminu znajduje się tutaj...

Lista ikon

✓ Darmowa wysyłka dla zamówień powyżej 50 USD ✓ 30-dniowa gwarancja zwrotu pieniędzy ✓ Całodobowa obsługa klienta

Odliczanie/Pilność

 🔥 Oferta ograniczona czasowo – zgłoś się do piątku, aby się zakwalifikować!

Względy bezpieczeństwa

Co jest bezpieczne

• Standardowe znaczniki HTML (p, div, h1-h6, ul, li, itd.)
• Style inline
• Zdjęcia z zaufanych źródeł
• Osadzone filmy z głównych platform

Co unikać

• JavaScript w blokach HTML (może zostać usunięty)
• Skrypty zewnętrzne
• Niezaufane źródła ramek iframe
• Elementy formularza wewnątrz bloków HTML

Uwaga dotycząca ograniczeń skryptów

Większość kreatorów formularzy oczyszcza kod HTML, aby zapobiec atakom XSS. JavaScript i niektóre tagi mogą zostać automatycznie usunięte ze względów bezpieczeństwa.

Rozwiązywanie problemów

HTML nie renderuje się

• Sprawdź błędy składniowe
• Sprawdź, czy tagi są prawidłowo zamknięte
• Niektóre tagi mogą być ograniczone

Stylizacja nie została zastosowana

• Sprawdź składnię stylu inline
• Motyw CSS może zostać zastąpiony
• Użyj bardziej szczegółowych stylów lub !important

Obrazy nie są wyświetlane

• Sprawdź, czy adres URL obrazu jest poprawny
• Sprawdź uprawnienia do obrazu
• Użyj pełnego adresu URL (https://…)

Przerwanie układu na urządzeniach mobilnych

• Dodaj max-width: 100% do obrazów
• Użyj elastycznych układów (flexbox)
• Przetestuj na rzeczywistym urządzeniu mobilnym

Podsumowanie

Dodawanie niestandardowej zawartości HTML do formularzy:

1. Dodaj blok HTML – Przeciągnij do formularza
2. Wprowadź treść – HTML w panelu ustawień
3. Odpowiednia pozycja – Pomiędzy polami istotnymi
4. Stylizuj według potrzeb – Style lub klasy inline
5. Utrzymuj dostępność – Tekst alternatywny, kontrast, semantyczny HTML
6. Testuj responsywnie – Komputery stacjonarne i urządzenia mobilne

Wniosek

Bloki HTML przekształcają formularze z prostych kwestionariuszy w interaktywne doświadczenia. Dodaj kontekst tam, gdzie jest potrzebny użytkownikom, uporządkuj długie formularze w logiczne sekcje i dołącz bogate multimedia, aby angażować i przekazywać informacje. Niezależnie od tego, czy jest to nagłówek sekcji, pole z instrukcją, czy osadzony film wideo, niestandardowa zawartość HTML sprawia, że ​​Twoje formularze są bardziej efektywne i przyjazne dla użytkownika.

Automatyczny kreator formularzy Zawiera typ pola Blok HTML, umożliwiający dodawanie dowolnej zawartości HTML między polami formularza. Twórz profesjonalne, informacyjne formularze, które poprowadzą użytkowników przez proces przesyłania.

Gotowy na udoskonalenie swoich formularzy? Pobierz Auto Form Builder i zacznij dodawać własną treść już dziś.