Per molti proprietari di siti web è difficile fornire un facile accesso alle opzioni di contatto senza ingombrare il design del sito. I moduli di contatto fluttuanti offrono una soluzione, consentendo agli utenti di contattare facilmente, indipendentemente dalla posizione in cui si trovano sul sito.
Abbiamo utilizzato questa strategia sui nostri siti web per raccogliere i feedback degli utenti e consentire ai visitatori di contattarci facilmente. Fortunatamente, esistono molti plugin per WordPress che possono aiutarvi a fare lo stesso sul vostro sito.
In questo articolo vi mostreremo come mostrare un modulo di contatto fluttuante in WordPress.
Cos’è un modulo di contatto fluttuante e perché usarlo?
Un modulo di contatto fluttuante rimane sulla schermata, ad esempio nell’angolo inferiore o nel pannello laterale, mentre i visitatori navigano in un sito web. In genere ha l’aspetto di un piccolo pulsante o icona che si espande in un modulo completo quando si fa clic o si passa del mouse.
Ecco alcuni vantaggi dell’utilizzo di un modulo di contatto fluttuante:
- Accessibilità. Poiché il modulo fluttua e rimane fisso, i visitatori del sito possono accedervi da qualsiasi pagina web e in qualsiasi momento.
- Minima intrusione. A differenza dei popup, che possono interrompere l’esperienza dell’utente, i moduli fluttuanti sono in genere meno disturbanti, pur rimanendo evidenti.
- Invito all’azione. La costante presenza di un modulo fluttuante ricorda agli utenti di impegnarsi, contribuendo ad aumentare le conversioni.
Il proprietario di un sito web può utilizzare un modulo di contatto fluttuante per l’assistenza clienti, le richieste di vendita e la raccolta di feedback.
Consentendo ai visitatori di ricevere aiuto istantaneamente mentre navigano sul vostro sito, di porre domande senza lasciare la pagina o di condividere i loro suggerimenti in qualsiasi momento, un modulo di contatto fluttuante può migliorare l’esperienza dell’utente sul vostro sito web.
Con WordPress è possibile visualizzare un modulo di contatto fluttuante in molti modi.
Nelle sezioni seguenti condivideremo tre metodi semplici per mostrare un modulo di contatto fluttuante su un sito web WordPress. Basta utilizzare i link rapidi qui sotto per scegliere il metodo che si desidera utilizzare:
- Method 1: Creating a Floating Contact Form in WordPress Using UserFeedback (Easy)
- Method 2: Creating a Floating Contact Form in WordPress Using WPForms and OptinMonster (Most Customizable)
- Method 3: Creating a Floating Contact Form in WordPress Using a Free Plugin (Free + Easy)
- Alternative: Use a Chatbot on Your Website
Iniziamo!
Metodo 1: Creare un modulo di contatto fluttuante in WordPress utilizzando UserFeedback
Se volete creare un semplice modulo di contatto fluttuante con opzioni personalizzate, questo metodo fa al caso vostro.
UserFeedback è un plugin per WordPress che può aiutarvi a creare moduli di feedback personalizzabili, moduli di contatto fluttuanti e sondaggi a comparsa. Questo plugin è dotato di template e domande integrate, tra cui moduli per l’esperienza sul sito web e per i sondaggi nei negozi di e-commerce.
Noi utilizziamo UserFeedback sui nostri siti web e potete approfondirlo nella nostra recensione completa di UserFeedback.
Usando UserFeedback, potete migliorare il vostro sito web on base agli input degli utenti, aumentare la soddisfazione dei clienti e indirizzare tempestivamente eventuali problemi.
Per prima cosa, è necessario installare e attivare il plugin UserFeedback. Se non sapete come installare un plugin, potete seguire la nostra guida su come installare un plugin di WordPress.
Una volta attivato UserFeedback sul vostro sito web, potete iniziare a creare il vostro primo modulo di sondaggio. Dalla vostra dashboard di WordPress, navigate su UserFeedback ” Sondaggi ” Crea nuovo.
Una volta fatto questo, si accede alla sezione “Configurazione”.
Con UserFeedback, è possibile iniziare da una pagina vuota con l’opzione “Inizia da zero” o utilizzare un template già pronto. In questa guida, utilizzeremo il template “Website Feedback”.
Per scegliere il template, è sufficiente fare clic su di esso.
Note: Sebbene sia disponibile la versione gratuita di UserFeedback, è possibile effettuare l’aggiornamento alla versione premium per sbloccare altri template, accedere a più tipi di domande, abilitare le impostazioni di targeting e comportamento e altro ancora. In questa esercitazione utilizzeremo UserFeedback Pro.
Quindi, modifichiamo il testo. In questo esempio, cambieremo l’etichetta “Feedback sul sito web” in “Avete feedback?”.
Poi, si può fare clic sul menu a discesa ‘Tipo di domanda’ per scegliere come i visitatori possono rispondere a questa domanda. In questo esempio, sceglieremo “Campo di testo singolo”.
Successivamente, è possibile modificare la domanda in “Nome”.
Ora è necessario un altro campo di domanda per l’indirizzo email dell’utente.
Si può scorrere un po’ più giù e fare clic sul pulsante “Aggiungi domanda”. Una volta fatto ciò, procedere con l’impostazione del tipo di domanda e del titolo come nel passaggio precedente.
Il passo successivo è la configurazione delle impostazioni del modulo.
Nella scheda “Impostazioni” è possibile attivare il tracciamento delle visualizzazioni e delle responsive dei moduli utilizzando Google Analytics e MonsterInsights. È sufficiente attivare/disattivare il tracciamento di Google Analytics per utilizzare questa caratteristica.
Se volete approfondire l’utilizzo di Google Analytics per il tracciamento, potete leggere la nostra guida su come impostare gli obiettivi di Google Analytics per il vostro sito WordPress.
Successivamente, è possibile scorrere la scheda verso il basso per configurare il targeting e il comportamento.
Nella sezione “Targeting” è possibile scegliere il tipo di dispositivo e la pagina web che visualizza il modulo d’indagine.
Le opzioni relative al tipo di dispositivo includono desktop, tablet e cellulare. Se si desidera che il modulo venga visualizzato su tutti questi dispositivi, è possibile selezionarli tutti e tre.
Quindi, è possibile scegliere tutte le pagine in cui si desidera visualizzare il modulo fluttuante. Si consiglia di scegliere l’opzione “Tutte le pagine”, in modo che i visitatori possano accedere al modulo in qualsiasi punto del sito web.
Una volta fatto, scorriamo giù e configuriamo il comportamento del modulo. Qui si imposteranno:
- Tempi di visualizzazione. Scegliete quando il modulo apparirà sulle vostre pagine.
- Durata della visualizzazione. Definire la frequenza con cui il modulo verrà mostrato ai visitatori.
- Tempo di esecuzione del sondaggio. Specificare per quanto tempo il modulo apparirà sulle pagine designate.
Ora siete pronti per passare alla fase successiva.
Nella scheda “Notifiche” si inserisce l’indirizzo email che riceverà le notifiche di invio del modulo. È possibile aggiungere più destinatari, ma bisogna assicurarsi di usare una virgola per separarli.
Infine, si consiglia di dedicare un po’ di tempo a verificare il modulo un’ultima volta prima di finalizzarlo.
In alto, nella scheda “Pubblica”, si trova la voce “Riepilogo dei feedback del sito web”. È possibile esaminare i punti elenco uno per uno per verificare se le configurazioni del modulo sono corrette.
Se tutto sembra a posto, si può scendere fino alla sezione “Pubblica”.
È possibile modificare lo stato da “Bozza” a “Pubblica”. In alternativa, è possibile programmare un lancio, cliccando sull’opzione “Programma per dopo” e definendo la data e l’ora.
Una volta fatto, è sufficiente fare clic su “Salva e pubblica” per visualizzare il modulo.
Ed ecco fatto! Avete visualizzato con successo un modulo di contatto fluttuante sul vostro sito web WordPress utilizzando UserFeedback.
Metodo 2: Creare un modulo di contatto fluttuante in WordPress usando WPForms e OptinMonster
Se desiderate un maggiore controllo sul design del vostro modulo di contatto fluttuante, questo è il metodo che fa per voi. Utilizzeremo WPForms per creare il modulo e OptinMonster per renderlo fluttuante sul vostro sito WordPress.
WPForms è un plugin facile da usare, trascina e rilascia per la creazione di moduli per WordPress. Con oltre 2000 template disponibili, è possibile impostare rapidamente un modulo facendo solo pochi clic.
Per saperne di più, potete consultare la nostra recensione completa di WPForms.
Per creare moduli con WPForms, la prima cosa da fare è installare e attivare il plugin sul vostro sito web. Se avete bisogno di ulteriore aiuto, potete leggere la nostra guida su come installare un plugin per WordPress.
Dopo l’attivazione, è possibile navigare su WPForms ” Aggiungi nuovo dalla dashboard di WordPress.
In questo modo si viene reindirizzati all’interfaccia del builder del modulo.
È sufficiente digitare il nome del modulo e selezionare un template. In questo esempio, creiamo un modulo di contatto e chiamiamolo ‘Modulo di contatto’.
Dopo aver dato un nome al modulo, si può scorrere il pannello verso il basso per selezionare un template.
In questo esempio, utilizzeremo l’opzione “Modulo di contatto semplice”. Per iniziare la costruzione, è sufficiente passare del mouse su di essa e fare clic su “Usa template”.
In questo modo si viene reindirizzati al pannello “Campi” del modulo.
Da qui, è possibile rivedere il modulo di contatto e regolare il contenuto preconfezionato. Se tutto sembra già a posto, si può procedere facendo clic sul pulsante “Salva”.
Per istruzioni dettagliate, consultate gratuitamente la nostra guida passo-passo su come creare un modulo di contatto.
Una volta terminata la creazione del modulo, è il momento di regolarne le impostazioni in modo che venga visualizzato come modulo fluttuante.
A tale scopo, dovrete installare OptinMonster e collegare il vostro sito web WordPress al plugin.
OptinMonster è un potente plugin per la generazione di lead e popup. Può aiutarvi a creare e gestire campagne per convertire i visitatori in abbonati e clienti paganti.
Potete verificare la nostra guida dettagliata su come costruire una mailing list con OptinMonster.
Dopo l’attivazione, potete cliccare sulla voce di menu “OptinMonster” dalla vostra dashboard di WordPress.
Verrà quindi visualizzata la schermata di benvenuto, facendo clic su “Connect Your Existing Account” per iniziare a utilizzare il plugin.
Si aprirà una nuova finestra e qui si potrà fare clic su “Connetti a WordPress”.
OptinMonster chiederà quindi i dati del vostro account per completare il processo.
Una volta verificata, siete pronti a creare la vostra prima campagna.
Per iniziare, è sufficiente navigare su OptinMonster ” Campagne dalla vostra Bacheca di WordPress.
Una volta raggiunta la voce “Campagne”, siete pronti per creare e impostare il vostro modulo fluttuante.
Per iniziare, basta fare clic sul pulsante “Crea la tua prima campagna”.
Ora è il momento di selezionare un tipo di campagna.
OptinMonster offre diversi tipi di campagna, tra cui una barra fluttuante. Sebbene possa sembrare il tipo di campagna perfetto, una barra fluttuante ha uno spazio limitato. Quindi, è meglio utilizzarla per altri casi, come l’annuncio di promozioni di vendita o la condivisione di codici coupon.
Se volete approfondire l’uso di una barra fluttuante, vi consigliamo di selezionare la nostra guida sulla creazione di una barra fluttuante in evidenza per il footer in WordPress.
Per mantenere un design ordinato, si può scegliere ‘Scorri’ come tipo di campagna per aggiungere il modulo di contatto di WPForms.
Uno scorrimento fluttuante rimane nell’angolo in basso a destra della schermata dell’utente. Può quindi aiutare a mantenere il contenuto leggibile, il web design organizzato e l’esperienza dell’utente.
È sufficiente fare clic sul tipo di campagna per utilizzarla.
Scorriamo quindi il pannello verso il basso e selezioniamo un template.
Per utilizzare un template, basta fare un passaggio del mouse sul blocco del template e cliccare su “Usa template”. In questo caso, abbiamo scelto “Iscrizione alla newsletter (chiara)”.
Una volta scelto il tipo di campagna e il template, apparirà una finestra pop-up.
È sufficiente dare un nome alla campagna. In questo esempio, chiameremo la nostra campagna “Modulo di contatto fluttuante”.
Dopo aver deciso il nome, si può fare clic su “Inizia a costruire”.
OptinMonster vi reindirizzerà quindi al builder della campagna.
L’interfaccia di creazione della campagna è composta da due sezioni. La parte sinistra contiene tutte le caratteristiche che si possono aggiungere alla campagna, mentre la parte destra è l’anteprima dal vivo.
Per ulteriori informazioni, potete consultare il nostro tutorial su come add-on un modulo di contatto a scorrimento in WordPress.
Per aggiungere il modulo di contatto WPForms, si può scorrere verso il basso il pannello di sinistra per individuare il blocco WPForms.
Una volta trovato, è sufficiente trascina e rilascia il blocco WPForms nell’anteprima dal vivo nel pannello di destra.
A questo punto, verrà visualizzato il menu a discesa “Selezione modulo”. Si può fare clic su di essa e scegliere ‘Modulo di contatto’. Il blocco che appare nell’anteprima dal vivo caricherà lo shortcode del modulo.
Suggerimento degli esperti: Non preoccupatevi se non riuscite a vedere l’anteprima del modulo nel builder della campagna. Il modulo apparirà quando si pubblica la campagna.
Successivamente, si può passare alla scheda “Regole di visualizzazione”. In questa scheda è possibile impostare le tempistiche e le pagine di visualizzazione del modulo di contatto flottante.
Per garantire che il modulo fluttui e rimanga corretto fin dal primo secondo, si consiglia di impostare i primi due menu a discesa come “tempo sulla pagina” e “è immediato”.
Quindi, per visualizzare il modulo su tutte le pagine, si possono impostare i seguenti menu a discesa come “percorso URL corrente” e “qualsiasi pagina”.
Una volta fatto, ci si può dirigere verso la scheda “Pubblica”.
In questa scheda, la prima cosa da fare è modificare lo stato di pubblicazione della campagna in “Pubblica” o “Programma”.
Il passo successivo consiste nell’utilizzare la caratteristica “Live Site Inspector” per testare l’aspetto della campagna sulla vostra pagina web. A tale scopo, è sufficiente digitare l’URL del sito nella casella di testo e fare clic su “Test”.
Questo vi reindirizzerà a una nuova scheda.
Se tutto appare come desiderato, si può tornare al builder della campagna OptinMonster e salvare la campagna.
Ecco fatto! Avete creato con successo un modulo di contatto fluttuante utilizzando WPForms e OptinMonster.
Metodo 3: Creare un modulo di contatto fluttuante in WordPress utilizzando un plugin gratuito per moduli fluttuanti
Il nostro ultimo metodo vi permetterà di visualizzare un’icona fluttuante che reindirizza alla pagina del modulo di contatto. Questo approccio è leggermente diverso, ma può essere efficace.
Diversi plugin gratuiti permettono di aggiungere icone di contatto fluttuanti al vostro sito WordPress. Alcune opzioni facoltative sono Simple Floating Menu e Float Menu. Questi plugin richiedono in genere di incorporare un URL nelle loro impostazioni.
In questa guida vi mostreremo come farlo utilizzando Simple Floating Menu. Se avete bisogno di aiuto per installare il plugin, potete leggere la nostra guida su come installare un plugin di WordPress.
Prima di accedere all’area di impostazione del plugin Simple Floating Menu, copiamo l’URL della pagina in cui viene visualizzato il modulo di contatto.
A tal fine, si deve navigare nella pagina in questione e copiare l’URL dalla barra degli URL.
Ora potete aprire Simple Floating Menu dalla vostra Bacheca di WordPress.
Una volta entrati nell’area delle impostazioni del plugin, si dovrà abilitare l’icona del modulo fluttuante. È possibile farlo attivando il cursore “Abilita menu fluttuante”. L’icona passerà da grigia a verde o da off a on.
Quindi, cercate il campo “URL pulsante” in cui incollare l’URL.
Una volta inserito l’URL del pulsante, si dovrebbe vedere una notifica se le impostazioni sono state salvate con successo.
A questo punto, l’icona galleggiante dovrebbe essere presente sul sito web di WordPress. Tuttavia, è possibile personalizzare ulteriormente la posizione e l’aspetto del pulsante.
Sopra il campo “Button URL”, è possibile modificare l’icona predefinita con qualcosa di più pertinente. Questo plugin offre decine di opzioni per le icone, quindi se vi sentite bloccati, è una buona idea usare la caratteristica del filtro.
Il “testo del suggerimento” apparirà quando i visitatori del sito passeranno del mouse sull’icona fluttuante. Si consiglia di compilare questo campo per dare ai visitatori un contesto su dove l’icona li porterà.
Se poi si desidera reindirizzare i visitatori a una nuova pagina dopo aver fatto clic sull’icona, è sufficiente spuntare il checkbox sul campo “Apri in una nuova scheda”.
È possibile modificare i colori dell’icona fluttuante scorrendo la schermata verso il basso. Sentitevi liberi di essere creativi con i colori di sfondo, dell’icona e dell’effetto al passaggio del mouse, purché siano in corrispondenza con la personalità del vostro brand o sito web.
Al termine, fare clic su “Salva impostazioni”.
Successivamente, è possibile passare alla scheda “Impostazioni” per ulteriori caratteristiche personalizzate.
In questa scheda è possibile scegliere la posizione del modulo sul sito, ad esempio in alto a sinistra, al centro a destra o in basso a destra.
Ci sono anche impostazioni per l’orientamento dei pulsanti. È possibile scegliere tra verticale e orizzontale. È possibile modificare anche lo stile dei pulsanti. La forma predefinita è un rettangolo, ma si può optare per un tondo, un triangolo o persino una stella.
È possibile trovare altre impostazioni personalizzate giù nel pannello.
È sufficiente regolare le dimensioni dell’icona fluttuante, gli stili delle ombre, la tipografia e altro ancora per renderla più unica.
Una volta terminato, non resta che salvare per non perdere i progressi.
Ora è possibile vedere l’aspetto dell’icona fluttuante sul proprio sito web.
Ecco l’aspetto della nostra icona fluttuante come referer:
Alternativa: Utilizzare un chatbot sul sito web
Un modulo di contatto fluttuante è un ottimo modo per consentire ai visitatori di contattarvi. Ma se volete fornire risposte immediate ai vostri utenti, potrebbe essere utile installare un chatbot.
Un chatbot può essere alimentato dall’intelligenza artificiale o gestito direttamente dal team di assistenza. Ad esempio, uno strumento come Chatbot può ricavare informazioni dal vostro sito web e dal centro di assistenza per fornire immediatamente risposte AI ai vostri visitatori.
Per i dettagli su come impostarlo, potete consultare il nostro tutorial su come add-on di un chatbot in WordPress.
Speriamo che questa guida vi abbia aiutato a creare e visualizzare un modulo di contatto WordPress fluttuante. Successivamente, potreste voler selezionare la nostra guida su come creare moduli più interattivi in WordPress e la nostra scelta dei migliori plugin per moduli di contatto WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Avete una domanda o un suggerimento? Lasciate un commento per avviare la discussione.