Come creare un modulo AJAX WordPress (in 4 semplici passaggi)

Hai mai perso dei lead perché il tuo modulo di contatto era lento o richiedeva il ricaricamento dell'intera pagina? Questa è una storia che sentiamo troppo spesso.

Abbiamo anche visto in prima persona quanto possano essere frustranti i moduli WordPress tradizionali, sia per i proprietari dei siti che per i loro visitatori. I moduli AJAX risolvono questo problema e possono fare lo stesso per il tuo.

Questi moduli moderni inviano i dati istantaneamente senza aggiornare la pagina. Creano un'esperienza più fluida che aiuta a mantenere i visitatori coinvolti.

Abbiamo implementato questi moduli molte volte sui siti web di clienti e partner, e i risultati parlano da soli.

In questa guida, condivideremo un semplice processo in 4 passaggi per creare un modulo AJAX per WordPress. Utilizzeremo un plugin "user-friendly" che semplifica il lavoro tecnico 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 che consente alle pagine web di inviare e ricevere dati senza ricaricarsi.

Viene comunemente utilizzato nei moduli web, consentendo agli utenti di inviare i dati del modulo senza ricaricare la pagina. Ciò rende l'invio del modulo facile e veloce, migliorando l'esperienza utente complessiva.

Applicazioni web come Gmail e Facebook utilizzano anche questa tecnica in modo estensivo per mantenere gli utenti coinvolti mentre le attività in background vengono eseguite senza interruzioni.

Puoi utilizzare AJAX per i moduli sul tuo sito WordPress per evitare ricaricamenti di pagina non necessari e mantenere gli utenti coinvolti nella pagina che stanno visualizzando.

Questo è particolarmente utile se gestisci un negozio online e desideri raccogliere feedback dagli utenti senza interrompere l'esperienza di acquisto.

Puoi anche utilizzare la stessa funzionalità AJAX per altri moduli personalizzati sul tuo sito web. Ad esempio, un modulo di accesso utente personalizzato può consentire agli utenti di accedere senza un ulteriore caricamento della pagina.

Tenendo conto di ciò, ti mostreremo come creare un modulo di contatto AJAX per WordPress in 4 semplici passaggi.

Iniziamo.

Passaggio 1: Installa il plugin WPForms

Il primo passo è installare e attivare un plugin per la creazione di moduli.

Per questo tutorial, utilizzeremo il plugin WPForms. È il miglior costruttore di moduli di contatto per WordPress sul mercato e ti consente di creare facilmente moduli basati su Ajax.

Su WPBeginner, utilizziamo WPForms per visualizzare il nostro modulo di contatto, condurre sondaggi annuali tra 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 maggiori approfondimenti.

Per iniziare, potresti voler creare un account WPForms. Sul sito web di WPForms, fai clic sul pulsante 'Ottieni WPForms Ora', scegli un piano e completa il processo di checkout.

Fatto ciò, dovresti avere il tuo cruscotto dell'account WPForms, dove puoi scaricare il tuo file zip di WPForms Pro e copiare la tua chiave di licenza.

Successivamente, installiamo e attiviamo il plugin WPForms.

Nella tua area di amministrazione di WordPress, puoi andare su Plugin » Aggiungi nuovo plugin.

Quindi, puoi usare la barra di ricerca per trovare rapidamente il plugin.

Quando lo vedi, fai clic su 'Installa ora' e poi ancora su 'Attiva'.

Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai alla pagina WPForms » Impostazioni per inserire la tua chiave di licenza.

Una volta verificato, potrai ricevere aggiornamenti automatici e installare i componenti aggiuntivi. Ora sei pronto per iniziare a creare moduli AJAX in WordPress.

Passaggio 2: Crea il tuo primo modulo

Ora procediamo e creiamo il tuo primo modulo WordPress.

Visita semplicemente la pagina WPForms » Aggiungi nuovo nell'area di amministrazione di WordPress.

Nella schermata successiva, puoi prima dare un nome al tuo nuovo modulo, ad esempio, '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, se vuoi utilizzare WPForms AI, devi solo inserire un semplice prompt e genererà il modulo per te nell'area di anteprima.

Per questo tutorial, tuttavia, creeremo un modulo di contatto utilizzando un modello predefinito.

Passiamo il mouse sulla casella 'Modulo di contatto semplice' e facciamo clic su 'Usa modello'. Tieni presente che puoi creare qualsiasi altro tipo di modulo di cui hai bisogno; il processo è 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 nuovi campi del modulo dalla colonna di sinistra 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 terminato di personalizzare il modulo, puoi passare alla fase successiva.

Passaggio 3: Attiva la funzionalità di invio modulo AJAX

A seconda delle tue impostazioni, WPForms potrebbe non avere la sottomissione del modulo AJAX abilitata per impostazione predefinita, quindi verifichiamolo ora.

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 che qualcuno ha inviato il 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.

Sebbene tu possa reindirizzare gli utenti a una nuova pagina, ciò richiede il caricamento di una pagina. Per ottenere il massimo beneficio da AJAX, consigliamo semplicemente di mostrare un 'Messaggio' in modo che l'utente rimanga sulla stessa pagina.

Devi selezionare l'opzione del messaggio e modificare il messaggio di conferma. Puoi utilizzare la barra degli strumenti di formattazione o aggiungere collegamenti per guidare gli utenti su cosa fare dopo.

Successivamente, imposta come desideri essere notificato delle nuove sottomissioni del modulo.

Passa alla scheda ‘Notifiche’ nelle impostazioni del modulo e configura le impostazioni delle email di notifica.

Al termine, puoi salvare il tuo modulo e uscire dal generatore di moduli.

Passaggio 4: Aggiungi il tuo modulo abilitato AJAX in WordPress

WPForms rende facile aggiungere moduli al tuo sito WordPress, sia su un post, una pagina o un 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 dal menu a discesa all'interno del blocco WPForms.

WPForms caricherà immediatamente un'anteprima live del modulo nell'editor dei contenuti.

Ora puoi salvare o pubblicare il tuo contenuto, 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 tecnologia 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 è esportare le tue voci 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 è semplice: vai su WPForms » Voci, seleziona il tuo modulo, scegli le opzioni di esportazione e scarica i 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.

FAQ: Moduli AJAX per WordPress

Prima di concludere, ecco alcune domande comuni che sorgono quando le persone iniziano a usare moduli AJAX in WordPress.

Come si usa AJAX per l'invio di moduli?

Il modo più semplice è utilizzare un plugin per moduli che supporti già AJAX, come WPForms. Basta abilitare l'opzione AJAX nelle impostazioni del modulo e il plugin si occuperà di tutto per te.

Se stai creando un modulo personalizzato, dovresti usare JavaScript e gli hook AJAX di WordPress. Ma per la maggior parte dei siti, un plugin è molto più semplice e affidabile.

Dove trovo l'impostazione AJAX in WPForms?

In WPForms, l'opzione AJAX si trova nelle impostazioni del modulo. Dopo aver aperto il tuo modulo nell'editor, vai su Impostazioni » Generali, quindi cerca la casella di controllo Abilita invio modulo AJAX. Una volta attivata, il modulo verrà inviato senza ricaricare la pagina.

Quali sono gli svantaggi di AJAX?

AJAX si basa su JavaScript, quindi può entrare in conflitto con plugin di caching aggressivi che minificano o posticipano gli script. Se il tuo modulo ‘gira’ ma non invia, prova a svuotare la cache o a controllare le impostazioni del tuo plugin di ottimizzazione.

Potrebbe anche causare problemi con i page builder o temi più vecchi se non è configurato correttamente. Ecco perché è importante testare i tuoi moduli dopo aver abilitato AJAX.

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.