Aggiungi una sezione HTML personalizzata e imposta il modulo WordPress<\/strong><\/h2>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984672306.jpg\")
<\/a><\/p>\nCrea una nuova pagina per ospitare il tuo modulo di contatto WordPress. Accedi alla dashboard di WordPress e vai all’area delle impostazioni delle pagine. Il passaggio 2 consiste nel selezionare e fare clic su Aggiungi nuovo. Quando crei una pagina di contatto, scegli un nome significativo. Ad esempio: "Contattaci".<\/p>\n
Modulo di contatto pi\u00f9 semplice, meglio \u00e8. Questo dovrebbe essere il pi\u00f9 semplice possibile. Hai solo bisogno di caselle di nome, e-mail e commenti per creare un semplice modulo di contatto. Dovrebbe essere copiato e inserito nel file page-contact.php.<\/p>\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984775736.jpg\")
<\/a><\/p>\nIl passaggio 3 consiste nel creare il tuo modulo WordPress dopo aver chiamato la tua pagina dei contatti. Puoi utilizzare il blocco di codice se attivi Bootstrap sul tuo sito WordPress.<\/p>\n
Se desideri mantenere il controllo completo sull’aspetto del tuo sito, puoi utilizzare il blocco del codice del modulo senza bootstrap. Dopo aver selezionato il blocco di codice appropriato per il tuo sito WordPress, aggiungi un blocco HTML personalizzato Gutenberg. Incolla il codice del modulo di tua scelta.<\/p>\n
Se stai utilizzando una versione precedente di WordPress priva del blocco HTML Gutenberg, vai prima alle impostazioni della scheda Testo. Incolla il codice modulo di tua scelta nell’area.<\/p>\n
Non dimenticare di includere l’URL dell’endpoint che hai trovato nella propriet\u00e0 dell’azione del blocco HTML. Di conseguenza, gli invii verranno inviati al modulo che hai creato nella dashboard di Getform.<\/p>\n
Creazione di un modello di pagina<\/strong><\/h2>\nIl passaggio 1 consiste nel creare un modello per una pagina WordPress. Per fare ci\u00f2, copia il codice da page.php in un nuovo file chiamato page-contact.php. Per garantire che WordPress tratti il \u200b\u200bfile contact.php come un modello di pagina di WordPress, dobbiamo includere un commento nella parte superiore del file.<\/p>\n
Costruire la forma<\/strong><\/h2>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e898487993c.jpg\")
<\/a><\/p>\nOra dobbiamo creare un modulo di contatto WordPress di base. Basta copiare e incollare il codice nel contenuto della voce. Non \u00e8 difficile usare questo codice HTML autoesplicativo per un modulo. Verr\u00e0 utilizzato in seguito per determinare se il modulo \u00e8 stato inviato o meno.<\/p>\n
Pre-elaborazione dei dati<\/strong><\/h2>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e898498f8a1.jpg\")
<\/a><\/p>\nIl modulo creato sembrer\u00e0 carino, ma sar\u00e0 completamente inutile perch\u00e9 non invier\u00e0 alcuna e-mail. Quello che dobbiamo fare \u00e8 dare un’occhiata al modulo che \u00e8 stato inviato e ricontrollare tutti i dati. \u00c8 necessario verificare se i campi sono stati compilati correttamente con i dati corretti.<\/p>\n
Se le caselle sono riempite con i dati corretti, otterremo l’indirizzo e-mail dell’amministratore del blog e gli invieremo l’e-mail.<\/p>\n
In caso contrario, non verr\u00e0 inviata alcuna e-mail e l’utente avr\u00e0 problemi. Verifica che il modulo sia stato inviato e compilato con dati accurati. Se si verifica un errore, ad esempio un campo vuoto o un indirizzo e-mail errato, viene visualizzato un avviso e il modulo non viene inviato. Devi correggere questi dati e riprovare.<\/p>\n
Aggiunta di una verifica jQuery<\/strong><\/h2>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984aaacb5.jpg\")
<\/a><\/p>\nIl nostro modulo \u00e8 ora completamente pronto. Tuttavia, potremmo migliorarlo incorporando la verifica lato client. Per fare ci\u00f2, utilizzeremo jQuery e il plugin jQuery di conferma. Questo plugin \u00e8 fantastico poich\u00e9 ti consente di verificare rapidamente se un modulo \u00e8 stato compilato con dati accurati. Il primo passaggio consiste nel scaricare e installare il plug-in di convalida nel file del tema.<\/p>\n
Ora dobbiamo collegare i file Javascript al nostro tema. Successivamente, il plugin jQuery validates confermer\u00e0 il modulo di contatto sul lato client. Come funziona? Seleziona i dati del modulo che hanno la classe CSS richiesta e convalida che siano adeguatamente popolati. In caso contrario, viene visualizzato un avviso e sar\u00e0 necessario correggere tutti i dati inseriti errati.<\/p>\n
Miglioramento della forma<\/strong><\/h2>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984bbbb81.jpg\")
<\/a><\/p>\nSfrutta le capacit\u00e0 di WordPress per salvaguardare l’uso del nostro modulo utilizzando nonce. Le funzioni ti permetteranno di garantire che il contenuto di un modulo di richiesta provenga dal sito corrente e non da un altro. Di conseguenza, non \u00e8 una protezione ideale, sebbene protegga in molte circostanze.<\/p>\n
Il suo primo parametro \u00e8 un’azione, mentre il secondo argomento \u00e8 un nome. Queste due parole vengono utilizzate di nuovo pi\u00f9 avanti nel nostro codice per determinare se il nonce inviato corrisponde a questi due input.<\/p>\n
\u00c8 importante includere i campi nonce nei moduli di WordPress. I nonces possono essere utilizzati per verificare che un utente intenda eseguire un’azione ed \u00e8 determinante per la protezione contro la falsificazione delle richieste tra siti (CSRF)".<\/p>\n
Intercettazione dati con modello<\/strong><\/h2>\nConcentriamoci sulla logica di elaborazione del form: abbandoniamo il template e ci dirigiamo al file functions.php per gestire i dati ricevuti.<\/p>\n
\u00c8 necessario connettersi a un’azione WordPress che viene eseguita prima che vengano prodotte le intestazioni delle pagine di WordPress. Serve per reindirizzare potenzialmente l’utente a un’altra pagina dopo aver valutato l’input del modulo.<\/p>\n
La prima condizione nella nostra funzione ci assicura che \u00e8 stata inviata una voce di modulo. Esiste un collegamento tra la funzione e l’azione di reindirizzamento del modello. Per questo motivo, ogni volta che \u0161age viene caricato, verr\u00e0 chiamato.<\/p>\n
\u00c8 quindi fondamentale filtrare le richieste e assicurarsi che sia il momento di analizzare l’input del modulo, se esiste. Ci\u00f2 indica che il pulsante di invio sul modulo \u00e8 stato premuto e che \u00e8 giunto il momento di testare la richiesta.<\/p>\n
Elaborazione dei dati<\/strong><\/h2>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984ccdf3d.jpg\")
<\/a><\/p>\nUna volta che abbiamo completato i nostri controlli, sta a te fare tutto ci\u00f2 che vuoi con i dati del modulo memorizzati nella variabile. Salva l’importo del regalo come variabile.<\/p>\n
Dopo aver aggiornato correttamente il database, \u00e8 necessario reindirizzare l’utente a una pagina. Inoltre, devi creare un messaggio di successo, che puoi creare utilizzando Dashboard.<\/p>\n
Gestione degli errori<\/strong><\/h2>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984dd1514.jpg\")
<\/a><\/p>\nDevi assicurarti di inviare e compilare il modulo in modo appropriato. Se si verifica un errore, ad esempio un campo vuoto o un indirizzo email errato, riceverai un avviso e il modulo non potr\u00e0 essere inviato.<\/p>\n
Successivamente, \u00e8 necessario creare e visualizzare avvisi di errore sotto la casella associata. Crea qualcosa di semplice, ad esempio "Inserisci il tuo nome". Otterrai un modello di pagina modulo completo che puoi utilizzare.<\/p>\n
Considerazioni finali su come creare un modulo in WordPress senza plug-in<\/strong><\/h2>\nL’utilizzo di WordPress per creare un sito Web \u00e8 una scelta molto popolare per molti. Offre varie opzioni per i suoi utenti. All’utente viene offerto di scegliere un tema specifico per il sito, di organizzare ci\u00f2 che si desidera visualizzare sul proprio sito nei minimi dettagli… Consente di creare e aggiungere nuove pagine e contenuti con o senza l’utilizzo dei plug-in.<\/p>\n
WordPress \u00e8 un’ottima scelta per creare un sito Web o un blog. \u00c8 utile per i principianti e anche per le persone che hanno pi\u00f9 familiarit\u00e0 con la creazione di siti Web e l’utilizzo del codice.<\/p>\n
In questo articolo, ti abbiamo presentato come creare un modulo in WordPress senza un plug-in per il tuo sito WordPress.<\/p>\n
La creazione di moduli \u00e8 essenziale quando si progetta un WordPress o qualsiasi sito. Potrebbe essere necessario un po’ pi\u00f9 di conoscenza del codice. Ma ci sono sempre plugin per facilitare il lavoro mentre stai ancora imparando a lavorare con il codice. Sii paziente, impara e creerai fantastici siti Web WordPress o blog.<\/p>\n
Se ti \u00e8 piaciuto leggere questo articolo su come creare un modulo in WordPress senza plug-in, dovresti dare un’occhiata a questo su come nascondere l’autore in WordPress<\/a>.<\/p>\nAbbiamo anche scritto di alcuni argomenti correlati come come incorporare un modulo Google in WordPress<\/a>, come caricare un file HTML in WordPress<\/a>, dove sono archiviate le pagine di WordPress<\/a> e come eliminare i temi di WordPress<\/a>.<\/p>\n
<\/a><\/p>\nCrea una nuova pagina per ospitare il tuo modulo di contatto WordPress. Accedi alla dashboard di WordPress e vai all’area delle impostazioni delle pagine. Il passaggio 2 consiste nel selezionare e fare clic su Aggiungi nuovo. Quando crei una pagina di contatto, scegli un nome significativo. Ad esempio: "Contattaci".<\/p>\n
Modulo di contatto pi\u00f9 semplice, meglio \u00e8. Questo dovrebbe essere il pi\u00f9 semplice possibile. Hai solo bisogno di caselle di nome, e-mail e commenti per creare un semplice modulo di contatto. Dovrebbe essere copiato e inserito nel file page-contact.php.<\/p>\n
Il passaggio 3 consiste nel creare il tuo modulo WordPress dopo aver chiamato la tua pagina dei contatti. Puoi utilizzare il blocco di codice se attivi Bootstrap sul tuo sito WordPress.<\/p>\n Se desideri mantenere il controllo completo sull’aspetto del tuo sito, puoi utilizzare il blocco del codice del modulo senza bootstrap. Dopo aver selezionato il blocco di codice appropriato per il tuo sito WordPress, aggiungi un blocco HTML personalizzato Gutenberg. Incolla il codice del modulo di tua scelta.<\/p>\n Se stai utilizzando una versione precedente di WordPress priva del blocco HTML Gutenberg, vai prima alle impostazioni della scheda Testo. Incolla il codice modulo di tua scelta nell’area.<\/p>\n Non dimenticare di includere l’URL dell’endpoint che hai trovato nella propriet\u00e0 dell’azione del blocco HTML. Di conseguenza, gli invii verranno inviati al modulo che hai creato nella dashboard di Getform.<\/p>\n Il passaggio 1 consiste nel creare un modello per una pagina WordPress. Per fare ci\u00f2, copia il codice da page.php in un nuovo file chiamato page-contact.php. Per garantire che WordPress tratti il \u200b\u200bfile contact.php come un modello di pagina di WordPress, dobbiamo includere un commento nella parte superiore del file.<\/p>\n Ora dobbiamo creare un modulo di contatto WordPress di base. Basta copiare e incollare il codice nel contenuto della voce. Non \u00e8 difficile usare questo codice HTML autoesplicativo per un modulo. Verr\u00e0 utilizzato in seguito per determinare se il modulo \u00e8 stato inviato o meno.<\/p>\n Il modulo creato sembrer\u00e0 carino, ma sar\u00e0 completamente inutile perch\u00e9 non invier\u00e0 alcuna e-mail. Quello che dobbiamo fare \u00e8 dare un’occhiata al modulo che \u00e8 stato inviato e ricontrollare tutti i dati. \u00c8 necessario verificare se i campi sono stati compilati correttamente con i dati corretti.<\/p>\n Se le caselle sono riempite con i dati corretti, otterremo l’indirizzo e-mail dell’amministratore del blog e gli invieremo l’e-mail.<\/p>\n In caso contrario, non verr\u00e0 inviata alcuna e-mail e l’utente avr\u00e0 problemi. Verifica che il modulo sia stato inviato e compilato con dati accurati. Se si verifica un errore, ad esempio un campo vuoto o un indirizzo e-mail errato, viene visualizzato un avviso e il modulo non viene inviato. Devi correggere questi dati e riprovare.<\/p>\n Il nostro modulo \u00e8 ora completamente pronto. Tuttavia, potremmo migliorarlo incorporando la verifica lato client. Per fare ci\u00f2, utilizzeremo jQuery e il plugin jQuery di conferma. Questo plugin \u00e8 fantastico poich\u00e9 ti consente di verificare rapidamente se un modulo \u00e8 stato compilato con dati accurati. Il primo passaggio consiste nel scaricare e installare il plug-in di convalida nel file del tema.<\/p>\n Ora dobbiamo collegare i file Javascript al nostro tema. Successivamente, il plugin jQuery validates confermer\u00e0 il modulo di contatto sul lato client. Come funziona? Seleziona i dati del modulo che hanno la classe CSS richiesta e convalida che siano adeguatamente popolati. In caso contrario, viene visualizzato un avviso e sar\u00e0 necessario correggere tutti i dati inseriti errati.<\/p>\n Sfrutta le capacit\u00e0 di WordPress per salvaguardare l’uso del nostro modulo utilizzando nonce. Le funzioni ti permetteranno di garantire che il contenuto di un modulo di richiesta provenga dal sito corrente e non da un altro. Di conseguenza, non \u00e8 una protezione ideale, sebbene protegga in molte circostanze.<\/p>\n Il suo primo parametro \u00e8 un’azione, mentre il secondo argomento \u00e8 un nome. Queste due parole vengono utilizzate di nuovo pi\u00f9 avanti nel nostro codice per determinare se il nonce inviato corrisponde a questi due input.<\/p>\n \u00c8 importante includere i campi nonce nei moduli di WordPress. I nonces possono essere utilizzati per verificare che un utente intenda eseguire un’azione ed \u00e8 determinante per la protezione contro la falsificazione delle richieste tra siti (CSRF)".<\/p>\n Concentriamoci sulla logica di elaborazione del form: abbandoniamo il template e ci dirigiamo al file functions.php per gestire i dati ricevuti.<\/p>\n \u00c8 necessario connettersi a un’azione WordPress che viene eseguita prima che vengano prodotte le intestazioni delle pagine di WordPress. Serve per reindirizzare potenzialmente l’utente a un’altra pagina dopo aver valutato l’input del modulo.<\/p>\n La prima condizione nella nostra funzione ci assicura che \u00e8 stata inviata una voce di modulo. Esiste un collegamento tra la funzione e l’azione di reindirizzamento del modello. Per questo motivo, ogni volta che \u0161age viene caricato, verr\u00e0 chiamato.<\/p>\n \u00c8 quindi fondamentale filtrare le richieste e assicurarsi che sia il momento di analizzare l’input del modulo, se esiste. Ci\u00f2 indica che il pulsante di invio sul modulo \u00e8 stato premuto e che \u00e8 giunto il momento di testare la richiesta.<\/p>\n Una volta che abbiamo completato i nostri controlli, sta a te fare tutto ci\u00f2 che vuoi con i dati del modulo memorizzati nella variabile. Salva l’importo del regalo come variabile.<\/p>\n Dopo aver aggiornato correttamente il database, \u00e8 necessario reindirizzare l’utente a una pagina. Inoltre, devi creare un messaggio di successo, che puoi creare utilizzando Dashboard.<\/p>\n Devi assicurarti di inviare e compilare il modulo in modo appropriato. Se si verifica un errore, ad esempio un campo vuoto o un indirizzo email errato, riceverai un avviso e il modulo non potr\u00e0 essere inviato.<\/p>\n Successivamente, \u00e8 necessario creare e visualizzare avvisi di errore sotto la casella associata. Crea qualcosa di semplice, ad esempio "Inserisci il tuo nome". Otterrai un modello di pagina modulo completo che puoi utilizzare.<\/p>\n L’utilizzo di WordPress per creare un sito Web \u00e8 una scelta molto popolare per molti. Offre varie opzioni per i suoi utenti. All’utente viene offerto di scegliere un tema specifico per il sito, di organizzare ci\u00f2 che si desidera visualizzare sul proprio sito nei minimi dettagli… Consente di creare e aggiungere nuove pagine e contenuti con o senza l’utilizzo dei plug-in.<\/p>\n WordPress \u00e8 un’ottima scelta per creare un sito Web o un blog. \u00c8 utile per i principianti e anche per le persone che hanno pi\u00f9 familiarit\u00e0 con la creazione di siti Web e l’utilizzo del codice.<\/p>\n In questo articolo, ti abbiamo presentato come creare un modulo in WordPress senza un plug-in per il tuo sito WordPress.<\/p>\n La creazione di moduli \u00e8 essenziale quando si progetta un WordPress o qualsiasi sito. Potrebbe essere necessario un po’ pi\u00f9 di conoscenza del codice. Ma ci sono sempre plugin per facilitare il lavoro mentre stai ancora imparando a lavorare con il codice. Sii paziente, impara e creerai fantastici siti Web WordPress o blog.<\/p>\n Se ti \u00e8 piaciuto leggere questo articolo su come creare un modulo in WordPress senza plug-in, dovresti dare un’occhiata a questo su come nascondere l’autore in WordPress<\/a>.<\/p>\n Abbiamo anche scritto di alcuni argomenti correlati come come incorporare un modulo Google in WordPress<\/a>, come caricare un file HTML in WordPress<\/a>, dove sono archiviate le pagine di WordPress<\/a> e come eliminare i temi di WordPress<\/a>.<\/p>\n<\/a><\/p>\nCreazione di un modello di pagina<\/strong><\/h2>\n
Costruire la forma<\/strong><\/h2>\n
<\/a><\/p>\nPre-elaborazione dei dati<\/strong><\/h2>\n
<\/a><\/p>\nAggiunta di una verifica jQuery<\/strong><\/h2>\n
<\/a><\/p>\nMiglioramento della forma<\/strong><\/h2>\n
<\/a><\/p>\nIntercettazione dati con modello<\/strong><\/h2>\n
Elaborazione dei dati<\/strong><\/h2>\n
<\/a><\/p>\nGestione degli errori<\/strong><\/h2>\n
<\/a><\/p>\nConsiderazioni finali su come creare un modulo in WordPress senza plug-in<\/strong><\/h2>\n