È possibile inserire un modulo di contatto in un popup con WordPress? La risposta a questa domanda che si sta facendo sempre più insistente fra gli utenti del noto CMS è affermativa. Infatti, è sempre più diffuso l’uso di un popup dedicato al modulo di contatto, che così abbandona la sua pagina dedicata e va a sovrapporsi alla pagina su cui gli internauti hanno individuato la risorsa di interesse e per cui vogliono avere maggiori informazioni.
Costruire un popup per il modulo di contatto non è per nulla difficile, a patto di dotarsi degli strumenti giusti. Oltre a un’installazione funzionante di WordPress, infatti, devi avere OptinMonster con l’add-on per la gestione dei Canvas e un plugin per la configurazione dei moduli di contatto come Gravity Forms.
Una volta che ti sei procurato tutto il necessario, non devi fare altro che seguire i semplici passaggi che ti suggerisco nel prosieguo.
Un WordPress popup per il tuo modulo contatti
Per prima cosa, entra nel backend amministrativo di WordPress e occupati di installare OptinMonster e Gravity Forms seguendo le consuete procedure di setup dei plugin. Una volta terminate le installazioni, clicca sulla voce OptinMonster presente nel menu laterale sinistro di WordPress e clicca sul pulsante Create New Optin.
Nel primo pannello, seleziona la voce Canvas e procedi con un clic sul pulsante Next Step.
Nella nuova schermata che compare, preoccupati di dare un titolo al popup per identificarlo internamente e digita il valore 0 (zero) nel campo Optin Loading Delay.
Il campo Optin Cookie Duration sarà già preimpostato a 7, ma questo valore non va bene per la tue esigenze. Infatti, se lasciassi questo parametro così configurato, un utente che per errore chiude il modulo di contatto potrebbe non vederlo per i sette giorni successivi a meno di non cliccare nuovamente sul link preposto. Per evitare questo malfunzionamento, imposta a 0 (zero) anche l’opzione Optin Cookie Duration.
Una volta terminata la configurazione del popup, devi procedere oltre, cliccando sul pulsante Save and Design Optin.
Nel pannello Design, seleziona il tema Whiteboard Theme e clicca sul pulsante Open Design Customizer.
Compare così una nuova finestra.
Il customizer è diviso in due pannelli, di cui quello di destra ti permette di vedere in anteprima il tuo popup così come è configurato, mentre a sinistra puoi interagire con tutta una serie di caratteristiche del popup, come le dimensioni (Dimensions), il codice HTML, CSS e gli effetti (Effects).
Per prima cosa, devi notare che le dimensioni del popup sono impostate a 700 x 300 px e le puoi modificare a tuo piacimento agendo sul parametro Dimensions. Una volta modificate le dimensioni del popup questo continuerà comunque a risultare bianco nella preview, per cui devi personalizzarlo con il codice HTML e il CSS necessario.
Ad esempio, se vuoi un popup di contatto come quello che ti mostro qui sotto:
puoi usare i codici HTML e CSS che ti suggerirò nel corso del prossimo post dedicato all’argomento.
Alla prossima!
