6 bellissimi design di moduli di contatto che puoi rubare (esempi CSS)

Cerchi ispirazione per il design di moduli web per il tuo sito web?

Con alcune semplici modifiche, puoi creare moduli online con lo stile che desideri. In questo articolo, ti mostreremo alcuni fantastici esempi di progettazione di moduli di contatto insieme a utili frammenti di codice CSS che puoi utilizzare sul tuo sito web.

Ti mostreremo anche un metodo senza codice davvero utile per modificare il layout dei tuoi moduli. Pronto? Immergiamoci!

Come personalizzare i design dei moduli di contatto

Puoi personalizzare i design dei moduli di contatto utilizzando CSS personalizzati. Alcuni costruttori di moduli WordPress come WPForms offrono anche funzionalità uniche come il campo Layout che ti consente di creare moduli a più colonne.

Se hai un sito WordPress, assicurati di installare WPForms. Una volta fatto, dovrai creare almeno un modulo in modo da poter vedere e testare i frammenti di codice di cui parleremo in questo articolo. Per iniziare a creare un modulo di contatto, consulta il nostro tutorial su come creare un semplice modulo di contatto.

Con WPForms, puoi personalizzare gli stili di tutti i moduli sul tuo sito o puoi modellarli individualmente. Ecco due metodi per farlo:

Metodo 1: personalizzazione a livello di sito

Effettuare personalizzazioni a livello di sito per i tuoi moduli è piuttosto semplice una volta che hai gli snippet CSS che desideri utilizzare.

Tutto quello che devi fare è copiare gli snippet CSS che desideri utilizzare e incollarli nel tuo sito utilizzando il personalizzatore del tema WordPress o l'editor del tema.

Un metodo ancora più semplice è utilizzare un plug-in come WPCode, che ti consente di incollare diversi tipi di frammenti di codice nel tuo sito.

Potresti anche avere più moduli sul tuo sito web e voler cambiare lo stile in uno solo di essi. Ti mostreremo come farlo in seguito.

Metodo 2: stile di un modulo individualmente

Se devi personalizzare un modulo specifico, trova l'ID univoco del modulo e aggiungilo allo snippet CSS per renderlo specifico per quel modulo.

Questo è facile da fare guardando lo shortcode del modulo.

Nell'esempio sopra, l'ID del modulo è "4", quindi nel tuo codice dovrai inserire #wpforms-4.

L'attributo ID è un identificatore univoco generato da WPForms per questo particolare modulo, quindi lo stile non si applicherà altrove.

Ad esempio, puoi semplicemente inserire il seguente frammento di codice all'inizio del primo frammento di codice.

div#wpforms-4 {background-color: transparent; !important}

Per maggiori dettagli, puoi consultare la nostra guida per principianti allo stile dei tuoi moduli con i CSS.

Esempi di progettazione di moduli di contatto

Ora diamo un'occhiata ad alcuni fantastici esempi e al CSS corrispondente per il design del modulo di contatto, in modo che tu possa ricrearli sul tuo sito.

1.Pixpa

L'utilizzo di un semplice modulo di contatto è un'ottima scelta se desideri evitare complicazioni che i tuoi visitatori potrebbero avere durante la compilazione del modulo. Se stai cercando un design semplice per un modulo di contatto, il modulo di contatto di Pixpa è un ottimo esempio.

Usano anche un colore contrastante per il loro invito all'azione che non si fonde con il resto del design del modulo.

Con WPForms, puoi effettuare alcune semplici personalizzazioni sui tuoi moduli anche se non sei un esperto di CSS. Prima di salvare il codice CSS fornito di seguito sul tuo tema, sentiti libero di apportare alcune semplici modifiche ad esso, in modo che si adatti perfettamente al design del tuo sito.

Modulo di contatto Progettazione CSS

/* Fields */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #aaa;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #aaa;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #aaa;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #aaa;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #aaa;
}
/* 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 {
   background-color: #00C5BE;
   border: none;
   color: #fff;
   font-size: 1em;
   padding: 10px 50px;
   text-transform: uppercase;
   font-weight: normal;
}

2. Afobie

Insieme al modulo di contatto, Afobi visualizza il proprio indirizzo e-mail nella pagina dei contatti. Nella pagina è evidenziato il modulo di contatto, suggerendo che il modo migliore per contattarci è compilare il modulo. Hanno anche conferito alla loro forma un aspetto unico creando un pulsante di invio arrotondato.

Se desideri offrire un metodo alternativo per contattarti, potresti voler evidenziare il modulo nella pagina dei contatti.

Puoi anche provare con vari colori per i tuoi campi e assicurarti di utilizzare quello migliore che abbia un bell'aspetto sulla tua pagina. Puoi utilizzare qualcosa come lo strumento Color Theory di Canva o ColourLovers per trovare i colori giusti da utilizzare sul tuo sito.

Modulo di contatto Progettazione CSS

/* Form Background */
.wpforms-form {
background-color: #FFFED1 !important;
}
/* 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: #eee; /* Fill color */
}
/* Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
border-radius: 50px; /* Rounded button edges */
width: 100px; /* Width and height must match */
height: 100px;

3. Senza melone

Melonfree è una società di consulenza web e il design del suo sito web riflette la loro creatività e capacità di progettazione.

Per rendere il loro modulo di contatto unico e accattivante, hanno utilizzato un design con angoli arrotondati per i loro campi e il testo segnaposto è in corsivo.

Questo design è una scelta perfetta per te se vuoi dare un aspetto geek alla tua forma.

Modulo di contatto Progettazione 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 {
   -moz-box-shadow: inset -3px -3px 10px #eee;
   -webkit-box-shadow: inset -3px -3px 10px #eee;
   box-shadow: inset -3px -3px 10px #eee;
   border-radius: 15px;
}
/* Button */
div.wpforms-container-full .wpforms-form button[type=submit] {
   -moz-box-shadow: inset -3px -3px 10px #cc870a;
   -webkit-box-shadow: inset -3px -3px 10px #cc870a;
   box-shadow: inset -3px -3px 10px #cc870a;
   background-color: #f7b31c; /* Fill color */
   color: white; /* Text color */
   border-radius: 15px; /* Rounded button edges */
   font-style: italic; /* Italicize text */
   padding: 10px 30px; /* Distance between text and border */
}

4. Frontiera Bianca

Vuoi posizionare un modulo sopra un'immagine di sfondo?

Quindi potresti voler rendere trasparente il tuo modulo. White Frontier utilizza un modulo trasparente nella sua pagina di contatto, quindi il suo modulo di contatto si fonde perfettamente con il design dello sfondo.

Quando provi questo design sul tuo sito, assicurati di posizionare un'immagine sullo sfondo. Altrimenti, non saresti in grado di vedere il modulo.

Modulo di contatto Progettazione 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;
}

5. Noearaujo

L'attrazione principale della forma di Noearaujo è che invece di usare il testo usano un'icona interessante per il loro pulsante. Puoi facilmente utilizzare un'icona per il tuo pulsante seguendo i passaggi seguenti.

Passaggio 1 : scarica un'icona per il tuo pulsante. Per trovare le icone giuste di tua scelta, puoi utilizzare Flaticon.com

Passaggio 2 : nel codice CSS seguente, assicurati di sostituire l'URL dell'immagine di sfondo dove dice http://example.com/youricon.svg

Passaggio 3 : salva il CSS nel file CSS aggiuntivo del tuo tema.

Progettazione del modulo di contatto CSS

div.wpforms-container-full .wpforms-form button[type=submit] {
   background-image: url(http://example.com/youricon.svg);
   background-repeat: no-repeat;
   background-position: center;
   color: transparent; /* Hide button text */
   padding: 20px 70px;
   background-color: #00f3ff;
}

6. Evoca

Evoke utilizza un design del modulo che ricorda un classico biglietto da lettere. Il design è unico, quindi attira facilmente l'attenzione dei visitatori del sito web. Il carattere sembra di classe e le lettere sembrano scritte con una macchina da scrivere vintage.

Progettazione del modulo di contatto CSS

div.wpforms-container-full .wpforms-form .wpforms-field {
    display: flex; 
    align-items: top; /* Try changing this to center if you like it better! */
}
div.wpforms-container-full .wpforms-form .wpforms-field label {
    min-width: 135px; /* Needs to be set to longest label (to keep inputs in a straight vertical line) */
    padding-right: 20px; /* This ensures a gap between label and input */
}
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 {
    border: none;
    border-bottom: 1px solid #888;
    background: transparent;
}
/* Set background color for entire form */
div.wpforms-container-full {
    background-color: #eee; 
}
/* For title area only */
div.wpforms-container-full .wpforms-form .wpforms-title {
    background-color: orange;
    color: white;
    text-transform: uppercase;
    padding: 10px 20px;
}
/* Wrapper for all fields (not title) -- adding padding to make it line up with title (left) and keep it away from container edge */
div.wpforms-container-full .wpforms-form .wpforms-field-container {
    padding-left: 20px;
    padding-right: 20px
}
div.wpforms-container-full .wpforms-form textarea {
    background-color: #ddd;
    border: none;
}
/* Button */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    padding: 10px 20px 20px 0;
    text-align: right;
}
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: orange;
    color: white;
    padding: 10px 30px;
    letter-spacing: 4px;
    font-weight: normal;
    text-transform: uppercase;
}

Speriamo che questo articolo ti abbia ispirato a creare bellissimi design di moduli di contatto sul tuo sito.

Bonus: metodo senza codice per la progettazione del layout del modulo

Uno dei componenti più importanti degli stili di un modulo è il layout dei moduli.

Come altri aspetti del design, puoi applicare i CSS per modificare i layout dei moduli. Ma WPForms include un modo più semplice.

Con WPForms Pro, puoi utilizzare il campo Layout per aggiungere più colonne al tuo modulo.

Trova semplicemente il campo Layout nella sezione Campi fantasia del generatore di moduli

Trascina e rilascia il campo Layout nel modulo per creare più colonne. Quindi, puoi organizzare i tuoi campi in colonne diverse rilasciandoli in un'area di colonna specifica.

WPForms ti offre 8 diversi preset tra cui scegliere, permettendoti di selezionare un modulo a 2 colonne, 3 colonne o anche a 4 colonne. Fai semplicemente clic sul campo Layout per aprire le opzioni preimpostate sul lato sinistro del generatore di moduli

Come vedrai, sei libero di scegliere diverse quantità di colonne, con ciascuna colonna di larghezza uguale o larghezza variabile. Seleziona il preset che si adatta meglio al tuo design e sei a posto!

Puoi facilmente creare layout semplici o complessi come preferisci senza toccare una singola riga di codice CSS.

Il campo Layout è un punto di svolta quando si tratta di personalizzare i tuoi moduli, in quanto ti consente persino di aggiungere più campi Layout all'interno di un singolo modulo con layout separati.

Abbastanza carino, eh?

Questo conclude la nostra guida alla creazione e alla personalizzazione di bellissimi modelli di modulo!

Successivamente, personalizza gli stili dei pulsanti con i CSS

Se vuoi modificare gli stili dei pulsanti con i CSS, ecco come personalizzare gli stili dei pulsanti con i CSS. Puoi anche migliorare i tassi di conversione dei moduli con la nostra guida alla creazione di moduli in più passaggi in WordPress.

Pronto a creare moduli WordPress potenti e flessibili? Inizia oggi stesso con il miglior plug-in per moduli WordPress.

Crea ora il tuo modulo WordPress

Se ti piace questo articolo, seguici su Facebook e Twitter per altri tutorial WordPress gratuiti.