Come creare un modulo di contatto su Click con Divi

In questo tutorial Divi, ti mostreremo come creare un modulo di contatto che appare dopo aver fatto clic su un pulsante (come sovrapposizione) utilizzando nient'altro che Divi, del codice jQuery e del codice CSS.

Questo è un ottimo modo per mantenere i visitatori del tuo sito concentrati sull'azione a cui si sono impegnati facendo clic su un pulsante. Non li porta a una pagina diversa, ma li blocca in quell'azione fino al termine.

Di seguito puoi dare una rapida occhiata a ciò che creeremo e poi passare al tutorial!

Risultato sul desktop

Risultato su telefono e tablet

Ispirazione

L'ispirazione per questo post nasce da una richiesta di commento e si trova su B3multimedia. Sebbene utilizzino un altro metodo per farlo funzionare, hanno anche un modo straordinario per creare un modulo di contatto al clic. Dai un'occhiata al risultato:

Crea sezione con modulo pulsante

In genere mostriamo come fare quasi tutto nel visual builder frontend di Divi. Nel post di oggi, tuttavia, utilizzerò il generatore di backend. A causa del codice che stiamo usando è un po' più semplice. Detto questo, se ami l'editor frontend tanto quanto noi, puoi completare facilmente questo tutorial usando la vista "scheletro" del frontend.

Ok, entriamo in questo tutorial!

Iscriviti al nostro canale Youtube

La prima cosa che dovremo fare è aggiungere una nuova sezione in cui posizioniamo il pulsante che consentirà la comparsa del modulo di contatto. Basta aggiungere una sezione standard e selezionare una riga a una colonna. Dopo averlo fatto, aggiungi un modulo pulsante.

Puoi dare uno stile al pulsante come preferisci, ma devi assicurarti che l'URL del pulsante inizi con '#' seguito da qualcos'altro. Non puoi semplicemente lasciarlo vuoto o utilizzare solo il carattere '#'. Aggiungendo '#' e del testo, la pagina non si sposterà dopo aver fatto clic sul pulsante. Se lo lasci vuoto, la pagina si aggiornerà al clic. E se usi solo '#', verrai indirizzato all'inizio della pagina.

La prossima cosa importante da fare è assegnare una classe CSS al pulsante. Utilizzeremo questa classe CSS più avanti in questo post nel codice jQuery per assicurarci che il modulo di contatto venga visualizzato dopo aver fatto clic. La classe che dovremo assegnare al pulsante è semplicemente "pulsante".

Crea modulo di contatto desktop con un clic

La prossima cosa che dovremo fare è creare il modulo di contatto desktop che apparirà quando qualcuno fa clic sul pulsante che abbiamo creato nella parte precedente di questo post. Più avanti in questo post, ti mostreremo anche come creare la versione mobile.

Puoi praticamente creare qualsiasi disegno che desideri all'interno di una riga e farlo apparire come un popup se usi questo metodo. Ti daremo solo un assaggio di ciò che puoi ottenere mostrandoti come creare il seguente esempio:

Aggiungi nuova sezione standard

Inizia aggiungendo una nuova sezione standard alla pagina su cui stai lavorando. Vai alla scheda Avanzate della sezione che hai appena aggiunto e aggiungi "popup" al campo Classe CSS. Scorri verso il basso la stessa scheda e inserisci le seguenti righe di codice CSS nel campo Prima della sottocategoria CSS personalizzato:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Aggiungendo questo, ci assicuriamo che la sezione occupi l'intera scheda. Puoi regolare il colore di sfondo nel codice CSS per creare l'overlay di sfondo che desideri. In questo caso, stiamo usando il colore nero con un po' di trasparenza. All'interno della stessa scheda, aggiungi anche la seguente riga di codice CSS all'elemento principale:

display: none;

L'ultima cosa che dovremo fare nella scheda Avanzate è disabilitare la sezione su telefono e tablet nella sottocategoria Visibilità.

Aggiungi riga a due colonne

Continua aggiungendo una riga a due colonne e vai alla scheda Progettazione. Inizia modificando la larghezza della riga nella sottocategoria Ridimensionamento. In questo esempio, abbiamo utilizzato una larghezza personalizzata di 1291 px.

Scorri verso il basso la scheda Progettazione e usa "30px" per il riempimento superiore, sinistro e destro di entrambe le colonne all'interno della sottocategoria Spaziatura.

Termina andando alla scheda Avanzate. All'interno dell'elemento principale, aggiungi le seguenti righe di codice CSS:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Aggiungi il primo modulo di testo

Dopo aver apportato tutte le modifiche alla sezione e alla riga, è il momento di aggiungere i diversi moduli che si desidera visualizzare. La prima cosa che aggiungeremo è il titolo che compare. Inizia aggiungendo un nuovo modulo di testo alla prima colonna della riga, scrivendo il testo all'interno della scheda Contenuto e passando alla scheda Design. All'interno della scheda Progettazione, abbiamo utilizzato le seguenti impostazioni per la sottocategoria Testo:

• Orientamento del testo: al centro
• Carattere del testo: Aragosta
• Stile carattere: grassetto
• Dimensione carattere del testo: 37
• Colore del testo: #002282
• Altezza riga di testo: 1,7 em

Aggiungi il secondo modulo di testo

Continua aggiungendo un nuovo modulo di testo e digita il testo che desideri visualizzare nella scheda Contenuto. Passa alla scheda Progettazione e applica le seguenti impostazioni alla sottocategoria Testo:

• Orientamento del testo: al centro
• Carattere del testo: Arial
• Dimensione carattere del testo: 13
• Colore del testo: #002282
• Altezza riga di testo: 1,7 em

Aggiungi il modulo Segui sui social media

Andando avanti, aggiungeremo anche il modulo Follow sui social media alla prima colonna. In questo caso abbiamo scelto tre icone social; Facebook, Twitter e Instagram. Dopo aver aggiunto queste icone social nella scheda Contenuto, cambia la forma del collegamento in "Cerchio" nella sottocategoria Icona.

L'ultima cosa che dobbiamo fare è aggiungere un'imbottitura sinistra a questo modulo nella scheda Avanzate. Aggiungi la seguente riga di codice CSS all'elemento principale:

padding-left: 40%;

Aggiungi modulo modulo di contatto

Quindi, possiamo passare alla seconda colonna della riga. In quella colonna, la prima cosa che collocheremo è il Modulo di contatto. Per questo esempio, abbiamo scelto solo due campi; il nome e l'e-mail. Dopo aver aggiunto il modulo modulo di contatto, vai alla scheda Progettazione del modulo modulo di contatto e apporta le seguenti modifiche alla sottocategoria Testo campo modulo:

• Dimensione carattere campo modulo: 15
• Colore testo campo modulo: #002282
• Altezza della linea del campo modulo: 1,7 em

All'interno della stessa scheda, applica le seguenti modifiche alla sottocategoria Button:

• Usa stile personalizzato per pulsante: Sì
• Dimensione del testo del pulsante: 20
• Colore del testo del pulsante: #FFFFFF
• Colore di sfondo del pulsante: #0086c4
• Larghezza bordo pulsante: 2
• Raggio del pulsante: 3

Passa alla scheda Avanzate e aggiungi un'imbottitura superiore del 5%.

Aggiungi modulo Blurb

Un'altra cosa che dovremo aggiungere alla seconda colonna è un modulo Blurb. L'unica cosa per cui abbiamo bisogno di questo modulo è l'icona di uscita nella parte superiore destra del popup. Scegli la seguente icona nell'elenco delle icone e lascia tutte le altre cose vuote.

Andando avanti, vai alla scheda Avanzate e digita "chiudi" come classe CSS. All'interno della stessa scheda, aggiungi le seguenti righe di codice all'elemento principale della sottocategoria CSS personalizzato:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Applica sfondo sfumato alla riga

Ultimo ma non meno importante, aggiungeremo uno sfondo sfumato di bell'aspetto alla riga. Apri le impostazioni e applica le seguenti modifiche all'opzione Sfondo sfumato:

• Colore del primo gradiente: #FFFFFF
• Colore secondo gradiente: # 0c71c3
• Tipo di gradiente: lineare
• Direzione gradiente: 124 gradi
• Posizione di partenza: 50%
• Posizione finale: 50%

Crea un modulo di contatto per tablet e telefono con un clic

Ora che abbiamo creato la versione desktop, la versione per tablet e telefono andrà molto più veloce. La maggior parte dei moduli che abbiamo utilizzato per la versione desktop sono gli stessi per la versione mobile. Il risultato finale sui dispositivi mobili è simile a questo:

Aggiungi nuova sezione standard

Inizia aggiungendo un'altra sezione standard. Questa sezione dovrà avere le stesse impostazioni della sezione che abbiamo creato prima. Aggiungi 'popup' alla classe CSS e aggiungi le seguenti righe di codice CSS al campo Prima:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Aggiungi anche la seguente riga di codice CSS all'elemento principale:

display: none;

Invece di disabilitarlo per telefono e tablet, come abbiamo fatto per la versione desktop, lo disabiliteremo sul desktop nella sottocategoria Visibilità:

Aggiungi riga a una colonna

Per il popup del telefono e del tablet, avremo solo bisogno di una colonna. Per questa riga, non utilizzeremo la larghezza personalizzata. Tuttavia, applicheremo il riempimento personalizzato come abbiamo fatto per la versione desktop; 30px per il riempimento superiore, sinistro e destro della colonna.

Dovremo anche assicurarci che le seguenti righe di codice CSS vengano aggiunte all'elemento principale nella sottocategoria CSS personalizzato:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Clona il modulo di testo, social media e modulo di contatto

La prossima cosa che dovremo fare è clonare il primo modulo di testo che abbiamo usato per la versione desktop insieme al modulo Segui social media e modulo di contatto. Dopo averli clonati, posizionali nella riga di una colonna della nuova sezione che hai appena creato.

Clona modulo Blurb e cambia codice CSS nella scheda Avanzate

Puoi anche clonare il modulo Blurb che è stato utilizzato per la versione desktop, ma è necessaria una piccola modifica nel codice CSS. Invece di usare il codice per desktop, usa invece quanto segue:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Assicurati che la classe CSS "close" sia utilizzata anche per il modulo Blurb.

Applica sfondo sfumato alla riga

Per la versione mobile, utilizziamo impostazioni diverse per lo sfondo sfumato della riga:

• Colore del primo gradiente: #FFFFFF
• Colore secondo gradiente: # 0c71c3
• Tipo di gradiente: lineare
• Direzione del gradiente: 180 gradi
• Posizione di partenza: 40%
• Posizione finale: 40%

Aggiungi codice jQuery alle opzioni del tema

L'ultima cosa che dovremo fare per questo tutorial è aggiungere il codice jQuery. Puoi aggiungere il codice tramite le Opzioni del tema o tramite un Modulo di codice che inserisci nella pagina su cui stai lavorando. Per questo esempio, lo inseriremo semplicemente nelle Opzioni del tema.

Per farlo, vai sul dashboard di WordPress > Divi > Opzioni del tema > Integrazione > E incolla le seguenti righe di codice jQuery all'interno del tuo sito web:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Risultato

Se segui il post, passo dopo passo, dovresti essere in grado di ottenere il seguente risultato sul desktop:

E il seguente risultato su tablet e telefoni:

Pensieri finali

In questo post, ti abbiamo mostrato come creare un modulo di contatto al clic. L'utilizzo di questo metodo per entrare in contatto con i tuoi visitatori è sottile ma efficace. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto.

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di La1n / shutterstock.com