Come mostrare un modulo di contatto fluttuante in WordPress (3 metodi)

Ti preoccupi mai che i visitatori vogliano contattarti ma non sappiano come fare?

Un modulo di contatto nascosto in una pagina di WordPress è facile da perdere. I potenziali clienti potrebbero andarsene senza fare domande, condividere feedback o effettuare un acquisto. Ciò può portare a opportunità mancate e a un'esperienza utente meno amichevole.

La buona notizia è che c'è una soluzione semplice: aggiungere un modulo di contatto fluttuante che segue i tuoi visitatori mentre navigano. In questo modo, possono contattarti in qualsiasi momento senza doverlo cercare.

È un modo semplice per aumentare l'interazione e costruire fiducia, senza essere invadente. Ancora meglio, non hai bisogno di alcuna competenza di codifica. Con i plugin giusti, puoi impostarne uno in pochi clic.

In questa guida, ti illustreremo tre metodi rapidi per aggiungere un modulo di contatto fluttuante al tuo sito WordPress.

Cos'è un modulo di contatto fluttuante e perché usarlo?

Un modulo di contatto fluttuante rimane sullo schermo, ad esempio nell'angolo in basso o nel pannello laterale, mentre i visitatori navigano su un sito web WordPress. Di solito appare come un piccolo pulsante o icona che si espande in un modulo completo quando viene cliccato o su cui si passa il mouse.

Ecco alcuni vantaggi dell'utilizzo di un modulo di contatto mobile sul tuo sito WordPress:

• Accessibilità. Poiché il modulo fluttua e rimane fisso, i visitatori del sito possono accedervi da qualsiasi pagina web in qualsiasi momento.
• Minima intrusione. A differenza dei popup che possono interrompere l'esperienza utente, i moduli mobili sono generalmente meno dirompenti pur essendo noti.
• Call to action. La presenza costante di un modulo fluttuante ricorda gentilmente agli utenti di interagire, il che aiuta ad aumentare le conversioni.

In qualità di proprietario di un sito Web, puoi utilizzare un modulo di contatto mobile per assistenza clienti, richieste di vendita e raccolta di feedback.

Consentendo ai visitatori di ottenere aiuto istantaneamente mentre navigano, porre domande senza lasciare la pagina e condividere suggerimenti in qualsiasi momento, crei un'esperienza utente più fluida e piacevole.

Secondo la nostra esperienza, l'aggiunta di un modulo fluttuante migliora significativamente l'interazione perché i visitatori non devono mai cercare una pagina di contatto.

Fortunatamente, WordPress rende facile aggiungere un modulo di contatto fluttuante in diversi modi. Nelle sezioni seguenti, ti guideremo attraverso tre semplici metodi per impostarne uno.

Iniziamo!

Metodo 1: Creare un modulo di contatto fluttuante in WordPress utilizzando UserFeedback

Se desideri creare un semplice modulo di contatto fluttuante con opzioni di personalizzazione semplici, questo metodo è quello che fa per te.

UserFeedback è il miglior plugin di feedback per WordPress che può aiutarti a creare moduli di feedback personalizzabili, moduli di contatto mobili e sondaggi popup. Viene fornito con modelli e domande predefiniti, anche per l'esperienza del sito Web e i moduli di sondaggio per negozi di e-commerce.

Utilizzando UserFeedback, puoi migliorare il tuo sito web in base all'input effettivo degli utenti, aumentare la soddisfazione del cliente e affrontare tempestivamente eventuali problemi.

Su WPBeginner, abbiamo effettivamente utilizzato UserFeedback sui nostri siti Web e abbiamo avuto un'ottima esperienza. Per ulteriori informazioni sul plugin, non esitare a consultare la nostra recensione completa di UserFeedback.

Innanzitutto, installiamo e attiviamo il plugin UserFeedback. Se non sai come installare un plugin, puoi seguire la nostra guida su come installare un plugin di WordPress.

Una volta attivato UserFeedback sul tuo sito web, puoi iniziare a creare il tuo primo modulo di sondaggio.

Dal tuo dashboard di WordPress, vai su UserFeedback » Sondaggi » Crea nuovo.

Una volta fatto ciò, arriverai alla sezione ‘Impostazioni’.

Con UserFeedback, puoi iniziare da una pagina vuota con l’opzione ‘Inizia da zero’ o utilizzare un modello predefinito. In questa guida, useremo il modello ‘Feedback sul sito web’. 

Per scegliere il modello, fai semplicemente clic su di esso.

Successivamente, modifichiamo il testo. In questo esempio, cambieremo l’etichetta ‘Feedback sul sito web’ in ‘Hai qualche feedback?’.

Quindi, potresti voler fare clic sul menu a discesa ‘Tipo di domanda’ per scegliere come i visitatori possono rispondere a questa domanda. In questo esempio, opteremo per ‘Campo di testo singolo’.

Dopo di che, puoi cambiare la domanda in ‘Nome’.

Ora, avrai bisogno di un altro campo domanda per l’indirizzo email dell’utente.

Puoi scorrere un po’ verso il basso e fare clic sul pulsante ‘Aggiungi domanda’.

Una volta fatto ciò, procedi e imposta il tuo tipo di domanda e il titolo come hai fatto nel passaggio precedente.

Il passaggio successivo consiste nel configurare le impostazioni del modulo.

Nella scheda ‘Impostazioni’, puoi attivare il monitoraggio delle visualizzazioni e delle risposte del tuo modulo utilizzando Google Analytics e MonsterInsights.

Basta attivare ‘Abilita monitoraggio Google Analytics’ per utilizzare la funzionalità.

Dopodiché, potresti voler scorrere la scheda per configurare il targeting e il comportamento.

Nella sezione 'Targeting', puoi scegliere il tipo di dispositivo e la pagina Web che visualizzerà il tuo modulo di sondaggio.

Le opzioni per il tipo di dispositivo includono desktop, tablet e mobile. Se desideri che il modulo venga visualizzato su tutti questi dispositivi, puoi selezionarli tutti e tre.

Quindi, puoi scegliere tutte le pagine in cui desideri visualizzare il modulo fluttuante. Si consiglia di selezionare l'opzione ‘Tutte le pagine’ in modo che i visitatori possano accedere al tuo modulo ovunque sul tuo sito web.

Una volta fatto, scorriamo verso il basso e configuriamo il comportamento del modulo. Qui imposterai:

• Tempistica di visualizzazione. Scegli quando il tuo modulo apparirà nelle tue pagine.
• Durata di visualizzazione. Definisci ogni quanto tempo il tuo modulo verrà mostrato ai visitatori.
• Tempo di esecuzione del sondaggio. Specifica per quanto tempo il tuo modulo apparirà nelle pagine designate.

Ecco la nostra configurazione per riferimento: ‘Tempistica di visualizzazione: Immediatamente’, ‘Durata visualizzazione: Sempre, fino al completamento del sondaggio UserFeedback’ e ‘Tempo di esecuzione sondaggio: Indefinitamente’.

Ora sei pronto per passare alla fase successiva.

Nella scheda ‘Notifiche’, inserirai l'indirizzo email che riceverà le notifiche di invio del modulo.

Puoi aggiungere più destinatari, ma dovrai assicurarti di utilizzare una virgola per separare ciascuno di essi, come john@example.com,jane@example.com. Assicurati di non aggiungere spazi dopo le virgole, poiché ciò può talvolta causare errori di consegna delle e-mail.

Infine, potresti voler dedicare del tempo a controllare il tuo modulo un'ultima volta prima di finalizzarlo.

Nella parte superiore della scheda ‘Pubblica’, vedrai ‘Riepilogo del feedback del sito web’. Puoi esaminare i punti elenco uno per uno per verificare se le configurazioni del tuo modulo sono corrette.

Se tutto sembra a posto, puoi scorrere verso il basso fino alla sezione ‘Pubblica’.

Lì, puoi cambiare lo stato da ‘Bozza’ a ‘Pubblica’.

In alternativa, puoi pianificare un lancio attivando l'opzione ‘Pianifica per dopo’ e definendo data e ora.

Una volta fatto, fai semplicemente clic su ‘Salva e pubblica’ per visualizzare il tuo modulo.

E questo è tutto!

Hai visualizzato con successo un modulo di contatto fluttuante sul tuo sito WordPress utilizzando UserFeedback.

Metodo 2: Creare un modulo di contatto fluttuante in WordPress utilizzando WPForms e OptinMonster

Se desideri un maggiore controllo sul design del tuo modulo di contatto fluttuante, questo è il metodo che fa per te. Utilizzeremo WPForms per creare il modulo e OptinMonster per farlo fluttuare sul tuo sito WordPress.

WPForms è il miglior costruttore di moduli di contatto per WordPress con una semplice interfaccia drag-and-drop. Con oltre 2.000 modelli e strumenti basati sull'intelligenza artificiale, puoi creare un modulo WordPress in pochi clic.

Su WPBeginner, utilizziamo WPForms per raccogliere contatti, feedback e richieste di migrazione degli utenti. Scopri perché amiamo questo plugin nella nostra recensione dettagliata di WPForms.

Per creare moduli con WPForms, la prima cosa da fare è installare e attivare il plugin sul tuo sito web. Se hai bisogno di ulteriore aiuto, puoi leggere la nostra guida su come installare un plugin di WordPress.

Dopo l'attivazione, puoi navigare su WPForms » Aggiungi Nuovo dal tuo pannello di controllo WordPress.

Questo ti reindirizzerà all'interfaccia del costruttore di moduli.

Lì, tutto ciò che devi fare è digitare il nome del tuo modulo e selezionare un template. In questo esempio, creiamo un modulo di contatto e lo chiamiamo 'Modulo di Contatto'.

Dopo aver nominato il tuo modulo, puoi scorrere verso il basso il pannello per creare il tuo modulo con l'IA o selezionare un template.

se hai la licenza Pro, WPForms AI ti aiuta a creare moduli rapidamente. Tutto quello che devi fare è descrivere ciò di cui hai bisogno. Invece di aggiungere campi manualmente, l'IA lo fa per te in pochi secondi.

Che tu abbia bisogno di un semplice modulo di registrazione utente, di un modulo di candidatura interattivo o di un sondaggio dettagliato, WPForms AI rende il processo veloce.

In questa guida, tuttavia, utilizzeremo il template 'Modulo di Contatto Semplice'.

Per iniziare a costruire, puoi passare il mouse sopra la casella del template e fare clic su 'Usa Template'.

Questo ti reindirizzerà al pannello 'Campi' del costruttore di moduli.

Da qui, potresti voler rivedere il tuo modulo di contatto e regolare il contenuto predefinito. Se tutto sembra già a posto, puoi procedere e fare clic sul pulsante 'Salva'.

Per istruzioni dettagliate, non esitare a consultare la nostra guida passo passo su come creare un modulo di contatto.

Una volta terminata la creazione del tuo modulo, è ora di modificarne le impostazioni in modo che venga visualizzato come modulo fluttuante.

Per questo, dovrai installare OptinMonster, il miglior plugin per la generazione di lead per WordPress.

Lo strumento può aiutarti a creare e gestire campagne per convertire i visitatori in iscritti e clienti paganti. Puoi consultare la nostra guida dettagliata su come creare una lista email con OptinMonster.

Su WPBeginner, utilizziamo OptinMonster per promuovere offerte speciali tramite popup e banner nell'intestazione. Consulta la nostra recensione completa di OptinMonster per saperne di più su questo software.

Dopo l'attivazione, puoi fare clic sulla voce di menu 'OptinMonster' dalla tua bacheca di WordPress.

Vedrai quindi la schermata di benvenuto, dove puoi fare clic su 'Collega il tuo account esistente' per iniziare con il plugin.

Si aprirà una nuova finestra e qui potrai fare clic su 'Connetti a WordPress'.

OptinMonster ti chiederà quindi i dettagli del tuo account per completare il processo.

Una volta verificato, sei pronto per creare la tua prima campagna.

Per iniziare, naviga semplicemente su OptinMonster » Campagne dalla tua area di amministrazione di WordPress.

Una volta all'interno di 'Campagne', sei pronto per creare e configurare il tuo modulo mobile.

Per iniziare, fai semplicemente clic sul pulsante 'Crea la tua prima campagna'.

Ora è il momento di selezionare un tipo di campagna.

OptinMonster ha vari tipi di campagne, inclusa una barra fluttuante.

Sebbene possa sembrare il tipo di campagna perfetto, una barra fluttuante non ha abbastanza spazio verticale per visualizzare comodamente più campi del modulo. Quindi, vorresti usarla per altri casi come l'annuncio di promozioni di vendita o la condivisione di codici coupon.

Se vuoi saperne di più sull'uso di una barra mobile, ti consigliamo di consultare la nostra guida su come creare una barra footer mobile fissa in WordPress.

Per mantenere il tuo design ordinato, puoi scegliere 'Slide-in' come tipo di campagna per aggiungere il tuo modulo di contatto WPForms.

Un popup flottante rimarrà nell'angolo in basso a destra dello schermo dell'utente. Ciò consente ai visitatori di compilare il modulo di contatto WPForms direttamente sulla pagina senza essere reindirizzati, creando un'esperienza utente fluida.

Puoi semplicemente fare clic sul tipo di campagna per utilizzarlo.

Quindi, scorriamo il pannello e selezioniamo un modello.

Per utilizzare un modello, è sufficiente passare il mouse sul blocco del modello e fare clic su ‘Usa modello’. Qui, stiamo scegliendo ‘Iscriviti alla newsletter (Light)’.

Una volta scelto il tipo di campagna e il modello, apparirà una finestra pop-up.

Dovrai solo dare un nome alla tua campagna. In questo esempio, chiameremo la nostra campagna ‘Modulo di contatto fluttuante’.

Dopo aver deciso il nome, puoi fare clic su ‘Inizia a costruire’.

OptinMonster ti reindirizzerà quindi al costruttore di campagne.

L’interfaccia di creazione della campagna ha due sezioni. La parte sinistra contiene tutte le funzionalità che puoi aggiungere alla tua campagna e la parte destra è l’anteprima live.

Per maggiori informazioni, puoi consultare il nostro tutorial su come aggiungere un modulo di contatto a comparsa in WordPress.

Per aggiungere il tuo modulo di contatto WPForms, puoi scorrere il pannello sinistro per individuare il blocco WPForms.

Una volta trovato, trascina e rilascia semplicemente il blocco WPForms sull’anteprima live nel pannello destro.

Quindi, vedrai un menu a discesa 'Selezione Modulo'. Puoi cliccarci sopra e poi scegliere 'Modulo di Contatto'. Il blocco nell'anteprima live caricherà quindi lo shortcode del modulo.

Dopodiché, potresti voler passare alla scheda ‘Regole di visualizzazione’. Questa scheda è dove puoi impostare i tempi e le pagine di visualizzazione del modulo di contatto fluttuante.

Per garantire che il tuo modulo fluttui e rimanga fisso dal primo secondo, ti consigliamo di impostare i primi due menu a discesa su ‘tempo sulla pagina’ e ‘immediato’.

Quindi, per visualizzare il modulo su tutte le pagine, puoi impostare i seguenti menu a discesa su ‘percorso URL corrente’ e ‘qualsiasi pagina’.

Una volta terminato, puoi accedere alla scheda ‘Pubblica’.

In questa scheda, la prima cosa da fare è cambiare lo stato di pubblicazione della tua campagna in ‘Pubblica’ o ‘Pianifica’.

Il passaggio successivo consiste nell'utilizzare la funzionalità ‘Live Site Inspector’ per testare l'aspetto della tua campagna sulla tua pagina web. Per farlo, digita semplicemente l'URL del tuo sito nella casella di testo e fai clic su ‘Test’.

Questo ti reindirizzerà a una nuova scheda.

Se tutto appare come desideri, puoi tornare al costruttore di campagne di OptinMonster e salvare la tua campagna.

Ecco fatto! Hai creato con successo un modulo di contatto fluttuante utilizzando WPForms e OptinMonster.

Metodo 3: Creare un pulsante di contatto fluttuante in WordPress utilizzando un plugin gratuito

Questo metodo ti consente di visualizzare un'icona flottante che reindirizza alla tua pagina del modulo di contatto. Sebbene non visualizzi i campi del modulo in un popup come i metodi precedenti, funge da alternativa altamente visibile e gratuita che indirizza gli utenti direttamente alla pagina dei contatti.

Diversi plugin gratuiti ti consentono di aggiungere icone di contatto fluttuanti al tuo sito WordPress. Alcune opzioni popolari includono Simple Floating Menu e Float Menu. Questi plugin in genere richiedono di incorporare un URL nelle loro impostazioni.

In questo tutorial, ti mostreremo come fare usando Simple Floating Menu. Se hai bisogno di aiuto per installare il plugin, puoi leggere la nostra guida su come installare un plugin di WordPress.

Per usare questo metodo, avrai prima bisogno di una pagina di contatto standard sul tuo sito. Se non ne hai ancora creata una, consulta la nostra guida su come creare un modulo di contatto in WordPress prima di procedere.

Una volta che la tua pagina è pronta, prima di accedere all'area delle impostazioni del plugin Simple Floating Menu, copiamo l'URL della pagina in cui visualizzi il tuo modulo di contatto.

Per farlo, naviga alla pagina in questione e copia l'URL dalla barra degli indirizzi.

Ora, puoi aprire Simple Floating Menu dalla tua bacheca di WordPress.

Una volta nell'area delle impostazioni del plugin, dovrai abilitare l'icona del modulo fluttuante. Puoi farlo attivando lo slider 'Abilita menu fluttuante'. Si trasformerà quindi da grigio a verde o da spento ad acceso.

Quindi, procedi e trova il campo 'URL del pulsante' per incollare l'URL.

Una volta inserito l'URL del pulsante, dovresti vedere una notifica se le tue impostazioni sono state salvate correttamente.

A questo punto, la tua icona mobile dovrebbe essere attiva sul tuo sito web WordPress. Tuttavia, puoi personalizzare ulteriormente la posizione e l'aspetto del pulsante.

Sopra il campo 'URL del pulsante', puoi cambiare l'icona predefinita con qualcosa di più pertinente. Questo plugin offre decine di opzioni di icone, quindi se ti senti bloccato, è una buona idea usare la funzione di filtro.

‘Testo del Suggerimento‘ apparirà quando i visitatori del sito passeranno il mouse sull'icona mobile. Ti consigliamo di compilare questo campo per dare ai visitatori un contesto su dove li porterà l'icona.

Quindi, se vuoi reindirizzare i visitatori a una nuova pagina dopo aver cliccato sull'icona, seleziona semplicemente la casella di controllo nel campo 'Apri in una nuova scheda'.

Puoi modificare i colori dell'icona mobile scorrendo verso il basso sullo schermo. Sentiti libero di essere creativo con i colori dello sfondo, dell'icona e dell'effetto hover, purché corrispondano al tuo brand o alla personalità del tuo sito web.

Al termine, fai clic su 'Salva impostazioni'.

Successivamente, puoi passare alla scheda 'Impostazioni' per ulteriori funzionalità di personalizzazione.

In questa scheda, puoi scegliere dove vuoi che il modulo appaia sul tuo 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. Puoi scegliere verticale o orizzontale.

Potresti voler cambiare anche lo stile dei pulsanti. La forma predefinita è un rettangolo, ma puoi optare per un cerchio, un triangolo o persino una stella.

Puoi trovare altre impostazioni di personalizzazione nel pannello. Sentiti libero di regolare le dimensioni, gli stili dell'ombra, la tipografia e altro ancora della tua icona mobile per renderla più unica.

Una volta terminato, non ti resta che salvare per non perdere i tuoi progressi.

Ora puoi procedere e vedere come appare l'icona fluttuante sul tuo sito web.

Ecco come appare la nostra icona fluttuante per riferimento:

Metodo Alternativo: Utilizzare un chatbot sul tuo sito web

Un modulo di contatto fluttuante è un ottimo modo per consentire ai visitatori di contattarti, ma è tipicamente asincrono. Ciò significa che i visitatori lasciano un messaggio e aspettano una risposta via email.

Se desideri fornire risposte immediate e in tempo reale ai tuoi utenti, allora potrebbe valere la pena installare invece un chatbot.

Un chatbot può essere basato sull'intelligenza artificiale o gestito direttamente dal tuo team di supporto.

Ad esempio, uno strumento come ChatBot può reperire informazioni dal tuo sito web e dal tuo centro assistenza per fornire risposte immediate basate sull'IA ai tuoi visitatori, gestendo fino all'80% delle domande di routine all'istante per aumentare l'interazione.

Per i dettagli su come impostare questo, puoi consultare il nostro tutorial su come aggiungere un chatbot in WordPress. E per saperne di più sul software, consulta la nostra recensione completa di ChatBot.

Domande frequenti sui moduli di contatto fluttuanti in WordPress

Ecco le risposte alle domande più comuni sull'impostazione e la personalizzazione dei moduli di contatto fluttuanti.

Qual è il miglior plugin per creare un modulo di contatto fluttuante?

Se stai cercando una soluzione semplice e all-in-one, UserFeedback è un'ottima scelta. È progettato per una facile configurazione e personalizzazione, rendendolo ideale per semplici moduli mobili senza alcuna codifica.

Per un maggiore controllo sull'aspetto e sul comportamento del tuo modulo, considera di combinare WPForms con OptinMonster.

WPForms offre un generatore drag-and-drop intuitivo con oltre 2.000 modelli e molti strumenti AI. OptinMonster aggiunge opzioni di targeting avanzate e flessibilità di progettazione, consentendoti di visualizzare il tuo modulo esattamente quando e dove vuoi.

Posso personalizzare il design del mio modulo di contatto fluttuante?

Assolutamente. Tutti e tre i metodi consentono la personalizzazione. Puoi personalizzare colori, testo e posizionamento per allinearli al branding del tuo sito.

OptinMonster porta la personalizzazione un passo avanti, offrendo opzioni di design avanzate e regole di targeting. Ciò significa che puoi perfezionare ogni dettaglio della tua campagna di moduli fluttuanti per soddisfare le tue esigenze specifiche.

Un modulo di contatto fluttuante rallenterà il mio sito web?

Affatto. I plugin presenti in questa guida sono ben codificati e ottimizzati per le prestazioni. Si caricano in modo asincrono, assicurando che non blocchino il caricamento del contenuto principale della tua pagina. Ciò aiuta a mantenere un'esperienza utente veloce e fluida sul tuo sito.

Risorse aggiuntive sui moduli di WordPress

Speriamo che questa guida ti abbia aiutato ad aggiungere un modulo di contatto fluttuante al tuo sito. Ora che è configurato, potresti voler consultare questi altri articoli utili per ottenere ancora di più dai tuoi moduli:

• Come incorporare moduli in WordPress
• Come personalizzare e stilizzare i tuoi moduli WordPress
• Come creare moduli più interattivi in WordPress
• La guida definitiva all'uso dei moduli WordPress
• I migliori creatori di moduli online (scelte degli esperti)

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.