Vuoi impedire che la tua pagina si aggiorni quando un visitatore invia un modulo? Per impostazione predefinita, l'intera pagina viene ricaricata facendo clic sul pulsante di invio del modulo. Ed è allora che i dati inseriti nel modulo vengono trasferiti e archiviati sul server.
In questo articolo ti mostreremo come abilitare l'invio Ajax sui tuoi moduli WordPress e impedire il ricaricamento della pagina.
Perché abilitare l'invio Ajax dei moduli in WordPress
L'invio Ajax dei moduli è particolarmente utile se desideri incorporare un modulo in un popup modale. Senza l'invio Ajax abilitato, l'intera pagina dovrebbe essere ricaricata, causando la chiusura della finestra popup. In questo modo gli utenti potrebbero perdere l'importante messaggio di conferma che li mantiene coinvolti.
Con l'invio Ajax dei moduli abilitato, i tuoi utenti potrebbero vedere il messaggio di conferma dopo l'invio del modulo sulla stessa pagina senza ricaricamento.
Per abilitare l'invio Ajax dei moduli sul tuo sito WordPress, ti consigliamo WPForms, il miglior plugin per moduli WordPress.
Passaggio 1: Creazione di un nuovo modulo
Per iniziare a creare il tuo modulo, dovrai prima installare il plugin WPForms sul tuo sito WordPress.
Non sei sicuro di come fare? Nessun problema. Puoi consultare la nostra guida su come installare un plugin WordPress per risolvere tutto.
Una volta installato e attivato il plugin, vai alla dashboard di WordPress e naviga su WPForms » Aggiungi Nuovo. Verrai ora reindirizzato a una pagina in cui potrai selezionare un modello per il tuo modulo.
WPForms offre diversi modelli di modulo tra cui scegliere. Selezioniamo il modello Modulo caricamento file per questo tutorial. Potresti anche lavorare con il modello Modulo di contatto semplice.
Ora vedrai il costruttore di moduli sul tuo schermo. Sul lato sinistro dello schermo, hai le schede Aggiungi campi e Opzioni campo. Puoi usare queste schede per configurare il tuo modulo di contatto.
Se stai usando il modello Caricamento file, il campo sarà già stato aggiunto al tuo modulo. Se desideri aggiungere il campo a qualsiasi altro modello, tutto ciò che devi fare è trascinare il campo modulo Caricamento file e rilasciarlo nella posizione preferita nel costruttore di moduli.
In questo modo, WPForms ti consente di aggiungere facilmente campi al tuo modulo con il drag and drop. Puoi anche cambiare la posizione dei campi trascinando e rilasciando. Se desideri rimuovere un campo, anche questo è facile. Basta passare il cursore sopra il campo indesiderato e fare clic sull'icona elimina che apparirà nell'angolo in alto a destra del campo.
Nella scheda Opzioni campo, puoi modificare l'etichetta del campo, cambiare il formato del campo nome, alterare la dimensione del carattere e abilitare o disabilitare etichette e sotto-etichette. Hai anche la possibilità di abilitare l'opzione logica condizionale.
Una volta terminata la creazione del modulo con il costruttore di moduli, fai clic sul pulsante salva, in modo che le tue modifiche rimangano intatte.
Passaggio 3: Abilitazione dell'invio AJAX del modulo
Una volta salvate le modifiche, fai clic sulla scheda Impostazioni sul lato sinistro del tuo page builder. Vedrai diverse opzioni qui. Vai all'opzione Generale. Sotto questa, vedrai una serie di campi. Qui puoi cambiare il nome del tuo modulo, aggiungere una descrizione del modulo, cambiare il testo del pulsante, ecc.
Scorrendo ulteriormente verso il basso, vedrai alcune caselle di controllo. Puoi selezionare la casella di controllo che dice Abilita invio AJAX del modulo. Completa il processo facendo clic sul pulsante Salva nell'angolo in alto a destra dello schermo.
Ora vai alla scheda Notifica sotto la scheda Generale. Questa opzione ti avviserà ogni volta che qualcuno invia il tuo modulo. Quindi nel primo campo inserisci l'indirizzo email dell'amministratore o di chiunque sia responsabile della ricezione delle email. Puoi anche inserire l'oggetto dell'email, il nome del mittente, l'indirizzo del destinatario e un tuo messaggio.
Una volta terminato, assicurati di salvare le modifiche. Puoi anche impostare un messaggio di conferma che i visitatori riceveranno dopo aver premuto il pulsante di invio.
Passaggio 4: Pubblicazione del modulo con invio AJAX
L'ultimo passaggio consiste nel pubblicare il tuo modulo con invio AJAX abilitato sul tuo sito web. Per fare ciò, vai alla pagina in cui desideri che appaia il modulo.
Puoi iniziare andando su Pagine » Aggiungi nuova nella tua bacheca di WordPress. Ora aggiungi un titolo alla tua Pagina. Nell'editor di testo della tua pagina, aggiungi un nuovo blocco e cerca WPForms.
Quando aggiungi il blocco, vedrai la mascotte di WPForms con un menu a discesa per scegliere il modulo che hai appena creato.
Seleziona il tuo modulo preferito e un Anteprima del tuo modulo apparirà sulla tua pagina.
Puoi anche aggiungere il modulo nell'Editor Classico utilizzando il pulsante 'Aggiungi modulo', in questo modo:
Puoi quindi fare clic sul pulsante Pubblica per rendere finalmente attivo il modulo.
È stato facile, vero?
Potresti voler monitorare il numero di clic sui pulsanti che il tuo modulo di contatto riceve. Per fare ciò, consulta la nostra guida su come monitorare link e clic sui pulsanti.
Commenti Lascia una risposta