Con i plugin giusti e le giuste configurazioni, puoi inserire un modulo di Contattaci all’interno di un popup WordPress. Ecco nel dettaglio come procedere
Ti ho già mostrato come puoi iniziare a configurare un popup WordPress per contenere un modulo di contatto e mostrarlo così ai tuoi internauti quando cliccano su un determinato link presente in una pagina o in un menu.
Ti avevo lasciato suggerendoti di usare dei codici HTML e CSS per personalizzare il popup e promettendoti che alcuni codici te li avrei suggeriti direttamente io, in modo da ottenere un popup di contatto WordPress simile a quello che vedi qui sotto:
Per ottenere il risultato mostrato nell’immagine, non devi fare altro che ripartire dal Design Customizer di OptinMonster e cliccare sulla voce HTML per espanderla. Qui, puoi incollare il seguente codice:
<h3>Hai qualche domanda per noi?</h3>
<p>Vuoi avere maggiori informazioni sui nostril servizi? Compila il modulo sottostante e ti risponderemo il prima possibile. In alternativa, puoi anche contattarci telefonicamente, al numero 02.12345678.</p>
[gravityform id=”4″ name=”CanvasPopupForm” title=”false” description=”false”]
Come puoi notare, ho inserito nel codice HTML il riferimento breve al form di contatto che ho creato in precedenza con Gravity Forms e se usi un altro plugin devi qui integrare il tuo shortcode fornito al momento della progettazione del tuo form di contatto personalizzato.
A questo punto, clicca sulla voce CSS e copia il seguente codice:
html div#om-lku3gv5wny-canvas #om-canvas-whiteboard-theme-optin-wrap {
background:#fff;
border:10px solid #F5F5F5;
color:111;
}
html div#om-lku3gv5wny-canvas .gfield {
list-style:none;
}
html div#om-lku3gv5wny-canvas input[type=text]{
width:420px;
}
html div#om-lku3gv5wny-canvas input[type=submit] {
background:#ff6600;
color:#FFFFFF;
padding:5px;
width:420px;
margin-left:40px;
}
html div#om-lku3gv5wny-canvas textarea {
height:80px;
width:420px;
}
Come puoi notare, ogni regola CSS deve essere sempre preceduta dalla dichiarazione suggerita come prefisso da OptinMonster nell’area dedicata.
Una volta terminata la configurazione, clicca sul pulsante Save presente in alto e fai clic sul pulsante Close per uscire.
Per procedere, clicca su Manage Output Settings e tutto quello che devi fare qui è inserire un segno di spunta sull’opzione Enable optin on site?
Salva le tue impostazioni e procedi con la configurazione del link da cui si accederà al popup di contatto.
WordPress popup per il modulo di contatto: ecco il link
Aprire un popup direttamente da un link non è complicato, soprattutto perché viene in tuo aiuto la funzionalità MonsterLink integrata in OptinMonster. Ogni popup, infatti, ha un ID univoco che lo identifica. Puoi individuare questo ID, andando nella schermata di OptinMonster e cliccando sulla ruota dentata presente al riepilogo degli Optins creati.
Una volta scoperto l’ID, il tuo link avrà il seguente formato:
<a href=”#” class=”manual-optin-trigger” data-optin-slug=”lku3gv5wny-canvas”>Contattaci!</a>
Questo link puoi usarlo ovunque ne hai necessità, in una pagina, in un articolo, nel menu di WordPress, insomma ovunque vuoi che l’utente veda il popup cliccandoci sopra.
