Hai mai perso potenziali clienti perché il tuo modulo di contatto era lento e macchinoso? Questa è una storia che sentiamo fin troppo spesso. Abbiamo anche sperimentato in prima persona quanto possano essere frustranti i moduli WordPress tradizionali, sia per noi che per i nostri lettori.
I moduli AJAX hanno risolto questo problema e possono fare lo stesso per te.
Questi moduli moderni inviano i dati istantaneamente senza aggiornare la pagina. Creano un'esperienza più fluida che aiuta a mantenere i visitatori coinvolti.
Abbiamo applicato questi moduli molte, molte volte sui siti web dei nostri clienti e partner, e i risultati parlano da soli.
In questa guida, condivideremo il nostro collaudato processo in 4 passaggi per creare un modulo AJAX per WordPress. Utilizzeremo un plugin "user-friendly" che semplifica gli aspetti tecnici, in modo che tu possa seguirlo facilmente. 🙌
Cos'è AJAX e perché usarlo per i tuoi moduli?
AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di programmazione JavaScript che consente agli sviluppatori di trasferire dati senza ricaricare una pagina.
È comunemente utilizzato nei moduli web, consentendo agli utenti di inviare dati del modulo senza ricaricare una pagina. Questo rende l'invio del modulo facile e veloce, migliorando l'esperienza utente complessiva.
Inoltre, applicazioni web come Gmail e Facebook utilizzano ampiamente questa tecnica per mantenere gli utenti coinvolti, facendo funzionare tutto in modo impeccabile in background.
Puoi usare AJAX per i moduli sul tuo sito WordPress. Eviterà agli utenti ricaricamenti di pagina non necessari e li manterrà coinvolti nella pagina che stanno visualizzando.
Questo è utile quando gestisci un negozio online e vuoi raccogliere feedback dagli utenti senza distogliere la loro attenzione.
Puoi anche utilizzare la stessa funzionalità AJAX per altri moduli personalizzati sul tuo sito web. Ad esempio, un modulo di accesso utente personalizzato consentirà agli utenti di accedere senza un ulteriore caricamento della pagina.
Detto questo, ti mostreremo come creare facilmente un modulo di contatto WordPress AJAX in 4 semplici passaggi.
- Passaggio 1: Installa il plugin WPForms
- Passaggio 2: Crea il tuo primo modulo
- Passaggio 3: Attiva la funzionalità di invio modulo AJAX
- Passaggio 4: Aggiungi il tuo modulo abilitato AJAX in WordPress
- Suggerimento bonus: Esporta le voci del modulo in CSV o Excel 📄
- Risorse bonus: Altre guide sui moduli WordPress
Iniziamo.
Passaggio 1: Installa il plugin WPForms
La prima cosa che devi fare è installare e attivare un costruttore di moduli.
Per questo tutorial, utilizzeremo il plugin WPForms. È il miglior costruttore di moduli di contatto WordPress sul mercato e ti consente anche di creare facilmente moduli basati su Ajax.
Su WPBeginner, utilizziamo WPForms per visualizzare il nostro modulo di contatto, condurre sondaggi annuali per i lettori e gestire le richieste di servizi di migrazione, tra le altre cose.
È stata un'ottima esperienza e puoi vedere la nostra recensione completa di WPForms per ulteriori approfondimenti su questo plugin!
Quindi, installiamo e attiviamo WPForms. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
📝 Nota: Per creare un modulo AJAX, avrai bisogno della versione Pro del plugin. Ma c'è una versione gratuita di WPForms che puoi provare se vuoi esplorare il suo builder drag-and-drop e le funzionalità di base del modulo prima di effettuare l'aggiornamento.
Dopo l'attivazione, devi visitare la pagina WPForms » Impostazioni per inserire la tua chiave di licenza.
Dopo aver inserito la chiave di licenza, potrai ricevere aggiornamenti automatici e installare componenti aggiuntivi.
Ora sei pronto per creare bellissimi moduli AJAX in WordPress.
Passaggio 2: Crea il tuo primo modulo
Creiamo subito il tuo primo modulo WordPress.
Visita semplicemente la pagina WPForms » Aggiungi nuovo nell'area di amministrazione di WordPress.
Nella schermata successiva, puoi innanzitutto assegnare un nome al tuo nuovo modulo. Ad esempio, qui abbiamo chiamato il nostro modulo ‘Modulo di contatto’.
Dopodiché, sceglierai come costruire i tuoi moduli.
Con WPForms, puoi costruire i tuoi moduli da zero, utilizzare il generatore di moduli AI, o scegliere tra oltre 2.000 modelli predefiniti.
Ad esempio, supponiamo che tu voglia utilizzare WPForms AI. In tal caso, tutto ciò che devi fare è fornirgli un semplice prompt e genererà il modulo per te nell'area di anteprima.
Per questo tutorial, tuttavia, noi creeremo un modulo di contatto. Passa il mouse sopra la casella ‘Modulo di contatto semplice’ e fai clic su ‘Usa modello’.
Tieni presente che puoi creare qualsiasi altro tipo di modulo di cui hai bisogno; il processo è praticamente lo stesso.
WPForms caricherà ora il tuo modulo con i campi di base già aggiunti.
Da qui, puoi semplicemente fare clic su qualsiasi campo del modulo per modificarlo.
Puoi anche aggiungere qualsiasi nuovo campo del modulo dalla colonna di sinistra semplicemente facendoci clic sopra.
Il nuovo campo apparirà in fondo al tuo modulo, appena sopra il pulsante Invia.
Puoi quindi trascinare e rilasciare i campi del modulo per riordinarli.
Una volta terminata la personalizzazione del modulo, puoi passare alla fase successiva.
Passaggio 3: Attiva la funzionalità di invio modulo AJAX
WPForms non abilita l'invio di moduli tramite AJAX per impostazione predefinita, quindi dovrai abilitarlo manualmente per il tuo modulo.
Per fare ciò, semplicemente passa alla scheda ‘Impostazioni’ nel generatore di moduli.
Nella scheda delle impostazioni ‘Generali’, fai clic sull'interruttore accanto all'opzione ‘Abilita invio modulo AJAX’.
Ora impostiamo cosa succede dopo l'invio del modulo.
Innanzitutto, puoi passare alla scheda ‘Conferma’ nelle impostazioni. È qui che informi i tuoi utenti che hai ricevuto la loro richiesta di modulo.
WPForms ti permette di farlo in diversi modi. Ad esempio, puoi reindirizzare gli utenti a un URL, mostrare loro una pagina specifica o semplicemente visualizzare un messaggio sullo schermo.
Poiché abbiamo abilitato la funzionalità AJAX per il modulo, reindirizzare gli utenti a un'altra pagina vanificherebbe lo scopo della creazione di un modulo AJAX.
Devi selezionare l'opzione del messaggio e modificare il messaggio di conferma. Sentiti libero di utilizzare la barra degli strumenti di formattazione sull'editor o aggiungere uno o due link per dire agli utenti dove andare dopo.
Dopodiché, puoi impostare come desideri essere notificato riguardo all'invio di un modulo.
Passa alla scheda ‘Notifiche’ nelle impostazioni del modulo e configura le impostazioni delle email di notifica.
Una volta terminato, puoi salvare il tuo modulo e uscire dal generatore di moduli.
Passaggio 4: Aggiungi il tuo modulo abilitato AJAX in WordPress
WPForms rende super facile aggiungere moduli al tuo sito WordPress, sia su un post, una pagina o nei widget della barra laterale.
Semplicemente modifica il post o la pagina in cui desideri aggiungere il modulo e inserisci il blocco WPForms nell'area del tuo contenuto.
Dopodiché, devi selezionare il modulo che hai appena creato dalle impostazioni del blocco.
WPForms caricherà immediatamente un'anteprima live del modulo nell'editor dei contenuti.
Ora puoi salvare o pubblicare il tuo contenuto e quindi visitare il tuo sito web WordPress per testare la funzionalità AJAX del modulo.
Ecco una rapida occhiata all'esempio di modulo AJAX di WordPress dal nostro sito demo:
Puoi anche aggiungere il tuo modulo a un widget della barra laterale in WordPress.
Per fare ciò, vai alla pagina Aspetto » Widget e aggiungi il blocco widget WPForms a una barra laterale.
Seleziona il modulo che hai creato in precedenza e fai clic sul pulsante 'Aggiorna' per salvare le impostazioni del widget. Ora puoi visitare il tuo sito web per vedere il tuo modulo con funzionalità AJAX in azione.
Suggerimento bonus: Esporta le voci del modulo in CSV o Excel 📄
Una volta che il tuo modulo AJAX è attivo e funzionante, potresti voler tenere traccia di tutte le richieste. Soprattutto se stai raccogliendo lead, richieste dei clienti o informazioni di registrazione.
Il modo più semplice per farlo è esportarlo come file CSV o Excel.
Questo rende facile organizzare e analizzare le risposte in strumenti per fogli di calcolo come Google Sheets o Microsoft Excel. È anche utile per condividere report con il tuo team o per eseguire il backup dei dati del modulo al di fuori di WordPress.
Se stai usando WPForms, esportare le voci del modulo è facile. Vai su WPForms » Voci, seleziona il tuo modulo, scegli le opzioni di esportazione e scarica i tuoi dati come file CSV o Excel.
Vuoi configurare questo? Segui la nostra guida completa su come esportare le voci dei moduli WordPress in CSV ed Excel.
Risorse bonus: Altre guide sui moduli WordPress
Speriamo che questo articolo ti abbia aiutato a imparare come creare un modulo di contatto AJAX per WordPress per il tuo sito web. Successivamente, potresti anche voler consultare i nostri articoli su:
- Come creare un modulo di contatto pop-up in WordPress
- Come utilizzare i moduli di contatto per far crescere la tua lista email
- Come creare moduli di contatto con destinatari multipli
- Come creare un modulo di contatto sicuro in WordPress
- Come bloccare lo spam dei moduli di contatto in WordPress
- Come monitorare e ridurre l'abbandono dei moduli
- La guida definitiva all'uso dei moduli WordPress
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.