Cómo crear una página de contacto de WordPress

La página de contacto de WordPress es una parte esencial de cualquier sitio comercial, blog personal o página de cartera en línea. Un formulario de contacto le permite a su audiencia solicitarle más detalles sobre sus productos o servicios. Le permite aumentar la credibilidad de su sitio y recopilar más detalles sobre su base de clientes. Independientemente de los muchos beneficios de un formulario de contacto, WordPress no incluye este elemento por defecto.

Este tutorial brinda instrucciones paso a paso sobre cómo crear una página de WordPress de contacto con y sin usar el complemento de WordPress de la página de contacto.

¿Para quién será útil esta guía?

La siguiente guía incluye pasos sencillos para crear una página de contacto de WordPress por su cuenta, incluso si aún no es un experto en WordPress, lo que será especialmente útil para los webmasters principiantes. Con esta guía, puede practicar sus habilidades de desarrollo web. También será útil para blogueros y microempresas que deseen mantener sus sitios de WordPress por su cuenta y hacer que sus recursos en línea sean lo más utilizables e informativos posible. No importa cuán hábil o experimentado sea, las técnicas descritas en este artículo le resultarán útiles.

¿Por qué debería agregar una página de contacto de WordPress a su sitio?

La página de contacto de WordPress es beneficiosa tanto para los dueños de negocios como para sus clientes por muchas razones:

• Su blog o sitio de negocios se verá más profesional. De esa manera, su audiencia sabrá que pueden comunicarse con usted cada vez que tengan preguntas o problemas relacionados con su micronicho.
• Puede establecer una mejor comunicación con su audiencia mientras permite que los usuarios accedan a usted cuando lo deseen. Solo necesitan completar algunos campos provistos.
• Una página de contacto de WordPress es una valiosa fuente de información para las marcas. Siéntase libre de decidir qué piezas de información necesitarán compartir los usuarios. Pueden ser las direcciones de correo electrónico de los clientes, los nombres de usuario, los países, etc.
• Al usar una página de contacto, previene los ataques de spam.

Teniendo en cuenta todas las ventajas anteriores de usar un complemento de WordPress para la página de contacto, discutamos:

• Qué complemento elegir para crear una página de contacto de WordPress;
• Cómo crear una página de contacto para WordPress usando una plantilla.

Cómo crear una página de contacto en WordPress con un complemento

Hay muchos complementos de WordPress de página de contacto disponibles, por lo que es fácil perderse en su rica abundancia. Hemos elegido Formulario de contacto - Complemento de formulario de contacto de WordPress para facilitar la toma de decisiones que facilita agregar un formulario de contacto a su sitio.

Es un complemento premium de WordPress de Codecanyon con un precio de $24. A diferencia de los complementos gratuitos de WordPress que son fáciles de encontrar a través de una simple búsqueda a través del panel de control de WP, debe descargar el archivo del complemento en su PC y luego cargarlo en su sitio. Una vez hecho esto, puede elegir entre varias formas de agregar el formulario de contacto a su sitio:

• Use un código abreviado de WordPress que puede agregar a cualquier página de su sitio de WordPress.
• El complemento incluye el elemento Visual Composer para crear una página de contacto en el modo de arrastrar y soltar.
• También puede usar un widget para agregar un formulario de contacto a la barra lateral o al pie de página.

Puede encontrar muchos otros complementos de formularios de contacto en el directorio de complementos de WordPress. Muchos de ellos son gratuitos y fáciles de usar. Si decide crear una página de contacto con un complemento dedicado, no debería tener ningún problema.

Cómo crear una página de contacto en WordPress sin un complemento

Veamos cómo crear una página de contacto completamente funcional en WordPress. Agregaremos un formulario de contacto sin complementos. En su lugar, crearemos una plantilla de página de contacto personalizada para lograr nuestro objetivo.

¿Qué son las plantillas de página de WordPress?

En WordPress, estos son archivos php responsables del diseño y la funcionalidad de una página web (estamos hablando de páginas y no de publicaciones). Todos los temas de WordPress vienen con un archivo Page.php que es la plantilla de página predeterminada. Plantilla de página es una característica extremadamente poderosa que permite a los desarrolladores personalizar temas según sus necesidades. En este tutorial, veremos cómo crear una plantilla de contacto personalizada.

Paso 1: cree una plantilla de contacto

Navegue a la carpeta Tema, cree un archivo en blanco y asígnele el nombre contact.php (puede usar un nombre diferente). El archivo php contendrá el marcado HTML del formulario y el código PHP para procesar la entrada del usuario. Escriba el siguiente código en la parte superior del archivo php.

 <?php /* Nombre de la plantilla: Contáctenos */ ?>

WordPress usa este bloque de comentarios para identificar nuestra plantilla de página personalizada de forma única. A continuación, copie y pegue el siguiente código en el archivo contact.php:

 <?php
/*
Nombre de la plantilla: Contáctenos
 */
obtener_encabezado(); ?>
<div id="primario">
<div id="contenido" rol="principal">
</div><!-- #contenido -->
</div><!-- #principal -->
<?php obtener_pie de página(); ?>

Con este código, agregamos estructura a la plantilla de la página de contacto. Ahora, nuestra plantilla tiene secciones de pie de página y encabezado. En el siguiente paso, veamos cómo agregar la sección de contenido a nuestra página.

Paso 2: Agregar formulario HTML

Un formulario de contacto es un elemento simple con campos estándar. En esta guía, no nos centraremos en la parte de estilo. Simplemente agregue el siguiente código a Content Div ie (div)

 <método de formulario="publicación" id="formulario_de_contacto">
Tu nombre:<input type="text" name="tunombre" id="tunombre" rows="1" value="" />
<br /><br />
Su correo electrónico:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Asunto:<tipo de entrada="texto" nombre="asunto" id="asunto" filas="1" valor=""></p>
<br /><br />
Deje un mensaje: <textarea name="mensaje" id="mensaje" ></textarea>
<br /><br />
<tipo de entrada="enviar" nombre="enviar" id="enviar" valor="Enviar"/>
</formulario>

El código es bastante autoexplicativo. Hemos utilizado cuatro campos en el formulario: nombre, correo electrónico, asunto y texto. En el siguiente paso, agregaremos un código php para procesar la entrada del formulario.

Paso 3: agregue el código PHP para procesar la entrada del formulario.

El código PHP manejará dos partes:

• Validación.
• Envío del correo real.

Validación

Utilizamos dos tipos de validación:

• Campo obligatorio: esto verificará si el campo está lleno o no.
• Formato de campo: esto verificará si el valor ingresado está en el formato deseado o no.

Aplicaremos ambas condiciones en los 3 campos de entrada excepto "Déjanos un mensaje".

Lógica de validación

En nuestra lógica de validación, hemos utilizado una variable indicadora. Su valor será 0 o 1. Si nuestra validación es exitosa, el indicador se establecerá en 1. Si algo sale mal, el valor del indicador se establecerá en 0. Lógica bastante estándar. Aquí está el código para implementar esta lógica.

Validación aplicada al campo de nombre

 if($_POST['tunombre']=='')
{$bandera=0;
echo "Por favor ingrese su nombre<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['tunombre']))
{$flag=0;echo "Ingrese un nombre válido<br>";}

Validación aplicada al campo de correo electrónico

 si ($_POST['correo']=='')
{
$flag=0;echo "Ingrese el correo electrónico<br>";
}
más si(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['correo electrónico']))
{
$flag=0;echo "Ingrese un correo electrónico válido<br>";
}

Validación aplicada al campo Asunto

 si ($_POST['asunto']=='')
{
$flag=0;echo "Ingrese el asunto<br>";
}

Validación aplicada al campo de mensaje

No es necesario aplicar la validación del campo de formato para el campo del cuadro de mensaje como ya hemos mencionado.

 si ($_POST['mensaje']=='')
{
$flag=0;echo "Ingrese el mensaje";
}

Todas las piezas de código se explican por sí mismas. Simplemente asegúrese de que los campos de entrada no estén vacíos y tengan el formato correcto (no se utilizan caracteres especiales).

Procesando la entrada del formulario

Ahora, nuestra entrada está debidamente validada. Necesitamos notificar al Administrador. El siguiente código procesará los datos del formulario y enviará por correo electrónico los detalles como Nombre, Asunto del correo electrónico y Mensaje al Administrador.

Usaremos la función wp_mail para enviar correos electrónicos. Para saber más sobre wp_mail, haz clic aquí.

 <?php
si ($bandera==1)
{
wp_mail(get_option("admin_email"),trim($_POST[tunombre])." te envió un mensaje de ".get_option("blogname"),stripslashes(trim($_POST[mensaje])),"From: ". trim($_POST[su nombre])." <".trim($_POST[correo electrónico]).">rnReply-To:".trim($_POST[correo electrónico]));
echo "Correo enviado con éxito";
}
?>

Código final de la plantilla de contacto

La versión final del código contenido en el archivo php de plantilla de contacto se ve así:

 <?php
/* Nombre de la plantilla: Contáctenos */
obtener_encabezado(); ?>
<div id="primario">
<div id="contenido" rol="principal">
<color de fuente="#FF0000">
<?php
if(isset($_POST['enviar']))
{
$bandera=1;
if($_POST['tunombre']=='')
{
$bandera=0;
echo "Por favor ingrese su nombre<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['tunombre']))
{
$bandera=0;
echo "Por favor ingrese un nombre válido<br>";
}
si ($_POST['correo']=='')
{
$bandera=0;
echo "Por favor ingrese su correo electrónico<br>";
}
más si(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['correo electrónico']))
{
$bandera=0;
echo "Por favor, introduzca un correo electrónico válido<br>";
}
si ($_POST['asunto']=='')
{
$bandera=0;
echo "Por favor ingrese el asunto<br>";
}
si ($_POST['mensaje']=='')
{
$bandera=0;
echo "Por favor ingrese el mensaje";
}
si (vacío ($_POST))
{
print 'Lo siento, su nonce no se verificó.';
salida;
}
más
{
si ($bandera==1)
{
wp_mail(get_option("admin_email"),trim($_POST[tunombre])." te envió un mensaje de ".get_option("blogname"),stripslashes(trim($_POST[mensaje])),"From: ". trim($_POST[su nombre])." <".trim($_POST[correo electrónico]).">rnReply-To:".trim($_POST[correo electrónico]));
echo "Correo enviado con éxito";
}
}
}
?>
</fuente>
<método de formulario="publicación" id="formulario_de_contacto">
Tu nombre:<input type="text" name="tunombre" id="tunombre" rows="1" value="" />
<br /><br />
Su correo electrónico:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Asunto:<tipo de entrada="texto" nombre="asunto" id="asunto" filas="1" valor=""></p>
<br /><br />
Deje un mensaje: <textarea name="mensaje" id="mensaje" ></textarea>
<br /><br />
<tipo de entrada="enviar" nombre="enviar" id="enviar" valor="Enviar"/>
</formulario>
</div><!-- #contenido --></div><!-- #principal -->
<?php obtener_pie de página(); ?>

Captura de pantalla final de la página Contáctenos.

Así se verá tu formulario de contacto



Paso 4: uso de la plantilla de contacto

Abre tu tablero de WordPress. Cree una nueva página y no olvide seleccionar la plantilla "Contáctenos" dentro del cuadro de atributos de la página. Vea la instantánea a continuación.



Ahora, publique la página y agréguela al menú. Como resultado, obtiene una página de contacto brillante y completamente funcional que creó sin usar un complemento. Hay muchas otras cosas que puede agregar a su página de contacto de WordPress. Una cosa que me viene a la mente es agregar un captcha o alguna otra validación para evitar el spam.