Come creare una pagina dei contatti di WordPress

Pubblicato: 2021-04-21

La pagina dei contatti di WordPress è una parte essenziale di qualsiasi sito aziendale, blog personale o pagina di portfolio online. Un modulo di contatto consente al tuo pubblico di chiederti maggiori dettagli sui tuoi prodotti o servizi. Ti consente di aumentare la credibilità del tuo sito e raccogliere maggiori dettagli sulla tua base di clienti. Indipendentemente dai numerosi vantaggi di un modulo di contatto, WordPress non include questo elemento per impostazione predefinita.

Questo tutorial fornisce istruzioni dettagliate sulla creazione di una pagina WordPress dei contatti con e senza l'utilizzo del plug-in WordPress della pagina dei contatti.

A chi sarà utile questa guida?

La seguente guida include semplici passaggi per creare una pagina di contatto di WordPress da soli anche se non sei ancora un esperto di WordPress, il che sarà particolarmente utile per i webmaster principianti. Utilizzando questa guida, puoi esercitare le tue capacità di sviluppo web. Sarà anche utile per i blogger e le microimprese che non vedono l'ora di mantenere i propri siti WordPress da soli e rendere le proprie risorse online il più utilizzabili e informative possibile. Non importa quanto abile o esperto tu sia, le tecniche descritte in questo articolo ti torneranno utili.

Perché dovresti aggiungere una pagina di contatto di WordPress al tuo sito?

La pagina di contatto di WordPress è vantaggiosa sia per gli imprenditori che per i loro clienti per molte ragioni:

  • Il tuo blog o sito aziendale avrà un aspetto più professionale. In questo modo, il tuo pubblico saprà che può raggiungerti ogni volta che ha domande o problemi relativi alla tua micro-nicchia.
  • Puoi stabilire una migliore comunicazione con il tuo pubblico consentendo agli utenti di accedervi quando vogliono. Devono solo compilare alcuni campi forniti.
  • Una pagina di contatto di WordPress è una preziosa fonte di informazioni per i marchi. Sentiti libero di decidere quali informazioni gli utenti dovranno condividere. Potrebbero essere gli indirizzi e-mail, i nomi utente, i paesi dei clienti, ecc.
  • Utilizzando una pagina di contatto, previeni gli attacchi di spam.

Considerando tutti i vantaggi di cui sopra dell'utilizzo di un plug-in WordPress per la pagina dei contatti, discutiamo:

  • Quale plugin scegliere per creare una pagina di contatto di WordPress;
  • Come creare una pagina di contatto per WordPress utilizzando un modello.
Come creare una pagina di contatto in WordPress con un plug-in

Sono disponibili molti plugin di WordPress per le pagine di contatto, quindi è facile perdersi nella loro ricca abbondanza. Abbiamo scelto Contact Form - WordPress Contact Form Plugin per facilitare il processo decisionale che rende facile aggiungere un modulo di contatto al tuo sito.

È un plug-in WordPress premium di Codecanyon al prezzo di $ 24. A differenza dei plugin gratuiti di WordPress che sono facili da trovare attraverso una semplice ricerca tramite dashboard WP, ​​devi scaricare l'archivio del plugin sul tuo PC e caricarlo successivamente sul tuo sito. Una volta fatto, puoi scegliere tra diversi modi per aggiungere il modulo di contatto al tuo sito:

  • Usa uno shortcode di WordPress che puoi aggiungere a qualsiasi pagina del tuo sito WordPress.
  • Il plug-in include l'elemento Visual Composer per creare una pagina di contatto in modalità drag-and-drop.
  • Puoi anche utilizzare un widget per aggiungere un modulo di contatto alla barra laterale o al piè di pagina.

Potresti imbatterti in molti altri plug-in per moduli di contatto nella directory dei plug-in di WordPress. Molti di loro sono gratuiti e facili da usare. Se decidi di creare una pagina di contatto utilizzando un plugin dedicato, non dovresti avere problemi.

Come creare una pagina di contatto in WordPress senza un plug-in

Vediamo come creare una pagina Contattaci completamente funzionale in WordPress. Aggiungeremo un modulo di contatto senza plug-in. Invece, creeremo un modello di pagina di contatto personalizzato per raggiungere il nostro obiettivo.

Cosa sono i modelli di pagina di WordPress?

In WordPress, si tratta di file php responsabili del layout e della funzionalità di una pagina Web (stiamo parlando di pagine e non di post). Tutti i temi WordPress sono dotati di un file Page.php che è il modello di pagina predefinito. Il modello di pagina è una funzionalità estremamente potente che consente agli sviluppatori di personalizzare i temi in base alle proprie esigenze. In questo tutorial, verificheremo come creare un modello di contatto personalizzato.

Passaggio 1: crea un modello Contattaci

Vai alla cartella del tema, crea un file vuoto e chiamalo contact.php (puoi usare un nome diverso). Il file php conterrà il markup HTML del modulo e il codice PHP per l'elaborazione dell'input dell'utente. Scrivi il seguente codice nella parte superiore del file php.

 <?php /* Nome modello: Contattaci */ ?>

WordPress utilizza questo blocco di commenti per identificare in modo univoco il nostro modello di pagina personalizzata. Quindi, copia e incolla il seguente codice nel file contact.php:

 <?php
/*
Nome modello: Contattaci
 */
get_header(); ?>
<div id="primario">
<div id="content" role="main">
</div><!-- #contenuto -->
</div><!-- #primario -->
<?php get_footer(); ?>

Con questo codice, aggiungiamo una struttura al modello di pagina dei contatti. Ora, il nostro modello ha sezioni di piè di pagina e di intestazione. Nel passaggio successivo, vediamo come aggiungere la sezione dei contenuti alla nostra pagina.

Passaggio 2: aggiunta di un modulo HTML

Un modulo di contatto è un semplice elemento con campi standard. In questa guida non ci concentreremo sulla parte stilistica. Aggiungi semplicemente il seguente codice a Content Div ie (div)

 <form method="post" id="contactus_form">
Il tuo nome:<input type="text" name="tuonome" id="tuonome" righe="1" value="" />
<br /><br />
La tua email:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Oggetto:<input type="text" name="subject" id="subject" righe="1" value=""></p>
<br /><br />
Lascia un messaggio:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Send"/>
</modulo>

Il codice è abbastanza autoesplicativo. Abbiamo utilizzato quattro campi nel modulo: nome, e-mail, oggetto e testo. Nel passaggio successivo, aggiungeremo del codice php per elaborare l'input del modulo.

Passaggio 3: aggiungi il codice PHP per elaborare l'input del modulo.

Il codice PHP gestirà due parti:

  • Convalida.
  • Invio della posta effettiva.
Convalida

Usiamo due tipi di validazione:

  • Campo obbligatorio: - questo controllerà se il campo è compilato o meno.
  • Formato campo: verifica se il valore inserito è nel formato desiderato o meno.

    • Applicheremo entrambe le condizioni in tutti e 3 i campi di input ad eccezione di "Lasciaci un messaggio" .

    Logica di convalida

    Nella nostra logica di validazione, abbiamo utilizzato una variabile flag. Il suo valore sarà 0 o 1. Se la nostra convalida ha esito positivo, il flag verrà impostato su 1. Se qualcosa va storto, il valore del flag verrà impostato su 0. Logica piuttosto standard. Ecco il codice per implementare questa logica.

    Convalida applicata al campo Nome
     if($_POST['tuonome']=='')
{$bandiera=0;
echo "Inserisci il tuo nome<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['tuonome']))
{$flag=0;echo "Inserisci un nome valido<br>";}
    Convalida applicata al campo e-mail
     if($_POST['email']=='')
{
$flag=0;echo "Inserisci e-mail<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$flag=0;echo "Inserisci e-mail valida<br>";
}
    Convalida applicata al campo Oggetto
     if($_POST['soggetto']=='')
{
$flag=0;echo "Inserisci l'oggetto<br>";
}
    Convalida applicata al campo messaggio

    Non è necessario applicare la convalida del campo del formato per il campo della finestra di messaggio come abbiamo già menzionato.

     if($_POST['message']=='')
{
$flag=0;echo "Inserisci messaggio";
}

    Tutti i pezzi di codice sono abbastanza autoesplicativi. Assicurati semplicemente che i campi di input non siano vuoti e presentino il formato corretto (non vengono utilizzati caratteri speciali).

    Elaborazione dell'input del modulo

    Ora, il nostro input è adeguatamente convalidato. Dobbiamo avvisare l'amministratore. Il codice seguente elaborerà i dati del modulo e invierà via e-mail i dettagli come Nome, Oggetto e-mail e Messaggio all'amministratore.

    Useremo la funzione wp_mail per l'invio di email. Per saperne di più su wp_mail, clicca qui.

     <?php
se($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[tuonome])." ti ha inviato un messaggio da ".get_option("blogname"),stripslashes(trim($_POST[messaggio])),"Da: ". trim($_POST[tuonome])." <".trim($_POST[email]).">rnRispondi a:".trim($_POST[email]));
echo "Posta inviata con successo";
}
?>
    Codice finale del modello Contattaci

    La versione finale del codice contenuto nel file php del modello di contatto ha il seguente aspetto:

     <?php
/* Nome modello: Contattaci */
get_header(); ?>
<div id="primario">
<div id="content" role="main">
<font color="#FF0000">
<?php
if(isset($_POST['submit']))
{
$bandiera=1;
if($_POST['tuonome']=='')
{
$bandiera=0;
echo "Inserisci il tuo nome<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['tuonome']))
{
$bandiera=0;
echo "Inserisci un nome valido<br>";
}
if($_POST['email']=='')
{
$bandiera=0;
echo "Inserisci e-mail<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$bandiera=0;
echo "Inserisci e-mail valida<br>";
}
if($_POST['soggetto']=='')
{
$bandiera=0;
echo "Inserisci l'oggetto<br>";
}
if($_POST['message']=='')
{
$bandiera=0;
echo "Inserisci messaggio";
}
se ( vuoto($_POST) )
{
print 'Spiacente, la tua nonce non ha verificato.';
Uscita;
}
altro
{
se($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[tuonome])." ti ha inviato un messaggio da ".get_option("blogname"),stripslashes(trim($_POST[messaggio])),"Da: ". trim($_POST[tuonome])." <".trim($_POST[email]).">rnRispondi a:".trim($_POST[email]));
echo "Posta inviata con successo";
}
}
}
?>
</font>
<form method="post" id="contactus_form">
Il tuo nome:<input type="text" name="tuonome" id="tuonome" righe="1" value="" />
<br /><br />
La tua email:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Oggetto:<input type="text" name="subject" id="subject" righe="1" value=""></p>
<br /><br />
Lascia un messaggio:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Send"/>
</modulo>
</div><!-- #contenuto --></div><!-- #primario -->
<?php get_footer(); ?>
    Screenshot finale della pagina Contattaci.

    Ecco come apparirà il tuo modulo di contatto

    Come creare WordPress Contattaci Pagina 1

    Passaggio 4: utilizzo del modello Contattaci

    Apri la dashboard di WordPress. Crea una nuova Pagina e non dimenticare di selezionare il modello "Contattaci" all'interno della casella degli attributi della pagina. Vedi l'istantanea qui sotto.

    Come creare WordPress Contattaci Pagina 2

    Ora pubblica la pagina e aggiungila al menu. Di conseguenza, ottieni una pagina di contatto lucida e completamente funzionale che hai creato senza utilizzare un plug-in. Ci sono molte altre cose che puoi aggiungere alla tua pagina dei contatti di WordPress. Una cosa che mi viene in mente è aggiungere un captcha o qualche altra convalida per prevenire lo spam.