Com afegir contingut HTML personalitzat als formularis de WordPress

Els formularis no són només camps d'entrada. De vegades cal explicar alguna cosa, dividir seccions, mostrar una imatge o afegir context entre preguntes. El contingut HTML personalitzat transforma els formularis estàtics en experiències guiades. A continuació s'explica com afegir contingut enriquit als formularis de WordPress.

Què és el bloc HTML?

definició

El bloc HTML és un element especial de formulari que mostra contingut sense recopilar dades d'entrada. Renderitza HTML entre els camps del formulari, cosa que permet afegir text, imatges, vídeos, divisors i molt més.

Bloc HTML vs. Camps normals

Per què utilitzar blocs HTML?

1. Instruccions i orientació

Ajudar els usuaris a entendre què han de fer:

• Explicar preguntes complexes
• Proporcionar context
• Requisits de la llista
• Guia per les seccions

2. Organització visual

Divideix els formularis llargs:

• Encapçalaments de secció
• Divisors horitzontals
• Separadors visuals
• Contingut agrupat

3. Multimèdia enriquit

Afegir elements visuals:

• Imatges i icones
• Vídeos incrustats
• infografia
• Diagrames

4. Legal i Compliance

Mostra informació important:

• Text dels termes i condicions
• Avisos de privadesa
• Avís legal
• Divulgacions obligatòries

5. Branding

Reforça la teva marca:

• logos
• Colors de marca
• Estil personalitzat
• Aspecte coherent

Afegir un bloc HTML

Pas 1: Afegir el camp

1. Obre el formulari a FIG
2. Cercar Bloc HTML a la llista de camps
3. Arrossegueu-lo a la posició desitjada del formulari

Pas 2: afegiu el vostre contingut

1. Feu clic al bloc HTML per seleccionar-lo
2. Obre el tauler de configuració
3. Introduïu el vostre contingut HTML
4. Previsualitza per verificar l'aspecte

Pas 3: Posició i estil

1. Arrossega per reordenar si cal
2. Afegir estils o classes en línia
3. Prova al frontend

Usos comuns dels blocs HTML

1. Encapçalaments de secció

Informació personal Si us plau, proporcioneu les vostres dades de contacte a continuació.

Resultat:

Informació Personal
Si us plau, proporcioneu les vostres dades de contacte a continuació.

2. Divisor horitzontal

Resultat: Una línia neta que separa les seccions.

3. Caixa d'instruccions

 Important: Si us plau, tingueu a punt el número de comanda abans de continuar.

4. Instruccions amb vinyetes

Abans d'enviar-ho, assegureu-vos que: Tots els camps obligatoris estan completats La teva adreça electrònica és correcta Has revisat els termes següents

5. Imatge

6. Vídeo incrustat

7. Quadre d'advertència/alerta

 ⚠️ Avís: Els treballs no es poden editar un cop enviats.

8. Èxit/Quadre d'informació

 ✓ El vostre progrés es desa automàticament.

9. Avís de privadesa

La vostra informació està protegida per la nostra Política de privacitat . Mai compartirem les vostres dades amb tercers.

10. Resum dels termes i condicions

 Condicions del servei En enviar aquest formulari, vostè accepta...

Exemples de disseny de formularis

Formulari de diverses seccions

[Bloc HTML: Secció 1 - Encapçalament d'informació personal] Camp de nom Camp de correu electrònic Camp de telèfon [Bloc HTML: Divisor] [Bloc HTML: Secció 2 - Encapçalament de detalls del projecte] Menú desplegable del tipus de projecte Àrea de text de descripció Camp de pressupost [Bloc HTML: Divisor] [Bloc HTML: Secció 3 - Encapçalament de passos finals] Casella de selecció Condicions de càrrega de fitxers Botó Envia

Formulari instructiu

[Bloc HTML: Missatge de benvinguda i instruccions] [Bloc HTML: Indicador del pas 1] Pregunta 1 Pregunta 2 [Bloc HTML: Indicador del pas 2] Pregunta 3 Pregunta 4 [Bloc HTML: Recordatori de revisió] Botó Envia

Formulari de sol · licitud

[Bloc HTML: Logotip de l'empresa] [Bloc HTML: Títol i descripció del càrrec] Camp de nom Camp de correu electrònic [Bloc HTML: Instrucció "Puja el teu currículum" amb requisits de format] Camp de càrrega de fitxers [Bloc HTML: Declaració d'igualtat d'oportunitats] Botó Envia

Estilització de blocs HTML

Estils en línia

Afegiu estils directament als elements:

El vostre contingut amb estil aquí.

Propietats d'estil comunes

Fons: fons: #f5f5f5; Farciment: farciment: 15px; Marge: margin: 20px 0; Vora: vora: 1px sòlid #ddd; Radi de la vora: radi de la vora: 5px; Mida de la font: size de la font: 14px; Color: color: #333; Alineació del text: alignment del text: centre;

Creació de quadres amb estil

Quadre d'informació (blau):

 ℹ️ Missatge informatiu aquí

Caixa d'èxit (verda):

✓ Missatge d'èxit aquí

Quadre d'advertència (groc):

⚠️ Missatge d'advertència aquí

Quadre d'error (vermell):

 ✕ Error o alerta important aquí

Consells de disseny responsiu

imatges

Utilitzeu sempre max-width per a imatges responsives:

Vídeos

Utilitzeu un contenidor responsiu per a vídeos incrustats:

Llegibilitat del text

• Utilitza mides de lletra relatives (em, rem)
• Mantenir la longitud de les línies llegible
• Encoixinat adequat al mòbil

Millors Pràctiques

1. Mantingueu-lo concís

• Text curt i escanejable
• Vinyetes sobre paràgrafs
• Només informació essencial

2. Jerarquia visual

• Esborra els encapçalaments
• Estil coherent
• Flux lògic

3. Accessibilitat

• Text alternatiu per a imatges
• Contrast de color suficient
• HTML semàntic (h2, h3, p, ul)
• No et basis només en el color per al significat

4. No us excedeixis

• Massa contingut aclapara
• Equilibra el contingut amb els camps d'entrada
• Propòsit de cada bloc HTML

5. Prova a fons

• Previsualització a l'ordinador i al mòbil
• Comprova que tots els enllaços funcionen
• Verifica la càrrega de les imatges
• Prova en diferents navegadors

Idees avançades de blocs HTML

Indicador de progrés

1  2  3 Pas 2 de 3: Detalls del projecte

Disseny de dues columnes

Opció A Descripció de l'opció A... Opció B Descripció de l'opció B...

Secció plegable (detalls/resum)

Feu clic per llegir les condicions completes Text complet dels termes i condicions aquí...

Llista d'icones

✓ Enviament gratuït per a comandes superiors a 50 $ ✓ Garantia de devolució de 30 dies ✓ Atenció al client 24 hores al dia, 7 dies a la setmana

Compte enrere/Urgència

 🔥 Oferta per temps limitat: envia-la abans de divendres per optar-hi!

Consideracions de seguretat

Què és segur

• Etiquetes HTML estàndard (p, div, h1-h6, ul, li, etc.)
• Estils en línia
• Imatges de fonts fiables
• Vídeos incrustats de les principals plataformes

Què evitar

• JavaScript en blocs HTML (es pot eliminar)
• Scripts externs
• Fonts d'iframe no fiables
• Elements de formulari dins de blocs HTML

Nota sobre les restriccions de script

La majoria de creadors de formularis sanegen l'HTML per evitar atacs XSS. El JavaScript i certes etiquetes es poden eliminar automàticament per seguretat.

Solució de problemes

L'HTML no es renderitza

• Comprovar si hi ha errors de sintaxi
• Verificar que les etiquetes estiguin correctament tancades
• Algunes etiquetes poden estar restringides

Estil no aplicat

• Comprova la sintaxi de l'estil en línia
• El CSS del tema pot anul·lar-lo
• Utilitzeu estils més específics o !important

No es mostren les imatges

• Verifica que l'URL de la imatge sigui correcta
• Comprova els permisos de la imatge
• Utilitza l'URL completa (https://…)

Trencament de disseny al mòbil

• Afegeix l'amplada màxima: 100% a les imatges
• Utilitza dissenys flexibles (flexbox)
• Prova en un dispositiu mòbil real

resum

Afegir contingut HTML personalitzat als formularis:

1. Afegeix un bloc HTML – Arrossega al teu formulari
2. Introdueix contingut – HTML al tauler de configuració
3. Posicionar-se adequadament – Entre camps rellevants
4. Estil segons calgui – Estils o classes en línia
5. Mantenir accessible – Text alternatiu, contrast, HTML semàntic
6. Prova amb resposta – Ordinador i mòbil

Conclusió

Els blocs HTML transformen els formularis de qüestionaris simples en experiències guiades. Afegiu context on els usuaris el necessitin, organitzeu formularis llargs en seccions lògiques i incloeu contingut multimèdia enriquit per interactuar i informar. Tant si es tracta d'un encapçalament de secció, un quadre d'instruccions o un vídeo incrustat, el contingut HTML personalitzat fa que els vostres formularis siguin més eficaços i fàcils d'utilitzar.

Creador de formularis automàtic inclou el tipus de camp Bloc HTML, que us permet afegir qualsevol contingut HTML entre els camps del formulari. Creeu formularis professionals i informatius que guiïn els usuaris durant el procés d'enviament.

A punt per millorar els teus formularis? Descarrega el creador de formularis automàtic i comença a afegir contingut personalitzat avui mateix.