Servicios de desarrollo

Formulario de contacto sin plugin para wordpress

Hay un monton de plugins de formulario de contacto para wordpress. Desde lo mas completos y llenos de caracteristicas hasta los mas simples. Pero siendo un maniatico de la optimizacion se me ocurrio que podria hacer uno sin usar un plugin.

Las ventajas de usar un formulario de contacto sin plugin son:

  • Mayor control y personalizacion sobre el funcionamiento
  • Mayor velocidad y optimizacion
  • Posibilidad de agregar caracteristicas unicas

Me interesaba principalmente el tema de la velocidad de carga de la web. Me di cuenta que usando Contact Form 7, el plugin mas famoso para esta tarea, siempre me cargaba un archivo javascript y uno css en cada pagina de mi blog. No solo en la pagina de contacto sino en cada post, cada categoria, cada tag, etc etc. Eso no me gusto nada y comence mi tarea de buscar una forma de hacerlo sin que me pase eso. Despues de todo…para que necesito tantas opciones si lo unico que quiero es un simple formulario de contacto?

contactoLo encontre en trevodavis(en ingles) y lo simplifique. Porque tampoco necesitaba algo que use jQuery y Ajax. Simple PHP y HTML me bastaban. Paso a explicarles como se hace.

Basicamente lo que vamos a hacer es un template de pagina para wordpress. Y este es el esquema basico que tendra:

SI (recibo formulario)
  Verifico captcha
  Valido datos
  SI (no hay errores)
    envio email

Template de pagina

SI (se envio el mail)
  Muestro msj + algo extra
SINO
  Muestro formulario

Voy a explicar paso a paso pero aclaro que como vamos a un template de pagina cada uno debera adaptarlo a su blog. Aunque igual es una tarea facil.

Lo primero que lleva el archivo es la cabecera para indicar que es un template:

<?php 
/*
Template name: Pagina de Contacto
*/

A continuacion lleva el codigo para verificar el mail y enviarlo. Deben copiarlo tal cual esta, no necesita cambios, solo fijense de poner la direccion a donde quieren que se envien los email del formulario de contacto.

//si recibe un formulario
if(isset($_POST['submitted'])) {
	if(trim($_POST['checking']) !== '') {
		$captchaError = true;
	} else {
                //revisa el nombre
		if(trim($_POST['contactName']) === '') {
			$nameError = 'Olvidaste ingresar tu nombre.';
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}

		//revisa el email
		if(trim($_POST['email']) === '')  {
			$emailError = 'Olvidaste ingresar tu email.';
			$hasError = true;
		} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$", trim($_POST['email']))) {
			$emailError = 'Ingresa un email real.';
			$hasError = true;
		} else {
			$email = trim($_POST['email']);
		}

                //revisa el mensaje
		if(trim($_POST['textoMensaje']) === '') {
			$commentError = 'No ingresaste ningun mensaje.';
			$hasError = true;
		} else {
			if(function_exists('stripslashes')) {
				$comments = stripslashes(trim($_POST['textoMensaje']));
			} else {
				$comments = trim($_POST['textoMensaje']);
			}
		}
	}

        //si no hay errores envia el email
	if(!isset($hasError)) {
		$emailTo = 'mailejemplo@mail.com';//cambiar esto
		$subject = 'Mensaje de '.$name;
		$body = "Nombre: $name \n\nEmail: $email \n\nComentario:\n\n $comments";
		$headers = 'From: Mi blog ' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}
}

Luego viene la primera parte de su template de pagina. Yo les dejo la mia pero ustedes usen la de su theme. Lo mas facil es ir al archivo page.php de su theme y fijarse como esta constituido.

Lo que es seguro es que comienza con get_header()

get_header(); ?>
<!-- Row for main content area -->
<div id="content">
<div id="main">
<div class="post-box">

Ya casi terminamos. Ahora viene la parte de mostrar un mensaje si el mail se envio o mostrar el formulario. En cada input se muestra el valor enviado si es que el envio falla, esto para que el visitante no tenga que llenar de nuevo los campos.
Tambien se muestra debajo de cada input el error para indicar al visitante donde cometio un error.

<?php  
//Si el email es enviado muestra un mensaje 
//Sino muestra el formulario 
if(isset($emailSent) && $emailSent == true) { ?>
<h3>Gracias por comunicarte, <?php echo $name;?></h3>
Te email sera atendido y respondido a la brevedad.
<?php } else { ?>
	<?php if(isset($hasError) || isset($captchaError)) { ?>
          Hubo un error enviando el formulario.
	<?php } ?>
<form id="contactForm" action="<?php the_permalink(); ?>" method="post">
<input type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span> 
<?php } ?>

<br>
<input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>

<br>
<label for="commentText">Tu mensaje aqui</label>
<textarea name="textoMensaje" rows="15" cols="40"><?php if(isset($_POST['textoMensaje'])) {  if(function_exists('stripslashes')) { echo trim(stripslashes($_POST['textoMensaje'])); 
} else { echo trim($_POST['textoMensaje']); } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span> 
<?php } ?>

<br>
<label class="screenReader" for="checking">Deja este campo vacio para demostrar que eres humano</label>
<input id="checking" class="screenReader" type="text" name="checking" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
<input id="submitted" type="hidden" name="submitted" value="true" />

<br>
<input type="submit" value="Enviar" /></form>
<?php } ?>

Por ultimo solo mostramos lo que queda del template de pagina. Que de nuevo dependera de la estructura de su theme. El mio y asi:

<!-- /#main -->

		<?php get_sidebar(); ?>

<!-- End content row -->

<?php get_footer(); ?>

Suben el archivo a la carpeta de su theme. Ahora solo crean una pagina y eligen el template que acabamos de crear. Deberia funcionar sin mayores problemas.

Como mejorar el formulario de contacto

Agregar CSS. Pueden usar CSS para mejorar el aspecto del formulario. Seguramente su theme algun estilo para ellos, lo mejor seria usar esos para no tener que agregar aun mas codigo.

Mostrar mas informacion. Cuando Muestran el mensaje de ‘exito’ podrian aprovechar y mostrar algo mas para mantener a la visita dando vueltas por el blog. Por ejemplo pueden aprovechar y mostrar algunos post destacados o los mas comentados. Pueden usar algo del codigo que les mostre cuando hice el post de crear pagina de archivos para wordpress.

Si quieren una prueba pueden usar el formulario de contacto de este blog. El enlace esta en la parte superior derecha.

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

6
Comenta!

avatar
soy tu ano
soy tu ano

me sirvio muchas gracias

augusto
augusto

y que pasa si quiero que una vez enviado el email, me lleve a una pagina de GRACIAS? cual es el codigo??

tengo que hacerlo asi, yo estoy intentando hacerlo durante horas, con header location, con email_sent y otras formas y no me redirecciona, envio el correo (envia bien) y me sale este error Cannot modify header information – headers already sent by o directamente no me sale nada, que hagooooooo!!!

sefsinalas

Lo que puedes hacer es setear alguna variable con PHP para luego leerla con javascript y redireccionar usando javascript.
window.location = “http://lapaginaquedesees.com”;

John Jiménez
John Jiménez

hola, primero agradecer tu código, segundo, estoy implementando el código en wordpress de manera local, y lógicamente el correo en un servidor web pero no llega, esto se debe a qúe es local o tendré algo que adicionar al código, gracias por tu respuesta

Juan Garcia
Juan Garcia

Muy bueno, muchas gracias por el aporte

Juan Garcia
Juan Garcia

Muchas gracias, de gran utilidad saludos