Riassunto AI
Vuoi impedire il ricaricamento di una pagina quando qualcuno invia uno dei tuoi moduli online?
Impedire il ricaricamento di una pagina dopo che qualcuno ha inviato un modulo migliora l'esperienza utente e può persino aiutarti a ottenere più contatti.
In Questo Articolo
Crea un modulo di contatto AJAX per WordPress
Questo tutorial sul modulo di contatto AJAX per WordPress funzionerà con uno qualsiasi dei oltre 2.100 modelli di moduli WordPress inclusi con WPForms.
Nota: AJAX è abilitato automaticamente nelle versioni più recenti di WPForms. Questo tutorial spiega come attivarlo se hai utilizzato una versione precedente per creare i tuoi moduli.
1. Crea un nuovo modulo
Per iniziare, installa e attiva il plugin WPForms. Per maggiori dettagli, consulta questo tutorial passo passo su come installare un plugin in WordPress.
Una volta installato il plugin WPForms, vai su WPForms » Aggiungi nuovo per creare un nuovo modulo.
Seleziona un modello dall'elenco:
Utilizzeremo il modello Modulo di contatto semplice per questo tutorial.
2. Personalizza il tuo modulo
Ora è il momento di creare il tuo modulo. Puoi facilmente personalizzare i campi del modulo trascinandoli dal lato sinistro del costruttore all'area di anteprima sulla destra.
Aggiungeremo un campo Caricamento file al nostro modulo di contatto in modo che gli utenti possano includere eventuali documenti pertinenti con la loro richiesta.
Regola il posizionamento dei campi a tuo piacimento trascinandoli su e giù nel modulo.
Puoi anche fare clic su qualsiasi campo nell'area di anteprima per aprire opzioni aggiuntive. Questo ti permetterà di modificare le etichette dei campi, aggiungere logica condizionale e altro ancora.
Quando sei pronto, fai clic sul pulsante arancione Salva nell'angolo in alto a destra.
Ora che abbiamo creato un modulo con un campo Caricamento file, abilitiamolo per AJAX.
3. Abilita l'invio AJAX dei moduli
Successivamente, sul lato sinistro della pagina, fai clic su Impostazioni. Quindi seleziona la sezione Generale .
Nella parte inferiore del pannello di destra, espandi le opzioni Avanzate e individua l'impostazione Abilita invio modulo AJAX. Assicurati che sia attivata.
Fatto! Il tuo modulo è ora abilitato per le richieste AJAX.
Configuriamo un paio di altre cose importanti con il tuo modulo di contatto AJAX.
4. Configura le notifiche del tuo modulo
La prossima cosa da fare è impostare le notifiche email del tuo modulo. Questi sono un ottimo modo per sapere quando qualcuno invia uno dei tuoi moduli abilitati per AJAX.
Per iniziare, vai su Impostazioni » Notifiche.
A meno che tu non disabiliti la funzione di notifica, riceverai una notifica via email ogni volta che qualcuno invia il tuo modulo AJAX.
Per assistenza nella compilazione di queste impostazioni, consulta il nostro tutorial su come impostare le notifiche dei moduli in WordPress.
Questo esempio ha uno sfondo grigio, ma puoi cambiarne il colore se lo desideri. Queste personalizzazioni possono rendere le tue notifiche via email più professionali e dare loro un tocco personale. Dai un'occhiata alla nostra guida su come aggiungere un'intestazione personalizzata al tuo modello di email.
5. Configura le conferme del tuo modulo
Le conferme dei moduli ti consentono di agire immediatamente (e automaticamente) dopo che l'utente ha inviato informazioni al tuo modulo.
Ci sono 3 diversi tipi di conferme in WPForms:
- Messaggio — Questo è il tipo di conferma predefinito che appare dopo che qualcuno ha inviato il tuo modulo, ed è personalizzabile. Dai un'occhiata ai nostri suggerimenti su come personalizzare il tuo messaggio di conferma per aumentare la felicità dei visitatori del tuo sito.
- Pagina di visualizzazione — Invia automaticamente gli utenti a qualsiasi pagina del tuo sito.
- Reindirizzamento — Utile se vuoi portare l'utente su un sito web diverso o un URL specializzato per uno sviluppo più complesso.
Per ulteriore aiuto con questo passaggio, consulta il nostro tutorial su come impostare le conferme dei moduli.
Una volta terminate le impostazioni delle notifiche e della conferma, assicurati di salvare nuovamente il tuo modulo.
6. Incorpora il tuo modulo AJAX
Una volta configurato il tuo modulo con AJAX a tuo piacimento, vorrai aggiungerlo al tuo sito.
WPForms ti consente di aggiungere i tuoi moduli in più punti del tuo sito web, incluse le tue pagine, i post del blog e i widget della barra laterale. Diamo un'occhiata all'opzione di posizionamento più comune: l'incorporamento in pagine o post.
Per iniziare, crea una nuova pagina o un nuovo post in WordPress, oppure apri uno esistente nell'editor.
Dopodiché, aggiungi un nuovo blocco e seleziona l'icona WPForms. Se non la vedi subito, puoi cercarla.
L'utile widget WPForms apparirà all'interno del tuo blocco. Fai clic sul menu a discesa di WPForms e scegli quale dei moduli che hai già creato desideri inserire nella tua pagina. Seleziona il tuo modulo AJAX.
Successivamente, fai clic sul pulsante blu in alto a destra che dice Pubblica o Aggiorna, in modo che il tuo modulo appaia sul tuo sito web.
Ed eccolo qui. Ora sai come creare un semplice modulo di contatto AJAX per WordPress senza ricaricamento della pagina, e i visitatori del tuo sito web ti apprezzeranno ancora di più per questo.
Domande frequenti sui moduli AJAX
Cos'è un modulo AJAX?
Un modulo abilitato AJAX è un modulo veloce e dinamico che può inviare ed eseguire processi backend senza la necessità che l'intera pagina venga aggiornata.
Per impostazione predefinita, l'intera pagina deve essere ricaricata quando un utente invia. Questo perché devono essere eseguiti determinati processi, tra cui l'archiviazione dei dati del modulo, l'invio di email di notifica e altro ancora.
Ma poiché WordPress e WPForms supportano i moduli AJAX, hai la possibilità di abilitare l'invio di moduli AJAX per evitare che i tuoi moduli vengano aggiornati dopo che qualcuno ha inviato il modulo.
Perché AJAX viene utilizzato nei moduli di contatto?
I moduli abilitati AJAX sono improvvisamente diventati un must per i siti web di tutte le dimensioni.
Ecco i motivi principali per cui AJAX sta diventando rapidamente popolare per l'uso nei moduli di contatto:
- Offre un'esperienza utente molto migliore.
- Tempi di caricamento fulminei e aumento della velocità del sito WordPress.
- Mantiene aperti i modali e i popup che contengono il tuo modulo in modo da poter visualizzare un'azione o un messaggio di follow-up per aumentare le vendite.
- Fornisce indizi visivi e rassicurazione che il modulo è in elaborazione.
Successivamente, crea un modulo popup per WordPress
Ora che puoi mantenere aperti i tuoi popup dopo che qualcuno ha inviato il modulo, vorrai un ottimo plugin da usare per visualizzare un messaggio mirato.
- Assicurati di leggere il nostro post sui migliori plugin popup per WordPress.
- Dai un'occhiata a 2 modi diversi per creare un modulo popup in WordPress.
- E infine, scopri come creare un popup con un codice coupon usando WPForms.
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.
Grazie
Ho seguito le istruzioni, ma non funziona.
quando invio un modulo con gestione personalizzata, vedo 2 richieste a /wp-admin/admin-ajax.php
la prima (che è quella che innesco) fallisce con Forbidden (relativo al nonce) e in realtà voglio innescare una funzione personalizzata che esegue alcune elaborazioni sui dati del modulo.
La seconda ha successo, ma restituisce la conferma che voglio saltare.
Come posso fare? Come posso ottenere un modulo AJAX con gestione personalizzata?
Grazie.
Ciao Eli. Sembra che avresti bisogno di una soluzione personalizzata per ottenere ciò che stai cercando. Ti consigliamo di contattare Seahawk che può lavorare con te su questo.