Cum să creezi pagina de contact WordPress

Publicat: 2021-04-21

Pagina de contact WordPress este o parte esențială a oricărui site de afaceri, blog personal sau pagină de portofoliu online. Un formular de contact permite publicului dvs. să vă solicite mai multe detalii despre produsele sau serviciile dvs. Vă permite să creșteți credibilitatea site-ului dvs. și să colectați mai multe detalii despre baza dvs. de clienți. Indiferent de numeroasele beneficii ale unui formular de contact, WordPress nu include acest element în mod implicit.

Acest tutorial oferă instrucțiuni pas cu pas despre crearea unei pagini WordPress de contact cu și fără utilizarea pluginului WordPress pentru pagina de contact.

Cui îi va fi util acest ghid?

Următorul ghid include pași simpli pentru crearea unei pagini de contact WordPress pe cont propriu, chiar dacă nu sunteți încă un expert WordPress, ceea ce va fi util în special pentru webmasterii începători. Folosind acest ghid, vă puteți exersa abilitățile de dezvoltare web. De asemenea, va fi util pentru bloggeri și micro-afaceri care așteaptă cu nerăbdare să-și mențină site-urile WordPress pe cont propriu și să își facă resursele online cât mai utilizabile și informative posibil. Indiferent de cât de priceput sau de experimentat ai fi, tehnicile descrise în acest articol îți vor fi la îndemână.

De ce ar trebui să adăugați o pagină WordPress Contactați-ne pe site-ul dvs.?

Pagina WordPress Contactează-ne este benefică atât pentru proprietarii de afaceri, cât și pentru clienții lor din mai multe motive:

  • Blogul sau site-ul dvs. de afaceri va arăta mai profesionist. În acest fel, publicul tău va ști că te poate contacta ori de câte ori are întrebări sau probleme legate de micronișa ta.
  • Puteți stabili o comunicare mai bună cu publicul dvs., permițând în același timp utilizatorilor să vă acceseze oricând doresc. Trebuie doar să completeze câteva câmpuri furnizate.
  • O pagină de contact WordPress este o sursă valoroasă de informații pentru mărci. Simțiți-vă liber să decideți ce informații vor trebui să partajeze utilizatorii. Pot fi adresele de e-mail ale clienților, numele de utilizator, țările etc.
  • Folosind o pagină de contact, preveniți atacurile de spam.

Având în vedere toate avantajele de mai sus ale utilizării unui plugin WordPress pentru pagina de contact, să discutăm:

  • Ce plugin să alegeți pentru a crea o pagină de contact WordPress;
  • Cum să creați o pagină de contact pentru WordPress folosind un șablon.
Cum să creați o pagină de contact în WordPress cu un plugin

Există multe pluginuri WordPress disponibile pentru paginile de contact, așa că este ușor să te pierzi în abundența lor bogată. Am ales Formular de contact - WordPress Contact Form Plugin pentru a facilita luarea deciziilor care facilitează adăugarea unui formular de contact pe site-ul dvs.

Este un plugin WordPress premium de la Codecanyon la prețul de 24 USD. Spre deosebire de pluginurile WordPress gratuite, care sunt ușor de găsit printr-o simplă căutare prin tabloul de bord WP, ​​trebuie să descărcați arhiva pluginului pe computer și să o încărcați ulterior pe site-ul dvs. Odată terminat, puteți alege dintre mai multe moduri de a adăuga formularul de contact pe site-ul dvs.:

  • Utilizați un cod scurt WordPress pe care îl puteți adăuga la orice pagină a site-ului dvs. WordPress.
  • Pluginul include elementul Visual Composer pentru a crea o pagină de contact în modul drag-and-drop.
  • De asemenea, puteți utiliza un widget pentru a adăuga un formular de contact în bara laterală sau subsol.

Este posibil să întâlniți multe alte pluginuri de formulare de contact în directorul de pluginuri WordPress. Multe dintre ele sunt gratuite și ușor de utilizat. Dacă decideți să creați o pagină de contact folosind un plugin dedicat, nu ar trebui să vă confruntați cu probleme.

Cum să creezi o pagină de contact în WordPress fără un plugin

Să vedem cum să creăm o pagină de contact complet funcțională în WordPress. Vom adăuga un formular de contact fără niciun plugin. În schimb, vom crea un șablon personalizat de pagină de contact pentru a ne atinge obiectivul.

Ce sunt șabloanele de pagină WordPress?

În WordPress, acestea sunt fișiere php responsabile de aspectul și funcționalitatea unei pagini web (vorbim despre pagini și nu despre postări). Toate temele WordPress vin cu un fișier Page.php care este șablonul implicit de pagină. Șablonul de pagină este o caracteristică extrem de puternică care le permite dezvoltatorilor să personalizeze temele în funcție de nevoile lor. În acest tutorial, vom verifica cum să creați un șablon personalizat pentru a ne contacta.

Pasul 1: Creați un șablon Contactați-ne

Navigați la folderul Theme, Creați un fișier gol și denumiți-l contact.php (puteți folosi un alt nume). Fișierul php va conține Formularul HTML Markup și codul PHP pentru procesarea datelor introduse de utilizator. Scrieți următorul cod în partea de sus a fișierului php.

 <?php /* Nume șablon: Contactați-ne */ ?>

WordPress folosește acest bloc de comentarii pentru a identifica în mod unic șablonul de pagină personalizată. Apoi, copiați și inserați următorul cod în fișierul contact.php:

 <?php
/*
Nume șablon: Contactați-ne
 */
get_header(); ?>
<div id="primar">
<div id="content" role="main">
</div><!-- #conținut -->
</div><!-- #primar -->
<?php get_footer(); ?>

Cu acest cod, adăugăm structură șablonului de pagină de contact. Acum, șablonul nostru are secțiuni de subsol și antet. În pasul următor, să vedem cum să adăugați secțiunea de conținut pe pagina noastră.

Pasul 2: Adăugarea formularului HTML

Un formular de contact este un element simplu cu câmpuri standard. În acest ghid, nu ne vom concentra pe partea de styling. Pur și simplu adăugați următorul cod la Content Div, adică (div)

 <form method="post" id="contactus_form">
Numele dvs.:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
E-mailul dvs.:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Subiect:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Lăsați un mesaj:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Trimite"/>
</form>

Codul se explică de la sine. Am folosit patru câmpuri în formular - Nume, E-mail, Subiect și Text. În pasul următor, vom adăuga un cod php pentru a procesa introducerea formularului.

Pasul 3: Adăugați cod PHP pentru procesarea introducerii formularului.

Codul PHP va gestiona două părți:

  • Validare.
  • Trimiterea e-mailului real.
Validare

Folosim două tipuri de validare:

  • Câmp obligatoriu: - acesta va verifica dacă câmpul este completat sau nu.
  • Format câmp: aceasta va verifica dacă valoarea introdusă este în formatul dorit sau nu.

    • Vom aplica ambele condiții în toate cele 3 câmpuri de introducere, cu excepția „Lasă-ne un mesaj”.

    Logica de validare

    În logica noastră de validare, am folosit o variabilă flag. Valoarea sa va fi fie 0, fie 1. Dacă validarea noastră are succes, steag-ul va fi setat la 1. Dacă ceva nu merge bine, valoarea flag-ului este setată la 0. Logica destul de standard. Iată codul pentru a implementa această logică.

    Validarea aplicată câmpului de nume
     if($_POST['numele tău']=='')
{$flag=0;
echo „Vă rugăm să introduceți numele<br>”;
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['numele tău']))
{$flag=0;echo „Vă rugăm să introduceți un nume valid<br>”;}
    Validarea aplicată câmpului de e-mail
     if($_POST['email']=='')
{
$flag=0;echo „Vă rugăm să introduceți adresa de e-mail<br>”;
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['e-mail']))
{
$flag=0;echo „Vă rugăm să introduceți un e-mail valid<br>”;
}
    Validarea aplicată câmpului Subiect
     if($_POST['subject']=='')
{
$flag=0;echo „Vă rugăm să introduceți subiectul<br>”;
}
    Validarea aplicată câmpului mesaj

    Nu este nevoie să aplicați validarea câmpului de format pentru câmpul casetei de mesaj, așa cum am menționat deja.

     if($_POST['mesaj']=='')
{
$flag=0;echo „Vă rugăm să introduceți mesajul”;
}

    Toate bucățile de cod sunt destul de explicite. Pur și simplu asigurați-vă că câmpurile de introducere nu sunt goale și au formatul potrivit (nu sunt utilizate caractere speciale).

    Procesarea formularului de intrare

    Acum, intrarea noastră este validată corespunzător. Trebuie să anunțăm administratorul. Următorul cod va procesa datele formularului și va trimite prin e-mail detalii precum Nume, Subiect e-mail și Mesaj către administrator.

    Vom folosi funcția wp_mail pentru a trimite e-mailuri. Pentru a afla mai multe despre wp_mail, faceți clic aici.

     <?php
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[numele dvs.])." v-a trimis un mesaj de la ".get_option("nume blog"),stripslashes(trim($_POST[message])),"De la: ". trim($_POST[numele tău])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo „E-mail trimis cu succes”;
}
?>
    Codul final al șablonului Contactați-ne

    Versiunea finală a codului conținută în fișierul php șablon contact-ne arată astfel:

     <?php
/* Nume șablon: Contactați-ne */
get_header(); ?>
<div id="primar">
<div id="content" role="main">
<font color="#FF0000">
<?php
if(isset($_POST['trimite']))
{
$steagul=1;
if($_POST['numele tău']=='')
{
$flag=0;
echo „Vă rugăm să introduceți numele<br>”;
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['numele tău']))
{
$flag=0;
echo „Vă rugăm să introduceți un nume valid<br>”;
}
if($_POST['email']=='')
{
$flag=0;
echo „Vă rugăm să introduceți e-mail<br>”;
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['e-mail']))
{
$flag=0;
echo „Vă rugăm să introduceți un e-mail valid<br>”;
}
if($_POST['subject']=='')
{
$flag=0;
echo „Vă rugăm să introduceți subiectul<br>”;
}
if($_POST['mesaj']=='')
{
$flag=0;
echo „Vă rugăm să introduceți mesajul”;
}
if ( gol ($_POST) )
{
print „Ne pare rău, nonceul tău nu a fost verificat.”;
Ieșire;
}
altfel
{
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[numele dvs.])." v-a trimis un mesaj de la ".get_option("nume blog"),stripslashes(trim($_POST[message])),"De la: ". trim($_POST[numele tău])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo „E-mail trimis cu succes”;
}
}
}
?>
</font>
<form method="post" id="contactus_form">
Numele dvs.:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
E-mailul dvs.:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Subiect:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Lăsați un mesaj:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Trimite"/>
</form>
</div><!-- #conținut --></div><!-- #primar -->
<?php get_footer(); ?>
    Captură de ecran finală a paginii Contactați-ne.

    Așa va arăta formularul tău de contact

    Cum să creați WordPress Contactați-ne Pagina 1

    Pasul 4: Utilizarea șablonului Contactați-ne

    Deschideți tabloul de bord WordPress. Creați o pagină nouă și nu uitați să selectați șablonul „Contactați-ne” în caseta atributelor paginii. Vedeți instantaneul de mai jos.

    Cum să creați WordPress Contactați-ne Pagina 2

    Acum, publicați pagina și adăugați-o în meniu. Drept urmare, obțineți o pagină de contact strălucitoare, complet funcțională, pe care ați creat-o fără a utiliza un plugin. Există multe alte lucruri pe care le puteți adăuga la pagina dvs. de contact WordPress. Un lucru care îmi vine în minte este să adăugați un captcha sau o altă validare pentru a preveni spam-ul.