Come creare un modulo di contatto in linea con Divi

La sezione eroe (o above the fold) della homepage è il primo immobile. E come la maggior parte degli sviluppatori immobiliari, vuoi massimizzare il tuo spazio. È qui che torna utile un modulo di contatto in linea. Un modulo in linea è fondamentalmente un modulo in cui tutti i suoi campi o controlli rimangono affiancati, in linea e allineati a sinistra. Questo layout compatto è ottimo per aumentare le conversioni su una home page o una pagina di destinazione.

Oggi ti mostrerò come creare un modulo di contatto in linea per il tuo sito Web utilizzando Visual Builder di Divi. Il lavoro necessario per ottenere questo risultato è in realtà tutto relativo alla regolazione sia della larghezza che dell'allineamento dei campi del modulo. Per fare ciò, sfrutteremo le funzionalità di progettazione del modulo di contatto e aggiungeremo alcuni CSS personalizzati nella scheda Avanzate.

Se non conosci Divi, non lasciare che la scheda Avanzate ti impedisca di affrontare questo tutorial. Ho fatto del mio meglio per mantenere le cose semplici e chiare.

Godere.

Ecco un esempio di come sarà il modulo di contatto in linea

Il concetto e l'ispirazione

Se hai mai dovuto acquistare un'assicurazione auto o cercare una nuova casa online, probabilmente hai visto un modulo in linea volutamente compatto con campi di input minimi in modo che tu (l'utente) saresti più incline a far girare la palla su un nuova citazione. Quindi volevo creare un semplice modulo di contatto in linea che facesse qualcosa di simile per gli utenti Divi. Sebbene questo modulo di contatto non sia in grado di fare cose come generare un preventivo o visualizzare un elenco di case, soddisfa le esigenze di imprenditori o blogger che desiderano fornire un modo semplice per i clienti o gli utenti di raggiungere.

Implementazione del design con Divi

Iscriviti al nostro canale Youtube

Iniziamo aggiungendo una sezione regolare con una riga della struttura a colonna singola.

Poiché il resto dei nostri elementi sarà difficile da vedere su uno sfondo bianco, andiamo avanti e aggiungiamo il colore di sfondo alla nostra sezione andando su Impostazioni sezione e aggiornando quanto segue:

Opzioni di contenuto

Colore di sfondo: #006ea5

Salva le impostazioni

Ora possiamo aggiungere il nostro modulo di contatto alla riga.

Aggiorna le impostazioni del modulo di contatto come segue:

Opzioni di contenuto

Invia il testo del pulsante: "Richiedi preventivo"
E-mail: [Inserire l'indirizzo e-mail a cui inviare i messaggi]
Visualizza Captcha: NO
Colore di sfondo del modulo: rgba (255,255,255,0)

Opzioni di progettazione

Carattere del campo modulo: Lato
Dimensione carattere campo modulo: 24 px
Colore testo campo modulo: #ffffff
Raggio del bordo di input: 3px
Usa bordo: S
Colore bordo: #ffffff
Larghezza bordo: 1px
Dimensioni del testo del pulsante: desktop 24 pixel, tablet 20 pixel, smartphone 20 pixel
Colore del testo del pulsante: # 0c71c3
Colore di sfondo del pulsante: #f4f11f
Larghezza bordo pulsante: 3px
Raggio del bordo del pulsante: 3

Salva le impostazioni

Torna alla scheda Contenuto ed elimina il campo del messaggio facendo clic sull'icona del cestino a destra della barra del campo. Quindi aggiungi un nuovo campo facendo clic sul pulsante del cerchio grigio con il segno più bianco situato sotto le singole barre dei campi. Questo sarà il campo Telefono.

Aggiorna le impostazioni del campo come segue:

Opzioni di contenuto

ID campo: "Telefono"
Titolo: Telefono

Opzioni di progettazione

Crea larghezza intera: NO
Simboli consentiti: solo numeri (0-9)

Opzioni avanzate

Inserisci il seguente CSS personalizzato all'interno della casella Elemento principale :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

Salva le impostazioni

Ora torna alla scheda Contenuto delle Impostazioni del modulo di contatto e duplica il campo Telefono appena creato e trasformalo in un campo Codice postale.

Aggiorna le impostazioni del campo come segue:

Opzioni di contenuto

ID campo: "Zip"
Titolo: CAP

Opzioni avanzate

Inserisci il seguente CSS personalizzato all'interno della casella Elemento principale :

Max-width: 17%;
Margin-top: -1.5%;

Salva le impostazioni

Finora abbiamo regolato la larghezza e l'allineamento dei nostri campi Telefono e CAP. Ora dobbiamo fare lo stesso per i campi Nome ed Email.

Vai alle impostazioni del campo Nome e aggiorna le Opzioni avanzate con il seguente CSS personalizzato all'interno della casella Elemento principale :

Max-width: 20%;
Margin-top: -1.5%;

Salva le impostazioni

Quindi vai alle impostazioni del campo Email e aggiorna le Opzioni avanzate con il seguente CSS personalizzato all'interno della casella Elemento principale :

Max-width: 20%;
Margin-top: -1.5%;

Salva le impostazioni

Nota importante: si noti che il CSS personalizzato utilizzato per ciascuno dei campi ha una proprietà di larghezza massima impostata su una determinata percentuale. Questa percentuale determina l'ampiezza dei campi in relazione alla larghezza dell'area del contenuto. Ad esempio, l'area del contenuto predefinita di Divi è 1080px, quindi il campo del nome è il 20% di 1080px. Questo è importante da sapere se vuoi creare più spazio per il tuo modulo in linea. Tutto ciò che devi fare è regolare il valore percentuale per la proprietà di larghezza massima secondo necessità.

Quasi finito. Ora tutto ciò che dobbiamo fare è ripulire la spaziatura della sezione e della riga che contiene il modulo. Vai alle Impostazioni sezione , nella scheda Progettazione e aggiorna quanto segue:

Imbottitura personalizzata: 12px in alto, 14px in basso

Salva le impostazioni

Ora vai alle Impostazioni riga , nella scheda Progettazione e aggiorna quanto segue:

Imbottitura personalizzata: 48px in alto, 0px a destra, 0px in basso, 0px a sinistra

Salva le impostazioni

Renderlo reattivo

Poiché si tratta di un modulo orizzontale, i campi del modulo dovranno essere modificati sui dispositivi mobili. Per risolvere questo problema, tutto ciò che serve è un piccolo frammento di CSS personalizzato. Vai a Impostazioni pagina , nella scheda Avanzate e quanto segue nella casella CSS personalizzato :

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

Ecco come il modulo risponde alle diverse dimensioni dello schermo.

Creazione di un modulo di contatto in linea a tre campi

Ora che hai creato un modulo in linea con quattro campi, puoi facilmente convertirlo in un campo a tre moduli aggiornando alcune opzioni. Ecco i passaggi:

1. Modifica il modulo in linea appena creato o duplica il modulo.
2. Elimina campo CAP (ora hai solo tre campi)
3. Aggiorna le impostazioni del campo del telefono (o qualunque sia il terzo campo), nella scheda Avanzate, con il seguente CSS personalizzato nel

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. Aggiorna le impostazioni del campo email (o qualunque sia il secondo campo), nella scheda Avanzate, con il seguente CSS personalizzato nella casella Elemento principale:

   max-width: 25%;
   margin-top: -1.5%;

5. Aggiorna le impostazioni del campo Nome (o qualunque sia il primo campo), nella scheda Avanzate, con il seguente CSS personalizzato nella casella Elemento principale:

   max-width: 25%;
   margin-top: -1.5%;

Nota: Notare che la proprietà di larghezza massima per ciascuno dei campi è ora del 25% per aumentare la larghezza dei campi.

Creazione di un modulo di contatto in linea a due campi

Puoi anche convertire il modulo in linea in un modulo a due campi aggiornando alcune opzioni. Ecco i passaggi:

1. Modifica il modulo in linea appena creato o duplica il modulo.
2. Elimina il campo CAP e il campo Telefono in modo da avere solo due campi (nome ed email)
3. Aggiorna le impostazioni del campo Nome (o qualunque sia il primo campo), nella scheda Avanzate, con il seguente CSS personalizzato nella casella Elemento principale:

   max-width: 37%;
   margin-top: -1.5%;

4. Aggiorna le impostazioni del campo email (o qualunque sia il secondo campo), nella scheda Avanzate, con il seguente CSS personalizzato nella casella Elemento principale:

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

Aggiunta di altri tipi di campo

Questo tutorial è principalmente per i normali tipi di campo di input, ma puoi facilmente cambiarlo in un tipo di campo diverso. Ad esempio, se desideri utilizzare un tipo di campo a discesa Seleziona, puoi applicare lo stesso stile utilizzato per gli altri campi. Tuttavia, dovrai aggiungere un colore di sfondo (#006ea5) a quel particolare campo in modo da poter vedere le opzioni.

Ecco come sarebbe un campo a discesa...

Pensieri finali

Nella mia esperienza, i moduli di contatto in linea possono essere uno strumento potente per la tua attività. Esistono plug-in più avanzati con opzioni più robuste pronte all'uso, ma se un altro plug-in non fa per te e una soluzione più semplice ha senso, provalo. Spero ti piaccia.

Non vedo l'ora di sentirti nei commenti.