8 bellissimi esempi di moduli di contatto + come aggiungerli al tuo sito web

Cinque consigli per inchiodare il design del tuo modulo di contatto

Prima di entrare negli esempi di moduli di contatto reali, facciamo una breve deviazione e parliamo di ciò che rende un modulo di contatto eccezionale. Questa deviazione preparerà il terreno mentre discuteremo ciò che ogni esempio di modulo di contatto fa bene nella sezione successiva.

Molto probabilmente hai un modulo di contatto perché vuoi che le persone lo compilino. Quindi come convincere più persone a usarlo? Ecco alcune buone pratiche...

1. Comunica chiaramente a cosa serve il tuo modulo

Se hai un'attività o un sito web molto impegnato, potresti avere più moduli di contatto per usi diversi. Ad esempio, può essere:

• Modulo per richieste di vendita

• Modulo di assistenza clienti

• Modulo d'ordine online

• Modulo di richiesta di richiamata

• Eccetera.

Ci sono due approcci di base per gestirlo e vedrai entrambi negli esempi di moduli di contatto nella vita reale di seguito:

1. Forme separate. Crea moduli separati per ogni caso d'uso e aggiungi del testo che chiarisca esattamente cosa fa ogni modulo.

2. Un campo a discesa. Aggiungi un campo a discesa nella parte superiore del modulo che elenca i diversi casi d'uso e indirizza automaticamente il modulo di contatto al punto giusto.

Ad ogni modo, usa le etichette del modulo e il testo circostante per rendere assolutamente chiaro lo scopo di ogni modulo di contatto ai tuoi visitatori.

2. Limita la lunghezza del modulo per più conversioni (ma non dimenticare la qualità)

A parità di condizioni, i dati sembrano suggerire che moduli di contatto più lunghi significano meno invii.

Ad esempio, HubSpot ha analizzato oltre 40.000 pagine di destinazione e ha notato una chiara correlazione tra i tassi di conversione e il numero di campi del modulo.

Il tasso di conversione di picco è di circa tre campi. Il tasso di conversione scende costantemente fino a otto campi modulo, prima di appiattirsi:

Fonte

In una nota più aneddotica, Marketo ha testato tre forme con risultati simili a HubSpot:

• 5 campi: tasso di conversione del 13,4%

• 7 campi: tasso di conversione del 12,0%

• 9 campi: tasso di conversione del 10,0%

Naturalmente, ottenere semplicemente più invii di moduli di contatto potrebbe non essere il tuo vero obiettivo, quindi non è così semplice come ridurre al minimo il numero di campi sui moduli.

Ad esempio, mentre potresti ottenere più invii riducendo i campi, tali invii potrebbero non essere di alta qualità perché la barriera all'ingresso è così bassa.

Nel complesso, una buona regola empirica è eliminare tutti i campi non necessari , ma non eliminare i campi che raccolgono informazioni importanti solo per abbreviare il modulo, soprattutto se tali informazioni servono a qualificare i lead.

3. Usa la microcopia intelligente per spiegare i campi

Se il tuo modulo di contatto ha più dei soli campi "nome, e-mail, messaggio" standard, corri il rischio di confondere i visitatori.

Ad esempio, se disponi di un campo "budget", potrebbe non essere chiaro a cosa serva tale budget. È per l'intero progetto? È solo per una parte specifica?

Per evitare tale confusione, puoi aggiungere "microcopia" al tuo modulo di contatto.

Microcopy è fondamentalmente un piccolo testo esplicativo che accompagna i campi del modulo per renderli più chiari. Ad esempio, guarda il campo Volume dei pagamenti di seguito (vedrai anche questo esempio in seguito):

4. Sperimenta con formati diversi

Quando la maggior parte delle persone pensa a un modulo di contatto, immagina lo stesso modulo incorporato di base che si vede sulla maggior parte dei siti web. Ma se vuoi rendere più facile per le persone entrare in contatto con te, a volte vale la pena sperimentare diversi metodi di visualizzazione, come un popup o una barra di notifica.

Ad esempio, avere un pulsante di contatto mobile sul lato del tuo sito può essere ottimo per un modulo di contatto di supporto. Rende semplicissimo per gli utenti contattarti non appena hanno riscontrato un problema, senza richiedere loro di cercare la tua pagina di contatto:

5. Racconta alle persone i prossimi passi e stabilisci le aspettative

Il design del tuo modulo di contatto non è finito una volta che le persone hanno premuto Invia!

Per offrire una migliore esperienza utente, devi dire alle persone esattamente cosa accadrà dopo e quanto tempo ci vorrà. Per esempio…

• Rispondete a tutte le richieste o solo ad alcune?

• Quanto tempo impiegherai per rispondere?

• Risponderai via e-mail o con un altro metodo?

Se imposti aspettative chiare, i tuoi visitatori non si chiederanno cosa sta succedendo e se il tuo modulo funziona.

Otto fantastici esempi di moduli di contatto da siti Web reali

Ora che conosci le migliori pratiche, diamo un'occhiata ad alcuni progetti di moduli di contatto del mondo reale per ispirare i tuoi e mostrarti queste migliori pratiche in azione.

1. Striscia

Il modulo di contatto per le vendite di Stripe è un ottimo esempio di come a volte la raccolta di piccole informazioni in più possa far sì che i moduli di contatto generino lead più qualificati (anche se potrebbe abbassare leggermente il tasso di conversione di base).

Oltre ai campi di informazioni standard, Stripe aggiunge un campo Volume dei pagamenti in modo che possano comprendere meglio la potenziale qualità di ciascun lead.

Oltre a ciò, ci sono alcune altre belle scelte di design tra cui:

• Prova sociale : quei loghi sul lato aggiungono la prova sociale mostrando tutte le aziende di successo che utilizzano Stripe.

• Microcopia : il termine "Volume dei pagamenti" potrebbe essere un po' confuso, quindi Stripe aggiunge qualche utile microcopia che spiega come compilare il campo.

• Scopo : Stripe rende super chiaro che questo modulo è solo per richieste di vendita. Questo assicura che le persone non cerchino di usarlo per supporto o altri usi non di vendita.

2. Getsitecontrol

Qui a Getsitecontrol, gestiamo il design del nostro modulo di contatto in modo leggermente diverso.

Piuttosto che creare una pagina "Contattaci" dedicata a cui i visitatori devono accedere, includiamo semplicemente un collegamento Contattaci che apre un popup proprio lì e poi - non è necessario ricaricare la pagina.

Questo è davvero conveniente per le persone perché possono...

• accedi al nostro modulo di contatto da qualsiasi pagina del sito,

• inviare un messaggio senza interrompere qualsiasi altra cosa stessero facendo (come leggere questo post sul blog!).

Il modulo di contatto di Getsitecontrol è semplice e facile da compilare. Inoltre, comunica chiaramente i passaggi successivi dopo che le persone hanno inviato il modulo, insieme a un CTA per controllare il blog di Getsitecontrol.

3. Kinsta

Kinsta ha un'unica pagina "Contattaci" che guida automaticamente gli utenti verso il modulo di contatto corretto senza richiedere loro di ricaricare la pagina.

Kinsta elenca le cinque richieste di contatto più popolari:

1. Prezzi o piani

2. Caratteristiche o informazioni tecniche

3. Richiedi una migrazione o qualsiasi domanda correlata

4. Post dell'ospite, post sponsorizzato o richiesta di backlink

5. Qualunque altra cosa

Quando gli utenti selezionano il loro obiettivo, Kinsta visualizza un modulo di contatto personalizzato o un messaggio.

Ciò consente a Kinsta di raccogliere esattamente le informazioni di cui hanno bisogno, senza appesantire i visitatori con campi estranei.

Ad esempio, nel modulo di contatto Prezzi o piani , Kinsta aggiunge campi extra per capire quanti siti web e visitatori la persona sta cercando di ospitare, ma quei campi non appaiono nel modulo "Nient'altro".

Kinsta pone anche chiare aspettative al vertice: "Ci contatteremo entro un giorno lavorativo".

4. Screening delle scelte

Choice Screening ha un lungo modulo di contatto. A prima vista, potresti pensare che ucciderà i tassi di conversione del modulo. E questo è una specie di vero - Scelta proiezione sarà sicuramente riceverà un numero inferiore di invio di moduli che farebbero con una forma più breve.

Ma parliamo del perché a volte va bene e perché questo è un ottimo esempio di modulo di contatto.

Choice Screening opera in uno spazio business-to-business molto specializzato. Stanno cercando di ottenere lead qualificati che si trasformeranno in clienti di lunga data, non solo invii di moduli di contatto.

Con il suo elenco dettagliato dei servizi e molte caselle di controllo, il modulo eliminerà le persone che non sono ancora sicure di ciò che vogliono e lascerà passare solo lead qualificati che hanno grandi possibilità di trasformarsi in clienti.

Si potrebbe dire che Choice Screening sta selezionando i suoi potenziali clienti con questo modulo di contatto!

5. Joel Klettke / Copywriting business casual

Joel è un copywriter professionista, quindi puoi scommettere che il design e la copia del suo modulo di contatto saranno perfetti.

Il modulo stesso di Joel è semplice, con i campi standard più alcuni campi aggiuntivi per il budget di una persona. Tuttavia, è tutto ciò che accade accanto al modulo che lo rende un ottimo esempio di modulo di contatto.

In quel testo, Joel fa un ottimo lavoro nel definire le aspettative e nel qualificare i suoi lead. Inoltre allontana intenzionalmente i clienti a basso budget discutendo le sue tariffe minime. Mentre Joel potrebbe rimuovere queste menzioni per ottenere un tasso di conversione iniziale più elevato, ciò porterebbe effettivamente a una percentuale inferiore di lead qualificati e finirebbe per far perdere tempo a Joel.

6. Neil Patel

Neil Patel gestisce uno dei siti Web di marketing digitale più popolari al mondo, quindi puoi essere abbastanza sicuro che riceva molti invii di moduli di contatto.

Per aiutare a indirizzare tali invii nel posto giusto, Neil include un menu a discesa "Vorrei parlare di" in cui le persone possono scegliere tra una gamma preimpostata di opzioni. Usa anche alcune microcopie nella casella segnaposto per implorare le persone di mantenere i loro messaggi brevi e al punto.

Questo è semplice, ma a volte semplice è tutto ciò di cui hai bisogno nel design del tuo modulo di contatto.

7. Focus Lab

Ok, questo è divertente, stravagante e sicuramente non funzionerà per tutte le aziende. Ma se ti trovi in ​​uno spazio creativo (come è Focus Lab), creare un design stravagante di moduli di contatto come questo può dimostrare che sei in grado di pensare fuori dagli schemi.

Piuttosto che creare un modulo tradizionale, Focus Lab utilizza più un approccio in stile Mad Libs in cui i visitatori inseriscono le loro informazioni in un paragrafo esistente. Utilizzando questo approccio, Focus Lab è anche in grado di raccogliere più informazioni (come obiettivi e budget) senza l'aspetto imponente che potrebbe avere un design di modulo di contatto più tradizionale.

8. CAMICB

CAMICB, acronimo di Community Association Managers International Certification Board, offre la certificazione per le associazioni comunitarie negli Stati Uniti.

La cosa notevole del modulo di contatto CAMICB è che utilizza un approccio ibrido popup/pagina "Contattaci". Quando gli utenti arrivano alla pagina Contattaci , il sito web di CAMICB apre istantaneamente un semplice modulo di contatto popup in cui i visitatori possono inviare i loro messaggi.

Con solo tre campi, CAMICB mantiene la sua forma breve e al punto. Quindi, l'approccio popup crea una bella interfaccia priva di distrazioni in cui l'attenzione è interamente sul modulo.

Questo rende l'invio di una richiesta il più agevole possibile.

E per rendere le cose ancora più semplici , CAMICB mostra anche un modulo di contatto scorrevole a cui gli utenti possono accedere nel suo piè di pagina:

Come creare il tuo design di modulo di contatto personalizzabile

Dopo aver sfogliato questi otto esempi di moduli di contatto, probabilmente hai un sacco di idee che rimbalzano su come applicare questi principi ai tuoi progetti di moduli di contatto.

Se vuoi iniziare, [Getsitecontrol](/feedback-popup/ può renderti operativo in pochissimo tempo.

A differenza della maggior parte delle soluzioni per moduli di contatto, Getsitecontrol ti consente di scegliere tra quattro posizioni flessibili e decine di modelli per il tuo modulo. Puoi creare un popup tradizionale come quello che hai visto con CAMICB e il sito Web Getsitecontrol. Oppure puoi dare una scossa alle cose con slide-in, barre di notifica, pulsanti e altro.

Sarai in grado di aggiungere tutti i campi (o pochi) necessari per ottenere invii qualificati e puoi anche inserire una microcopia per aiutare i visitatori a compilare il modulo.

Iscriviti oggi a Getsitecontrol e potrai avere un modulo di contatto funzionante in pochi minuti.