7 design di moduli di contatto da cui trarre ispirazione

Cercate ispirazioni per il design dei moduli di contatto per il vostro sito web? Con alcune semplici modifiche, potete creare moduli online come volete.

In questo articolo vi mostrerò alcuni esempi di design di moduli di contatto e vi fornirò consigli utili per crearne uno sul vostro sito web.

Crea il tuo modulo di contatto ora! 🙂

Vi mostrerò anche un pratico metodo senza codice per modificare il layout dei vostri moduli. Siete pronti? Tuffiamoci!

7 design di moduli di contatto da rubare

Esaminiamo ora alcuni esempi interessanti e le tattiche chiave che utilizzano per ispirarsi e ricrearli sul vostro sito.

1. WPForms

Ho voluto iniziare con la pagina di contatto di WPForms, poiché ritengo che sia un esempio eccellente per i prodotti SaaS, i siti web di plugin e altre piccole imprese.

La sezione superiore di questa pagina è divisa in due parti: una per i clienti esistenti con domande tecniche e un'altra per le richieste di informazioni prima della vendita.

Leggete anche: Come consentire ai visitatori di duplicare i campi del modulo

Perché penso che questo modulo di contatto si distingua

Il modulo di contatto non è immediatamente visibile e viene visualizzato solo quando si fa clic sul pulsante "Compila un modulo" nella sezione "Ho una domanda di base".

Questa scelta progettuale riduce al minimo le dimensioni della pagina e garantisce che i nuovi clienti utilizzino il modulo principalmente perché è accessibile solo attraverso la sezione di prevendita.

Questa strategia aiuta a indirizzare rapidamente gli utenti verso la sezione appropriata, snellendo il processo sia per l'azienda che per le persone in contatto.

Inoltre, in fondo alla pagina, c'è un link call-to-action (CTA) che invita i visitatori a unirsi al WPForms VIP Circle.

Come creare una pagina di contatto come questa

• Modulo di contatto pop-up: Progettate una pagina di contatto in cui il modulo viene visualizzato solo quando si fa clic su un pulsante specifico. In questo modo si mantiene la pagina ordinata e si enfatizzano gli altri elementi fino a quando non è richiesta l'interazione.
• Base di conoscenza per l'assistenza clienti: Implementate un wiki o una base di conoscenza sul vostro sito WordPress. Questo serve come area di auto-aiuto per i clienti esistenti, affrontando domande e problemi comuni.
• Utilizzo dei modelli: Scegliete tra oltre 2.000 modelli di moduli WordPress per vari scopi, come feedback, marketing e operazioni commerciali. Questi modelli aiutano a creare rapidamente moduli funzionali e dall'aspetto professionale. (provate anche questi modelli WPForms nascosti per situazioni particolari).
• Traduzione dei moduli: Per i siti web che servono un pubblico non anglofono o multilingue, WPForms consente di tradurre facilmente i moduli di contatto per soddisfare le diverse esigenze linguistiche.

Create ora il vostro modulo WordPress

2. Striscia

Ho deciso di concentrarmi sulla pagina di vendita dei contatti di Stripe perché è un ottimo esempio di pagina di contatto specializzata che gestisce in modo efficiente le richieste commerciali.

Per far sembrare il modulo di contatto breve, Stripes utilizza un modulo a più fasi nella sua pagina di contatto, che sicuramente aiuta a ridurre il tasso di abbandono del modulo.

Perché penso che questa pagina di contatto si distingua

Ciò che rende unico questo modulo di contatto è che si concentra sulla raccolta di informazioni rilevanti per il team di vendita di Stripe.

Utilizza un approccio di tipo Multi-Step Form che richiede innanzitutto l'e-mail di lavoro e il paese/regione per acquisire le informazioni.

Una volta cliccato sul pulsante continua, il modulo di contatto di Stripe mira a comprendere bene la vostra azienda e come Stripe può aiutarvi.

Chiedendo informazioni sulle dimensioni dell'azienda, sul fatturato e sulle esigenze di integrazione, è possibile indirizzare la richiesta alla persona più adatta.

Come creare una pagina di contatto come questa

• Addon WPForms Lead Forms: Utilizzate il campo Interruzione di pagina o l' addon Lead Forms per dividere il modulo in sezioni separate.
• Concentratevi sulle informazioni rilevanti: Considerate quali informazioni sui potenziali clienti sarebbero più utili per il vostro team di vendita.
• Mantenere la semplicità: Non sovraccaricate gli utenti con troppi campi del modulo. Chiedete solo le informazioni essenziali che vi servono per qualificare i contatti.
• Etichette e istruzioni chiare: Utilizzare etichette chiare e concise per ogni campo e fornire le istruzioni necessarie per evitare confusione.

Create ora il vostro modulo a più fasi

3. Legalia

Il modulo di contatto sulla pagina "Contatti" di Legalia Corp è un'interfaccia ben studiata, progettata per facilitare la comunicazione tra lo studio e i suoi clienti.

Ciò che risalta di questa pagina è il suo layout a più colonne, con una mappa a sinistra per chiarire la posizione e un modulo di contatto strutturato a destra.

Perché penso che questo modulo di contatto si distingua

L'uso di un layout a più colonne è particolarmente efficace, in quanto divide il modulo in due sezioni diverse.

Ciò consente agli utenti di separare visivamente le informazioni geografiche dai campi di contatto, un approccio interessante.

Ritengo inoltre che l'inclusione di una mappa non solo aiuti a localizzare facilmente lo studio, ma aumenti anche la legittimità e l'accessibilità dell'azienda.

Anche il modulo stesso è piuttosto semplice e richiede le informazioni essenziali senza sovraccaricare l'utente.

Come creare una pagina di contatto come questa

• Pianificare il layout: Iniziate decidendo un layout che bilanci l'interfaccia utente e l'estetica del design. Un layout diviso può essere molto efficace per separare visivamente i diversi tipi di informazioni, pur mantenendole nella stessa pagina.
• Incorporare le mappe: Se la vostra azienda ha una sede fisica, incorporare una mappa nella pagina dei contatti può aumentare notevolmente la fiducia degli utenti e semplificare il processo di ricerca della posizione. Utilizzate strumenti come Google Maps per una facile integrazione.
• Semplificare il modulo: Mantenete i campi del modulo al minimo per non scoraggiare i potenziali contatti. Richiedete solo le informazioni più importanti, come il nome, l'e-mail e una breve casella di messaggio, che ritengo sufficiente.

Aggiungere una mappa al modulo di contatto

4. Giornale dei motori di ricerca

Il modulo di contatto della pagina "Contact Us" di Search Engine Journal si distingue per le sue caratteristiche complete, adatte a diverse esigenze degli utenti.

Questo modulo incorpora funzionalità avanzate come i captcha per la sicurezza, l'opzione di caricamento dei file e la categorizzazione delle richieste.

Leggere anche: come forzare la spaziatura tra i campi.

Perché penso che questo modulo di contatto si distingua

Mi piace molto il modo in cui Search Engine Journal ha introdotto diverse opzioni di categorizzazione in base al tipo di query dell'utente.

Che si tratti di pubblicità, di segnalare un problema tecnico o di altre preoccupazioni, c'è un'opzione per ogni esigenza.

L'inclusione di un CAPTCHA aiuta anche a prevenire l'invio di spam, assicurando che solo le domande autentiche raggiungano il team di SEJ.

Infine, gli utenti possono allegare file alle loro richieste, il che è particolarmente utile per inviare documenti a sostegno dei loro messaggi o richieste.

Come creare una pagina di contatto come questa

• Implementare funzioni di sicurezza: Includere misure di sicurezza come un CAPTCHA con l'aiuto di WPForms per proteggere il sito da spam e abusi, contribuendo a mantenere l'integrità delle comunicazioni.
• Concentrarsi sull'esperienza dell'utente: Progettate il modulo pensando all'utente. Assicuratevi che sia facile da navigare, che i campi siano chiaramente etichettati e che le istruzioni siano chiare per evitare confusione. Utilizzate un campo a discesa per la categorizzazione delle domande degli utenti.
• Aggiungere un campo per il caricamento di file: Se volete dare alle persone che vi contattano la possibilità di allegare dei campi alle loro richieste, potete usare WPForms per aggiungere un campo di caricamento file al vostro modulo, che è abbastanza facile da usare.

Impostare il CAPTCHA sul vostro modulo WordPress

5. Meraviglia

Marvel è una società di progettazione software che utilizza un layout a più colonne per il proprio modulo di contatto con un'immagine sulla destra.

Il design è pulito e moderno, per garantire che gli utenti possano trovare le informazioni di cui hanno bisogno senza problemi.

Perché penso che questo modulo di contatto si distingua

Il design a più colonne è ciò che distingue questo modulo di contatto e gli conferisce una sensazione di pulizia e di respiro.

Permette agli utenti di scansionare rapidamente la pagina e di trovare esattamente ciò di cui hanno bisogno senza dover spulciare un sacco di testo.

L'immagine sul lato destro del modulo non è solo visivamente accattivante, ma anche rilevante per l'attività di Marvel, mostrando il suo impegno nel design.

Come creare una pagina di contatto come questa

• Layout a più colonne: Iniziate decidendo un layout che bilanci l'interfaccia utente e l'estetica del design. Un layout a più colonne può essere molto efficace per separare visivamente diversi tipi di informazioni, pur mantenendole nella stessa pagina.
• Uso strategico delle immagini: Scegliete immagini che riflettano il vostro marchio e che siano in relazione con lo scopo della pagina. L 'aggiunta di un'immagine al modulo di contatto può renderlo più coinvolgente e interattivo.

Aggiungere immagini al modulo di contatto

6. Media

La pagina di contatto di un centro di assistenza come quello di Medium è fondamentale per fornire supporto e indicazioni dirette agli utenti.

Contiene collegamenti diretti agli argomenti di aiuto e alle risposte più popolari. Gli utenti possono facilmente inviare una richiesta se non trovano risposte alle loro domande.

Perché penso che questa pagina di contatto si distingua

La pagina di contatto media include in genere menu a tendina o caselle di controllo che consentono agli utenti di classificare le loro richieste.

Molti centri di assistenza forniscono collegamenti alle domande frequenti o ad articoli correlati prima di consentire l'invio del modulo.

Tuttavia, il principale aspetto negativo della loro pagina è che Medium non utilizza un modulo di contatto. Questo può essere frustrante per gli utenti che hanno bisogno di contattare urgentemente il team di assistenza.

Come creare una pagina di contatto come questa

• Incorporare opzioni di auto-aiuto: Integrate la pagina di contatto con la vostra base di conoscenze. Fornite articoli o link a domande frequenti relative alle selezioni o ai dati inseriti dall'utente, risolvendo potenzialmente la domanda.

7. Frontiera bianca

Volete inserire un modulo sopra un'immagine di sfondo? Cercate un modulo di contatto che utilizzi i CSS? Ho pensato a voi!

White Frontier utilizza un modulo trasparente nella sua pagina dei contatti, in modo che si integri perfettamente con il design dello sfondo.

Quando si testa questo design sul proprio sito, assicurarsi di inserire un'immagine sullo sfondo. Altrimenti, non sarà possibile vedere il modulo.

Come creare una pagina di contatto come questa

Per questo esempio, si può semplicemente copiare il CSS di progettazione del modulo di contatto da qui sotto. Per maggiori dettagli, si può consultare la nostra guida per principianti sullo stile dei moduli con i CSS.

Design del modulo di contatto CSS

/* Fields */
div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
    background-color: transparent; /* Remove background fill */
    text-transform: uppercase; /* Make text all uppercase */
    border-radius: 0; /* Remove corner curve */
    border: 2px solid #fff; /* 2px white border */
    color: #fff; /* White text */
    height: 45px; /* Increase input height */
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fff;
}
/* Button */
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
   text-transform: uppercase;
   padding: 10px 60px;
   color: white;
   background: #444;
   font-weight: normal;
}

Personalizzazione dell'intero sito
La personalizzazione dei moduli a livello di sito è piuttosto semplice una volta che si dispone degli snippet CSS che si desidera utilizzare.
Tutto ciò che dovrete fare è copiare gli snippet CSS che volete utilizzare e incollarli nel vostro sito utilizzando il personalizzatore di temi di WordPress o l'editor di temi.
Un metodo ancora più semplice è quello di utilizzare un plugin come WPCode, che consente di incollare diversi tipi di snippet di codice nel sito.

Potreste anche avere più moduli sul vostro sito web e voler modificare lo stile di uno solo di essi. Vi mostreremo come fare.
Come personalizzare i design dei moduli di contatto
Prima di iniziare, assicuratevi che WPForms sia installato e attivato sul vostro sito WordPress e che abbiate verificato la vostra licenza.
Quindi, creare un nuovo modulo e aggiungerlo a una pagina o a un post. Nell'editor dei blocchi, fare clic sul modulo per aprire ulteriori opzioni di stile per il blocco WPForms.





È possibile modificare il tema del colore, i campi del modulo, le etichette, i pulsanti e gli stili del contenitore e dello sfondo senza scrivere alcun CSS nelle impostazioni del blocco WPForms.


È possibile scegliere un tema di colore predefinito nell'impostazione Temi per modificare lo stile dei campi, delle etichette, dei pulsanti, dei contenitori e degli sfondi del modulo.
Nella sezione Stili di campo si trovano le opzioni per regolare le dimensioni, il bordo, la dimensione del bordo, il raggio del bordo e i colori dei campi del modulo.
Nella sezione Stili di etichetta è possibile modificare le dimensioni e il colore delle etichette del modulo. Le opzioni di dimensione disponibili sono Piccole, Medie e Grandi.
In Stili pulsanti, è possibile modificare la dimensione, il colore, il bordo, la dimensione del bordo, il raggio del bordo e lo stile del bordo dei pulsanti.
Le impostazioni degli Stili contenitore consentono di modificare il colore, l'ombra, il padding, lo stile, la dimensione e il raggio del bordo intorno al contenitore del modulo.
Le impostazioni degli stili di sfondo consentono di controllare l'immagine e il colore di sfondo del modulo per dare al modulo un'impronta di marca.

Una volta stilizzato il modulo di contatto, fare clic sulla scheda Avanzate. Qui è possibile copiare il codice CSS contenente tutti gli stili aggiunti.

Ogni volta che si crea un nuovo modulo, è sufficiente incollare lo snippet di codice e il design del modulo utilizzerà gli stili del modulo precedente.
Allo stesso modo, potete progettare le vostre notifiche e-mail con modelli già pronti, il che è un ottimo modo per aumentare il vostro branding su tutti i canali di comunicazione.
Assicuratevi di aggiungere un logo ben proporzionato alle vostre e-mail (e al vostro sito web) per garantire una perfetta chiarezza e reattività su tutti i dispositivi.
Modella ora il tuo modulo di contatto
Domande frequenti sui design dei moduli di contatto
La progettazione di moduli di contatto è un argomento di grande interesse per i nostri lettori. Ecco le risposte ad alcune domande comuni al riguardo:
È possibile personalizzare WPForms?
Sì, è possibile personalizzare ampiamente WPForms. WPForms consente di creare modelli personalizzati e di modificare gli stili direttamente all'interno dell'editor di blocchi di WordPress.
Questa flessibilità vi permette di adattare i moduli al design del vostro sito web e di soddisfare le vostre esigenze specifiche. Per ulteriori informazioni, consultate questa guida.
Come posso personalizzare il mio modulo di contatto?
Per personalizzare il modulo di contatto in WordPress utilizzando WPForms, iniziate selezionando un modello o creando un modulo da zero.
È possibile aggiungere, rimuovere e riorganizzare i campi secondo le necessità. Utilizzate il costruttore di moduli WPForms per regolare impostazioni come etichette, segnaposto e dimensioni dei campi per un'ulteriore personalizzazione.
Come si costruisce un modulo di contatto in WordPress?
Per creare un modulo di contatto in WordPress, utilizzate WPForms e l'editor di blocchi di WordPress. Con WPForms, è possibile scegliere tra modelli di modulo predefiniti e personalizzabili.
Nell'Editor blocchi, è possibile aggiungere CSS personalizzati direttamente ai blocchi dei moduli per modificare i caratteri, i colori, il padding e altro ancora per adattarli allo stile del sito.
Come cambiare il design dei moduli in WordPress?
Modificate il design del vostro modulo in WordPress utilizzando WPForms. Selezionate il modulo che desiderate modificare, quindi personalizzatene il design all'interno del costruttore di moduli.
Per uno stile dettagliato, utilizzare l'editor di blocchi di WordPress, dove è possibile modificare il tema del modulo, gli stili dei campi, gli stili delle etichette, gli stili dei pulsanti, gli stili di sfondo e altro ancora.
Successivamente, imparare a creare un modello di modulo con marchio
I moduli brandizzati che riflettono i colori, il logo e lo stile del vostro marchio rendono i vostri moduli più personali e professionali, migliorando il coinvolgimento e la fiducia degli utenti.  Consultate questa guida per le istruzioni su come creare un modello di modulo con marchio.
Create ora il vostro modulo WordPress
Siete pronti a creare il vostro modulo? Iniziate oggi stesso con il più semplice plugin per la creazione di moduli per WordPress. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo vi ha aiutato, seguiteci su Facebook e Twitter per altre guide e tutorial gratuiti su WordPress.