Cum să adaugi conținut HTML personalizat în formularele WordPress

Formularele nu sunt doar câmpuri de introducere a datelor. Uneori trebuie să explici ceva, să împarți secțiuni, să afișezi o imagine sau să adaugi context între întrebări. Conținutul HTML personalizat transformă formularele statice în experiențe ghidate. Iată cum poți adăuga conținut bogat formularelor tale WordPress.

Ce este blocul HTML?

Definiție

Blocul HTML este un element special de formular care afișează conținut fără a colecta date de intrare. Acesta redă HTML între câmpurile formularului, permițându-vă să adăugați text, imagini, videoclipuri, separatoare și multe altele.

Bloc HTML vs. Câmpuri Regulare

De ce să folosim blocuri HTML?

1. Instrucțiuni și îndrumări

Ajutați utilizatorii să înțeleagă ce trebuie să facă:

• Explicați întrebări complexe
• Oferiți context
• Cerințe de listă
• Ghid prin secțiuni

2. Organizare vizuală

Împărțiți formularele lungi:

• Titluri de secțiuni
• Divizoare orizontale
• Separatoare vizuale
• Conținut grupat

3. Conținut media îmbogățit

Adăugați elemente vizuale:

• Imagini și pictograme
• Videoclipuri încorporate
• Infografice
• diagrame

4. Legal și conformitate

Afișați informații importante:

• Textul termenilor și condițiilor
• Notificări privind confidențialitatea
• declinări
• Dezvăluiri obligatorii

5. branding

Consolidați-vă brandul:

• Logos
• Culori de marcă
• Stil personalizat
• Aspect consistent

Adăugarea unui bloc HTML

Pasul 1: Adăugați câmpul

1. Deschideți formularul în A.F.B.
2. Găsi Bloc HTML în lista de câmpuri
3. Trageți-l în poziția dorită din formular

Pasul 2: Adăugați conținutul dvs

1. Faceți clic pe blocul HTML pentru a-l selecta
2. Deschideți panoul de setări
3. Introduceți conținutul HTML
4. Previzualizare pentru verificarea aspectului

Pasul 3: Poziție și stil

1. Trageți pentru a reordona, dacă este necesar
2. Adăugați stiluri sau clase inline
3. Testare pe frontend

Utilizări comune ale blocurilor HTML

1. Titluri de secțiune

Informații personale Vă rugăm să furnizați datele dumneavoastră de contact mai jos.

Rezultat:

Informatii personale
Vă rugăm să furnizați detaliile dvs. de contact mai jos.

2. Divizor orizontal

Rezultat: O linie curată care separă secțiunile.

3. Cutie cu instrucțiuni

 Important: Vă rugăm să aveți numărul comenzii pregătit înainte de a continua.

4. Instrucțiuni cu puncte

Înainte de a trimite, vă rugăm să vă asigurați că: Toate câmpurile obligatorii sunt completate Adresa ta de e-mail este corectă Ați revizuit termenii de mai jos

5. Imagine

6. Videoclip încorporat

7. Casetă de avertizare/alertă

 ⚠️ Atenție: Materialele trimise nu pot fi editate după trimitere.

8. Succes/Casetă informativă

 ✓ Progresul tău este salvat automat.

9. Notificare de confidențialitate

Informațiile dumneavoastră sunt protejate în conformitate cu Politica noastră de confidențialitate . Nu vom partaja niciodată datele dumneavoastră cu terțe părți.

10. Rezumatul Termenilor și Condițiilor

 Termeni și condiții Prin trimiterea acestui formular, sunteți de acord să...

Exemple de aspect de formular

Formular cu mai multe secțiuni

[Bloc HTML: Secțiunea 1 - Antet Informații personale] Câmp Nume Câmp Email Câmp Telefon [Bloc HTML: Divizor] [Bloc HTML: Secțiunea 2 - Antet Detalii proiect] Meniu derulant Tip proiect Zona de text Descriere Câmp Buget [Bloc HTML: Divizor] [Bloc HTML: Secțiunea 3 - Antet Pași finali] Caseta de selectare Termeni încărcare fișier Buton Trimite

Formular de instruire

[Bloc HTML: Mesaj de bun venit și instrucțiuni] [Bloc HTML: Indicator pas 1] Întrebarea 1 Întrebarea 2 [Bloc HTML: Indicator pas 2] Întrebarea 3 Întrebarea 4 [Bloc HTML: Memento revizuire] Buton Trimite

Formular de cerere

[Bloc HTML: Sigla companiei] [Bloc HTML: Titlul și descrierea postului] Câmp Nume Câmp Email [Bloc HTML: Instrucțiuni „Încărcați CV-ul” cu cerințe de format] Câmp Încărcare fișier [Bloc HTML: Declarație privind egalitatea de șanse] Buton Trimite

Stilizarea blocurilor HTML

Stiluri în linie

Adăugați stiluri direct la elemente:

Conținutul tău stilizat aici.

Proprietăți de stil comune

Fundal: background: #f5f5f5; Padding: padding: 15px; Margine: margin: 20px 0; Bordură: bordură: 1px solid #ddd; Rază bordură: border-radius: 5px; Dimensiune font: font-size: 14px; Culoare: color: #333; Aliniere text: text-align: center;

Crearea de casete stilizate

Casetă informativă (albastră):

 ℹ️ Mesaj informativ aici

Cutie de succes (verde):

 ✓ Mesaj de succes aici

Casetă de avertizare (galbenă):

 ⚠️ Mesaj de avertizare aici

Casetă de eroare (roșie):

 ✕ Eroare sau alertă importantă aici

Sfaturi pentru design responsiv

imagini

Folosește întotdeauna max-width pentru imagini responsive:

Video

Folosește wrapper responsiv pentru videoclipurile încorporate:

Lizibilitatea textului

• Folosește dimensiuni relative ale fontului (em, rem)
• Mențineți lungimile liniilor lizibile
• Căptușeală adecvată pe mobil

Cele mai bune practici

1. Păstrați-l concis

• Text scurt, scanabil
• Buletine peste paragrafe
• Doar informații esențiale

2. Ierarhia vizuală

• Titluri clare
• Stilizare consistentă
• Flux logic

3. Accesibilitate

• Alt text pentru imagini
• Contrast de culoare suficient
• HTML semantic (h2, h3, p, ul)
• Nu te baza doar pe culoare pentru semnificație

4. Nu exagera

• Prea mult conținut copleșește
• Echilibrează conținutul cu câmpurile de introducere a datelor
• Scopul fiecărui bloc HTML

5. Testați temeinic

• Previzualizare pe desktop și mobil
• Verificați funcționarea tuturor linkurilor
• Verificați încărcarea imaginilor
• Testează în diferite browsere

Idei avansate de blocuri HTML

Indicator de progres

1  2  3 Pasul 2 din 3: Detalii proiect

Aspect pe două coloane

Opțiunea A Descrierea opțiunii A... Opțiunea B Descrierea opțiunii B...

Secțiune pliabilă (Detalii/Rezumat)

Faceți clic pentru a citi termenii și condițiile complete Textul complet al termenilor și condițiilor este aici...

Lista de pictograme

✓ Livrare gratuită pentru comenzi de peste 50 USD ✓ Garanție de returnare a banilor în 30 de zile ✓ Asistență clienți 24/7

Numărătoare inversă/Urgență

 🔥 Ofertă limitată - Trimite-o până vineri pentru a te califica!

Considerații de securitate

Ce este sigur

• Etichete HTML standard (p, div, h1-h6, ul, li etc.)
• Stiluri inline
• Imagini din surse de încredere
• Videoclipuri încorporate de pe platformele majore

Ce trebuie evitat

• JavaScript în blocuri HTML (poate fi eliminat)
• Scripturi externe
• Surse iframe neîncrezătoare
• Elemente de formular în interiorul blocurilor HTML

Notă privind restricțiile de script

Majoritatea constructorilor de formulare sanitizează codul HTML pentru a preveni atacurile XSS. JavaScript și anumite etichete pot fi eliminate automat din motive de securitate.

Depanare

HTML nu se redă

• Verificați dacă există erori de sintaxă
• Verificați dacă etichetele sunt închise corect
• Este posibil ca unele etichete să fie restricționate

Stilizare neaplicată

• Verificați sintaxa stilului inline
• CSS-ul temei poate avea prioritate
• Folosește stiluri mai specifice sau !important

Imaginile nu se afișează

• Verificați dacă adresa URL a imaginii este corectă
• Verificați permisiunile pentru imagine
• Folosește adresa URL completă (https://…)

Ruptură de aspect pe mobil

• Adăugați lățimea maximă: 100% la imagini
• Folosește machete flexibile (flexbox)
• Test pe un dispozitiv mobil real

Rezumat

Adăugarea de conținut HTML personalizat în formulare:

1. Adăugați un bloc HTML – Trageți în formularul dvs.
2. Introduceți conținut – HTML în panoul de setări
3. Poziționați-vă corespunzător – Între câmpurile relevante
4. Stil după cum este necesar – Stiluri sau clase inline
5. Păstrați accesibil – Text alternativ, contrast, HTML semantic
6. Testează cu răspuns – Desktop și mobil

Concluzie

Blocurile HTML transformă formularele din chestionare simple în experiențe ghidate. Adăugați context acolo unde utilizatorii au nevoie de el, organizați formularele lungi în secțiuni logice și includeți conținut media complex pentru a interacționa și a informa. Fie că este vorba de un titlu de secțiune, o casetă de instrucțiuni sau un videoclip încorporat, conținutul HTML personalizat face ca formularele dvs. să fie mai eficiente și mai ușor de utilizat.

Constructor automat de formulare include tipul de câmp Bloc HTML, permițându-vă să adăugați orice conținut HTML între câmpurile formularului. Creați formulare profesionale și informative care să ghideze utilizatorii prin procesul de trimitere.

Ești gata să-ți îmbunătățești formularele? Descărcați Auto Form Builder și începe să adaugi conținut personalizat chiar azi.