Come creare un modulo personalizzato nel sito Web o nel blog di WordPress

Se hai appena impostato il tuo primo blog, ormai sapresti che viene fornito con un modulo di contatto predefinito: la maggior parte dei temi premium ne ha uno. Il punto è che i moduli di contatto sono essenziali quando si tratta del tuo pubblico che cerca di entrare in contatto con te per un motivo o per l'altro.

Inoltre, con i moduli di contatto, il coinvolgimento degli utenti dovrebbe aumentare, motivo per cui è essenziale utilizzarne uno sul tuo blog. Ma poi di nuovo, puoi anche utilizzare plug-in di moduli come Contact form 7, modulo di contatto rapido e sicuro tra gli altri per convincere i tuoi utenti a contattarti.

Inoltre, questi moduli di contatto dovrebbero consentirti di connetterti direttamente con il tuo pubblico e anche di semplificare il tuo marketing.

Videotutorial

Il problema, tuttavia, è che la maggior parte dei moduli di contatto predefiniti e persino i plug-in hanno lo stesso formato stereotipato, motivo per cui potresti voler optare per qualcosa di più specializzato sulla falsariga della creazione del tuo modulo di contatto su WordPress.

Se ti capita di essere abbastanza esperto in php, dovresti essere in grado di farlo con facilità, motivo per cui è essenziale leggere il resto dell'articolo in modo da poter impostare il tuo modulo personalizzato che i tuoi utenti possono utilizzare, per connettersi con te.

1. Progettazione del modulo:

Puoi creare un modello di pagina separato o scrivere del codice HTML nella tua pagina WordPress per questo, e poiché il successivo è infinitamente più semplice, ha più senso optare per lo stesso.

Puoi creare un modulo personalizzato in WordPress seguendo i passaggi elencati di seguito. E come sempre, ricorda di eseguire il backup delle tue informazioni prima di iniziare.

• Vai a Pagine -> Aggiungi nuovo opzione fornita nella dashboard di WordPress.
• Assegna il titolo della pagina che desideri, ad esempio "Informazioni cliente" o "Dettagli cliente".
• Ora vai alla scheda "HTML" per scrivere il codice HTML.
• crea un modulo personalizzato in WordPress che desideri.
• Aggiungi un metodo "POST", assegnagli un nome "customer_details"
• Aggiungi una funzione "form_validation" nella proprietà onsubmit per aggiungere alcune convalide JavaScript in un secondo momento e dare l'azione.
• Action è il file PHP che verrà eseguito al momento dell'invio del modulo.
• A questo punto, potresti voler aggiungere alcuni campi nel modulo come nome, e-mail, sesso, età ecc. e chiudere il modulo.

Il codice finale dovrebbe assomigliare a questo

Il tuo nome: <br />
La tua email: <br />
Sesso: maschio femmina<br />
La tua età: <br />

2. Convalida:

Ora che hai progettato il modulo, è tempo di convalidare lo stesso. Non fidarti mai dei dati dell'utente "così com'è" e convalidali sempre prima di inserirli nel tuo database.

Basta seguire il codice elencato di seguito per una rapida convalida e questo dovrebbe fare il trucco. Annotare questo codice di convalida e chiuderlo alla fine.

funzione form_validation() {
/* Controlla il nome del cliente per l'invio in bianco*/
var nome_cliente = document.forms[“dettagli_cliente”][“nome_cliente”].valore;
if (nome_cliente == “” || nome_cliente == nullo) {
alert("Il campo del nome deve essere compilato.");
restituire falso;
}/* Controlla l'e-mail del cliente per il formato non valido */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var posizione_punto = email_cliente.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert("L'indirizzo email indicato non è valido.");
restituire falso;
}
}

Questo controllerà e convaliderà il nome del cliente e l'indirizzo e-mail. Aggiungi questo codice dopo . Quindi, il codice completo in WordPress sarà simile a:

Il tuo nome: <br />
La tua email: <br />
Sesso: maschio femmina<br />
La tua età: <br />


funzione form_validation() {
/* Controlla il nome del cliente per l'invio in bianco*/
var nome_cliente = document.forms[“dettagli_cliente”][“nome_cliente”].valore;
if (nome_cliente == “” || nome_cliente == nullo) {
alert("Il campo del nome deve essere compilato.");
restituire falso;
}
/* Controlla l'e-mail del cliente per il formato non valido */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var posizione_punto = email_cliente.lastIndexOf(“.”);
if (at_position&lt;1 || dot_position=customer_email.length) {
alert("L'indirizzo email indicato non è valido.");
restituire falso;
}
}

Ora, tutto ciò che ti resta da fare è pubblicare la pagina e questo dovrebbe effettivamente fare il trucco.

3. Script lato server:

Ricordi la parte in cui abbiamo menzionato "customer details.php"? Bene, è ora che ci occupiamo anche di quella parte.
Apri Blocco note o il tuo editor di testo preferito e annota il codice spiegato di seguito e salva il file come customer-details.php sul desktop.

Innanzitutto, dichiara alcune variabili denominate $customer_name, $customer_email, $customer_sex, $customer_age e assegna i valori ai rispettivi campi inviati dal modulo HTML.

Ad esempio $customer_name = $_POST[“customer_name”] catturerà il valore dal modulo HTML tramite il metodo POST e lo assegnerà alla variabile $customer_name.

Ora devi fare lo stesso anche con altri valori. Ora devi connettere il file PHP con il database usando mysqli_connect. Se non ricordi la configurazione del database, puoi trovare queste impostazioni dall'installazione di WordPress.

Scarica il file wp-config.php dalla tua installazione di WordPress sul desktop usando il tuo client FTP preferito come FileZilla. Apri il wp-config.php usando il tuo editor di testo preferito come Blocco note e troverai le impostazioni del database richieste.

Dopo la connessione al database, inserisci i dati raccolti dal modulo nel database di WordPress utilizzando mysqli_query.

C'è un passaggio facoltativo in questo codice PHP.

Se vuoi mostrare un messaggio all'utente dopo l'invio del modulo o vuoi reindirizzare l'utente a un'altra pagina puoi aggiungere un'intestazione ("Posizione: ") al codice. Dovrai creare una pagina di successo per questo in seguito.

Quindi, apparirà il completo customer-details.php

// Ottieni dati
$nome_cliente = $_POST["nome_cliente"];
$email_cliente = $_POST["email_cliente"];
$sesso_cliente = $_POST["sesso_cliente"];
$età_cliente = $_POST[“età_cliente”];// Connessione al database
$conn = mysqli_connect(“Host database”,”Nome utente database”,”Password database”,”Nome database”);
se(!$conn) {
die('Problema nella connessione al database: ' .mysql_error());
}
// Inserimento dati nel database
$query = “INSERT INTO 'Database Name'.'Table Name' ( 'customer_name', 'customer_email', 'customer_sex', 'customer_age' ) VALUES ( $customer_name, $customer_email, $customer_sex, $customer_age)”;
mysqli_query($conn, $query);

// Reindirizzamento alla pagina di successo
header("Posizione: ");

Carica questo file customer-details.php nella cartella del tema utilizzando il tuo client FTP preferito.

4. Successo:

La pagina di successo è quella che un utente può visualizzare dopo aver inviato il modulo con i suoi dati; puoi impostare questa pagina per visualizzare un messaggio personalizzato come "i tuoi dati sono stati inviati correttamente" o qualcosa di simile.

Il punto è che puoi utilizzare il codice pubblicato di seguito per impostare la tua pagina di successo completa di messaggio personalizzato.

Crea una pagina WordPress, assegnagli un titolo come "Pagina di successo", assicurati di abbinare lo slug della pagina a "Pagina di successo" o qualunque cosa tu abbia indicato nell'intestazione ("Posizione"). Ora scrivi un messaggio, come "grazie per la collaborazione" o qualcosa del genere e dovresti essere a posto.

Puoi sempre ricaricare il tuo sito per controllare e vedere se il modulo di contatto funziona come dovrebbe e in quasi tutti i casi dovrebbe funzionare bene. Tuttavia, se riscontri alcuni problemi, puoi sempre verificarlo online o chiedere a un esperto di configurare il tuo modulo personalizzato.

È importante che il tuo modulo di contatto non appaia troppo aggressivo o invadente, in modo che possa aiutare ad aumentare i tassi di conversione.

Inoltre, puoi anche utilizzare questi moduli personalizzati per raccogliere dati e informazioni sui tuoi clienti che puoi utilizzare ulteriormente per ottimizzare le tue campagne di marketing.

Questo è uno dei motivi principali per cui i moduli, in particolare i moduli di contatto, sono essenziali per tutti i blog e, soprattutto, puoi utilizzare la codifica qui elencata non solo per creare un modulo personalizzato in WordPress, ma in realtà, creare qualsiasi tipo di modulo di contatto con parametri diversi.

Come suggerito in precedenza, è sempre una buona idea eseguire un backup completo prima di armeggiare con i file principali.

Una volta che il modulo è attivo e funzionante, dovresti essere in grado di verificare se il modulo in questione convalida i dati come è programmato per farlo prima di inserirlo nel tuo database.

Nel complesso, i moduli di contatto sono piuttosto essenziali sia per i blog che per i siti Web, poiché aiutano i clienti a contattarti e possono portare a tassi di conversione migliori a lungo termine. Quindi assicurati di provare i passaggi sopra elencati e il tuo modulo di contatto personalizzato dovrebbe funzionare correttamente.