Migliori contact blocks 2026: 33 sezioni verificate

Un blocco contact è un modulo con l'indirizzo accanto, e raramente è completo. Il catalogo ne conta 33 da 10 registry, misurati il 1 novembre 2026 su /api/blocks/category/contact: dieci publisher diversi sono il dato più importante della tabella.

Cosa non funziona in un modulo di contatto

Il primo difetto si vede subito in produzione: il modulo invia, la pagina mostra un messaggio di successo e l'email non arriva da nessuna parte, perché il blocco è solo l'interfaccia. Il secondo riguarda gli errori: un campo obbligatorio segnalato solo con il bordo rosso non dice a uno screen reader cosa manca, e senza aria-describedby il testo dell'errore non è associato al campo.

Il terzo è la privacy. Un modulo che chiede nome, email e messaggio senza una casella di consenso esplicita, e senza l'informativa collegata, è un problema prima che un difetto di design. Il quarto è l'antispam: nessuno di questi blocchi include un honeypot o un controllo di velocità, e un modulo pubblico senza difese raccoglie bot nel giro di giorni.

Le cinque cose da verificare nel record

• Il numero di file: il blocco da cinque file separa modulo, riquadro informativo e mappa, gli altri sono una sezione unica.
• Se il modulo è un componente isolato, così puoi riusarlo in una pagina diversa senza copiare il layout.
• Se i campi hanno label associata, autocomplete e un messaggio di errore con identificativo.
• Se esiste un'azione di invio dichiarata, o se il pulsante è un type="submit" senza gestore.
• La licenza del publisher, che in questa categoria è la variabile più alta del catalogo.

La mappa merita un discorso a parte. Un iframe incorporato porta cookie di terze parti, pesa sulla velocità della pagina e spesso non ha un titolo accessibile. Se l'indirizzo è già scritto come testo, l'immagine statica della mappa con un collegamento alla mappa vera fa lo stesso lavoro e costa molto meno, sia in byte sia in conformità.

Il limite che resta fuori dal catalogo

Nessuno dei 33 blocchi consegna il messaggio. Non c'è endpoint, non c'è coda, non c'è conferma all'utente che la richiesta sia stata registrata. Il secondo limite è la licenza dichiarata dal publisher, che copre il markup e non l'integrazione con il tuo servizio di posta o con il tuo CRM: quella parte la scegli tu, e la scegli una volta per tutti i moduli del sito.

La regola per scegliere in due minuti

Se il modulo è l'unica conversione della pagina, prendi il blocco da cinque file con il form separato dal riquadro informativo: avrai un componente da testare e da riusare nella pagina assistenza. Se il modulo vive nel footer, la sezione da un file basta e anzi conviene ridurla a due campi. In entrambi i casi il consenso e l'antispam sono tuoi, e vanno messi prima del pulsante, non dopo.

L'alternativa è un servizio di moduli ospitato. Perde il controllo tipografico e guadagna gestione dello spam, notifiche e storico delle richieste senza codice. Il blocco conviene quando il modulo deve somigliare al resto del sito e quando i dati devono restare nel tuo database; non conviene quando l'unica cosa che conta è che il messaggio arrivi.

Resta la conferma. Dopo l'invio il modulo deve dire tre cose: che il messaggio è partito, entro quanto arriverà una risposta e a quale indirizzo replicare. Un blocco che mostra solo la parola grazie lascia l'utente incerto se abbia funzionato. Se il modulo include un campo per l'email, quella stessa email va usata come indirizzo di risposta nella tua notifica: sono due righe di codice e cambiano il tono di tutta la conversazione.

curl "https://ui.eneawork.it/api/blocks/category/contact?limit=10"

Le sezioni sono in /blocks/category/contact, i campi in /components/cat/form e le icone di contatto in /icons. Per la parte tecnica leggi form con react-hook-form e la checklist di accessibilità; il confronto tra copiare il blocco e usare una primitiva headless è in copy-paste o headless.