Come aggiungere contenuti HTML personalizzati nei moduli di WordPress

I moduli non sono solo campi di input. A volte è necessario spiegare qualcosa, dividere sezioni, mostrare un'immagine o aggiungere contesto tra le domande. Il contenuto HTML personalizzato trasforma i moduli statici in esperienze guidate. Ecco come aggiungere contenuti avanzati ai tuoi moduli WordPress.

Che cos'è il blocco HTML?

Definizione

Il blocco HTML è uno speciale elemento del modulo che visualizza i contenuti senza raccogliere input. Esegue il rendering del codice HTML tra i campi del modulo, consentendo di aggiungere testo, immagini, video, divisori e altro ancora.

Blocco HTML vs Campi regolari

Perché utilizzare i blocchi HTML?

1. Istruzioni e guida

Aiuta gli utenti a capire cosa fare:

• Spiega le domande complesse
• Fornisci contesto
• Elencare i requisiti
• Guida attraverso le sezioni

2. Organizzazione visiva

Suddividere le forme lunghe:

• Intestazioni delle sezioni
• Divisori orizzontali
• Separatori visivi
• Contenuto raggruppato

3. Ricchi contenuti multimediali

Aggiungi elementi visivi:

• Immagini e icone
• Video incorporati
• Infografica
• diagrammi

4. Legale e conformità

Visualizza informazioni importanti:

• Testo dei termini e delle condizioni
• Avvisi sulla privacy
• Avvertenze
• Divulgazioni obbligatorie

5. il branding

Rafforza il tuo marchio:

• Loghi
• Colori di marca
• Stile personalizzato
• Aspetto coerente

Aggiungere un blocco HTML

Passaggio 1: aggiungere il campo

1. Apri il tuo modulo in AFB
2. Trovate Blocco HTML nell'elenco dei campi
3. Trascinalo nella posizione desiderata nel tuo modulo

Passaggio 2: aggiungi i tuoi contenuti

1. Fare clic sul blocco HTML per selezionarlo
2. Apri il pannello delle impostazioni
3. Inserisci il tuo contenuto HTML
4. Anteprima per verificare l'aspetto

Fase 3: Posizione e stile

1. Trascina per riordinare se necessario
2. Aggiungere stili o classi in linea
3. Test sul frontend

Usi comuni dei blocchi HTML

1. Titoli delle sezioni

Informazioni personali Inserisci qui sotto i tuoi dati di contatto.

Risultato:

Informazioni personali
Inserisci qui sotto i tuoi dati di contatto.

2. Divisore orizzontale

Risultato: Una linea netta che separa le sezioni.

3. Scatola delle istruzioni

Importante: tieni a portata di mano il numero dell'ordine prima di procedere.

4. Istruzioni puntate

Prima di inviare, assicurati che: Tutti i campi obbligatori sono compilati Il tuo indirizzo email è corretto Hai esaminato i termini di seguito

5. Immagine

6. Video incorporato

7. Casella di avviso/avviso

⚠️ Attenzione: i contributi non possono essere modificati dopo l'invio.

8. Casella di informazioni/successo

 ✓ I tuoi progressi vengono salvati automaticamente.

9. Informativa sulla privacy

Le tue informazioni sono protette dalla nostra Informativa sulla privacy . Non condivideremo mai i tuoi dati con terze parti.

10. Riepilogo dei termini e delle condizioni

 Termini di servizio Inviando questo modulo, accetti...

Esempi di layout del modulo

Modulo multisezione

[Blocco HTML: Sezione 1 - Intestazione Informazioni personali] Campo Nome Campo Email Campo Telefono [Blocco HTML: Divisore] [Blocco HTML: Sezione 2 - Intestazione Dettagli progetto] Menu a discesa Tipo di progetto Area di testo Descrizione Campo Budget [Blocco HTML: Divisore] [Blocco HTML: Sezione 3 - Intestazione Passaggi finali] Caricamento file Casella di controllo Termini Pulsante Invia

Modulo didattico

[Blocco HTML: Messaggio di benvenuto e istruzioni] [Blocco HTML: Indicatore del passaggio 1] Domanda 1 Domanda 2 [Blocco HTML: Indicatore del passaggio 2] Domanda 3 Domanda 4 [Blocco HTML: Promemoria di revisione] Pulsante Invia

Domanda di Ammissione

[Blocco HTML: Logo aziendale] [Blocco HTML: Titolo e descrizione della posizione] Campo nome Campo email [Blocco HTML: Istruzioni "Carica il tuo curriculum" con requisiti di formato] Campo caricamento file [Blocco HTML: Dichiarazione di pari opportunità] Pulsante Invia

Stile dei blocchi HTML

Stili in linea

Aggiungi stili direttamente agli elementi:

Il tuo contenuto personalizzato qui.

Proprietà di stile comuni

Sfondo: background: #f5f5f5; Imbottitura: padding: 15px; Margine: margin: 20px 0; Bordo: border: 1px solid #ddd; Raggio bordo: border-radius: 5px; Dimensione carattere: font-size: 14px; Colore: color: #333; Allineamento testo: text-align: center;

Creazione di caselle con stile

Riquadro informativo (blu):

 ℹ️ Messaggio informativo qui

Casella del successo (verde):

 ✓ Messaggio di successo qui

Casella di avviso (gialla):

 ⚠️ Messaggio di avviso qui

Casella di errore (rossa):

 ✕ Errore o avviso importante qui

Suggerimenti per il design reattivo

Immagini

Utilizzare sempre max-width per le immagini responsive:

Video

Utilizza un wrapper responsivo per i video incorporati:

Leggibilità del testo

• Utilizzare dimensioni di carattere relative (em, rem)
• Mantenere la lunghezza delle righe leggibile
• Imbottitura adeguata sul cellulare

Best Practices

1. Sii conciso

• Testo breve e scansionabile
• Punti elenco sopra i paragrafi
• Solo informazioni essenziali

2. Gerarchia visiva

• Intestazioni chiare
• Stile coerente
• Flusso logico

3. Accessibilità

• Testo alternativo per le immagini
• Contrasto di colore sufficiente
• HTML semantico (h2, h3, p, ul)
• Non affidarti solo al colore per il significato

4. Non esagerare

• Troppi contenuti sopraffanno
• Bilanciare il contenuto con i campi di input
• Scopo di ogni blocco HTML

5. Testare accuratamente

• Anteprima su desktop e dispositivi mobili
• Controlla che tutti i link funzionino
• Verifica il caricamento delle immagini
• Prova su diversi browser

Idee avanzate per blocchi HTML

Indicatore di progresso

1  2  3 Fase 2 di 3: Dettagli del progetto

Layout a due colonne

Opzione A Descrizione dell'opzione A... Opzione B Descrizione dell'opzione B...

Sezione comprimibile (Dettagli/Riepilogo)

Clicca per leggere i termini completi Il testo completo dei termini e delle condizioni è disponibile qui...

Elenco delle icone

✓ Spedizione gratuita per ordini superiori a $ 50 ✓ Garanzia di rimborso entro 30 giorni ✓ Assistenza clienti 24 ore su 24, 7 giorni su 7

Conto alla rovescia/Urgenza

 🔥 Offerta a tempo limitato: invia la tua candidatura entro venerdì per qualificarti!

Considerazioni sulla sicurezza

Cosa è sicuro

• Tag HTML standard (p, div, h1-h6, ul, li, ecc.)
• Stili in linea
• Immagini da fonti attendibili
• Video incorporati dalle principali piattaforme

Cosa evitare

• JavaScript nei blocchi HTML (potrebbe essere rimosso)
• Script esterni
• Fonti iframe non attendibili
• Elementi del modulo all'interno dei blocchi HTML

Nota sulle restrizioni dello script

La maggior parte dei form builder pulisce l'HTML per prevenire attacchi XSS. JavaScript e alcuni tag potrebbero essere rimossi automaticamente per motivi di sicurezza.

Troubleshooting

HTML non renderizzato

• Controlla gli errori di sintassi
• Verificare che i tag siano chiusi correttamente
• Alcuni tag potrebbero essere limitati

Stile non applicato

• Controlla la sintassi dello stile in linea
• Il CSS del tema potrebbe sovrascrivere
• Utilizzare stili più specifici o !important

Immagini non visualizzate

• Verifica che l'URL dell'immagine sia corretto
• Controllare i permessi delle immagini
• Utilizza l'URL completo (https://…)

Layout non funzionante su dispositivi mobili

• Aggiungi max-width: 100% alle immagini
• Utilizzare layout flessibili (flexbox)
• Test su dispositivo mobile reale

Sintesi

Aggiungere contenuto HTML personalizzato ai moduli:

1. Aggiungi blocco HTML – Trascina sul tuo modulo
2. Inserisci il contenuto – HTML nel pannello delle impostazioni
3. Posizionarsi in modo appropriato – Tra i campi rilevanti
4. Stile a seconda delle necessità – Stili o classi in linea
5. Mantenere accessibile – Testo alternativo, contrasto, HTML semantico
6. Testare in modo reattivo – Desktop e dispositivi mobili

Conclusione

I blocchi HTML trasformano i moduli da semplici questionari a esperienze guidate. Aggiungi contesto dove serve agli utenti, organizza i moduli lunghi in sezioni logiche e includi contenuti multimediali per coinvolgere e informare. Che si tratti di un'intestazione di sezione, di un riquadro di istruzioni o di un video incorporato, i contenuti HTML personalizzati rendono i tuoi moduli più efficaci e intuitivi.

Generatore automatico di moduli Include il tipo di campo Blocco HTML, che consente di aggiungere qualsiasi contenuto HTML tra i campi del modulo. Crea moduli professionali e informativi che guidino gli utenti attraverso il processo di invio.

Pronti a migliorare i vostri moduli? Scarica Auto Form Builder e inizia ad aggiungere contenuti personalizzati oggi stesso.