Descarga ahora nuestro 1er eBook!

Página de Contacto para WordPress Sin Plugins con Notificación Vía Email en GoogleApps

Guía extensa sobre cómo instalar un formulario de contacto en WordPress sin necesidad de plugins.

get in touch

En este artículo mostraré como realizar un formulario de contacto para WordPress sin necesidad de plugins utilizando una página con plantilla personalizada (custom page templates), campos personalizados (custom fields) para configuración como veremos más adelante

¡Hay una versión más reciente que puedes revisar en el siguiente link:
Video Tutorial #2 – Formulario de contacto WordPress sin plugins (simplificado)
Aún así manten ambos artículos como referencia

Pre-validación con jQuery, simple validación y limpieza de datos, anti-spam con un honeypot captcha y un captcha normal para asegurarnos (Securimage CAPTCHA), y finalmente por si fuera poco integrarlo a tu cuenta de correo manejada con Google Apps para la notificación vía email y mostraré como hacer una plantilla con estilo para el email. ¿Interesado?

Trevor Davis en su blog nos cuenta la razón posible para no usar un plugin y parte de la inspiración y código salió de su artículo WordPress & jQuery Contact Form without a Plugin.

Si quieres ver un demo o bajar el código fuente lo tienes a continuación (está en otro sitio):

Procedimiento Básico

  1. Crear una plantilla personalizada de página para WP.
  2. Crear una página en WP que use esa plantilla (nuestra página de contacto).
  3. Crear campos personalizados en la página de contacto.

1. La plantilla de página personalizada WP

En esta plantilla está toda la magia y está apoyada por las siguientes librerias y scripts:

  • Securimage CAPTCHA Librería para verificar que el usuario es humano.
  • PHPMailer Librería para enviar el email usando Gmail/Google Apps o cualquier servidor SMTP
  • contact-form.js Script para pre-validar con jQuery, para incluirse en el tema de WP
  • functions.php Archivo PHP de las funciones de nuestro tema WP, se agregan unas funciones.

Entendiendo la estructura de la plantilla de contacto

En el siguiente código definimos una plantilla de página para WordPress, en ella está la estructura básica que conformará nuestra página de contacto. No es necesario copiar este código, sólo lo purgue de tal modo que se entienda lo que se está haciendo sin tanto detalle.

<!--?php <br ?-->/*
Template Name: Pagina de Contacto
*/

//Si ha sido enviado el formulario
if(isset($_POST['submitted']))
{
	//Validar y limpiar los datos (codigo aqui)

	//Si no hay ningún error, enviar el email. (codigo aqui)

}

//Obtener el Header
get_header();

//El Loop de WordPress para obtener el contenido y poder usar campos personalizados
if (have_posts()):
	while (have_posts()) : the_post();

		//Si se envió el email, mostrar mensaje de notificación
		if(isset($emailSent) && $emailSent == true):
			# <!-- Mensaje de notificación -->

		//No se envió el email, hubo errores
		elseif(isset($hasError) OR isset($honeypotError) OR isset($captchaError)):
			# <!-- Mensaje de error -->

		//Se carga normalmente el contenido de la página
		else:
			the_content();
		endif;

		//Si no se ha intentado enviar el mensaje o hubo errores, carga el formulario
		if(!isset($emailSent) OR $emailSent == false)
			// <!-- Codigo del Formulario -->
		endif;

	endwhile;
endif;

//Obtener Sidebar (opcional)
get_sidebar();
//Obtener el Footer
get_footer();
?>

Lo que se hace es verificar si se ha enviado el formulario, si no, carga normalmente la página. Si ha sido enviado entonces se realizan las validaciones y si todo va bien se envía el email de notificación y se avisa al usuario. Si hay errores se despliegan ya sea con Javascript habilitado o no.

Validación

Este código primero verifica el Captcha, después la trampa (honeypot captcha) que básicamente se trata de un campo que no debe tener datos y se oculta al usuario con código CSS (más adelante el código CSS necesario), después verifica que cada campo del formulario tenga contenido y lo limpia de caracteres especiales con las funciones stripslashes y htmlspecialchars nativas de PHP. Finalmente comprueba que el campo oculto contactId sea numérico pues este se utiliza para obtener los datos de los campos personalizados y es el ID de la página para WP. En caso de haber cualquier error, se activa una variable $hasError.

<!--?php //Checa si el codigo captcha es correcto if ($securimage--->check($_POST['ccode']) == false)
{
 $captchaError = true;
 $hasError = true;
}

//Checa si la trampa (honeypot captcha) está vacia
if($_POST['ageCheck'] !== '')
{
 $honeypotError = true;
 $hasError = true;
}

//Checa que no esté vacio el campo Nombre
if(trim($_POST['contactName']) === '')
{
 $nameError = 'Olvidaste escribir tu nombre.';
 $hasError = true;
}
else
 $name = trim($_POST['contactName']);

//Checa que sea una dirección email válida
if(trim($_POST['email']) === '')
{
 $emailError = 'Olvidaste tu dirección de email.';
 $hasError = true;
}
else if (!is_email(trim($_POST['email'])))
{
 $emailError = 'Dirección de email no válida.';
 $hasError = true;
}
else
 $email = trim($_POST['email']);

//Checa que hallan escrito un mensaje
if(trim($_POST['message']) === '')
{
 $messageError = 'Olvidaste escribir tu mensaje.';
 $hasError = true;
}
else
{
 if(function_exists('stripslashes') && function_exists('htmlspecialchars'))
 $message = htmlspecialchars(stripslashes(trim($_POST['message'])));
 else
 $message = trim($_POST['message']);
}
//Checa que la ID de la página "the_ID" sea numérica
if(is_numeric($_POST['contactId']))
 $contactId = $_POST['contactId'];
else
 $hasError = true;
?>

Envío de email

Esta parte del código es la que utiliza los campos personalizados de WP. ¿Bueno, y para qué? En principio es para poder alterar los parámetros del servidor de correo SMTP desde el panel de administración de WP en la edición de la entrada/página y de este modo no tener que estar tocando el código PHP. La segunda es para manipular los datos del remitente del email (Nombre, Email, Asunto, Cuerpo del mensaje). La tercera es para poder usar una plantilla en el email con diseño en caso de que el usuario se envíe una copia a sí mismo y de este modo manejar el branding de nuestra empresa.

<!--?php //Si no hay ningún error, envía el email. 	if(!isset($hasError)) 	{ 		$sendCopy = $_POST['sendCopy']; 		$keywords = array('%name%','%email%','%message%','%bloginfo%'); 		$replace = array($name, $email, $message, get_bloginfo()); 		$mail = new PHPMailer(); 		$mail--->IsSMTP();
		$mail->SMTPAuth = true;
		$mail->SMTPSecure = "ssl";
		$mail->Host = get_post_meta($contactId, "mailHost", true); #"smtp.gmail.com";
		$mail->Port = get_post_meta($contactId, "mailPort", true); #465;
		$mail->Username = get_post_meta($contactId, "mailUsername", true); #"contacto@tudominio.com";
		$mail->Password = get_post_meta($contactId, "mailPassword", true); #"password";

		$mail->From = get_post_meta($contactId, "mailFrom", true); #'noreply@tudominio.com'; #get_option('admin_email');
		$mail->FromName = str_replace($keywords, $replace, get_post_meta($contactId, "mailFromName", true)); #get_bloginfo();
		$mail->Subject = str_replace($keywords, $replace, get_post_meta($contactId, "mailSubject", true)); #'Contacto: ' . $name;
		$mail->AltBody = str_replace($keywords, $replace, get_post_meta($contactId, "mailText", true)); #"Envia: $name <$email>\n\n$message";
		$mail->MsgHTML(str_replace($keywords, $replace, get_post_meta($contactId, "mailHTML", true))); #"
<strong>$name</strong><$email>

$message

";

		$mail->AddBCC(get_post_meta($contactId, "mailUsername", true), get_bloginfo());

		if($sendCopy == true)
			$mail->AddAddress($email, $name);

		$mail->AddReplyTo($email, $name);
		$mail->IsHTML(true);
		$mail->AddCustomHeader('Mime-Version: 1.0\r\n');

		$emailSent = $mail->Send();
	}
?>

El formulario de contacto

Esta sección define el código del formulario HTML que incluye código PHP para rellenar los campos válidos, las notificaciones de error y los CAPTCHAS, además recordar que aquí se pone la ID de la entrada en un campo oculto.

</pre>
<form id="contactForm" action="<?php the_permalink(); ?><br />" method="post">

<label for="contactName">Nombre</label>

 <input class="requiredField" id="contactName" type="text" name="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
 <!--?php if($nameError != '') { ?-->
<span class="error"><!--?=$nameError;? --></span>
 <!--?php } ?-->

<label for="email">Email</label>

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

<label for="messageText">Mensaje</label>

<textarea class="requiredField" id="messageText" cols="24" name="message" rows="2"><?php if(isset($_POST['message'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['message']); } else { echo $_POST['message']; } } ?></textarea>
 <!--?php if($messageError != '') { ?-->
<span class="error"><!--?=$messageError;? --></span>
 <!--?php } ?-->

<input id="sendCopy" type="checkbox" checked="checked" name="sendCopy" value="true" /> /><label for="sendCopy">Enviar una copia a tu email.</label>

<label class="screenReader" for="checking">Para enviar tu mensaje no llenes este campo</label>
<input class="screenReader" id="checking" type="text" name="ageCheck" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" />

<label for="ccode">Escribe el código siguiente</label>

 <img id="captcha" style="margin: 3px;" alt="CAPTCHA Image" src="<?php bloginfo('template_url'); ?>/includes/securimage/securimage_show.php" />

 <a onclick="document.getElementById('captcha').src = '<?php bloginfo('template_url'); ?>/includes/securimage/securimage_show.php?' + Math.random(); return false" href="#">Recargar código</a>

 <input id="ccode" type="text" maxlength="4" name="ccode" size="8" />

 <span>No se distingue entre mayúsculas y minúsculas.</span>

 <input id="contactId" type="hidden" name="contactId" value="<?php the_ID(); ?>" />
 <input id="submitted" type="hidden" name="submitted" value="true" />
 <input type="submit" name="submit" value="Enviar »" /> </form>
<pre>

La pre-validación con jQuery

La pre-validación lo que hace es iterar sobre los campos del formulario que tengan la clase requiredField y sólo verifica que tengan contenido, también realiza una simple comprobación sobre el campo que tenga la clase email para checar si está bien formada (no es posible verificar que la dirección exista). Si todo va bien, permite que el formulario sea enviado, si no, se muestran los mensajes de error (los puedes modificar en las líneas resaltadas).

$(document).ready(function() {
	$('form#contactForm').submit(function()
	{
		$('#contactForm .alert, #contactForm .error').remove();

		var hasError = false;

		$('.requiredField').each(function()
		{
			if(jQuery.trim($(this).val()) == '')
			{
				var labelText = $(this).prev().prev('label').text();
				$(this).parent().append('<span class="error">Olvidaste '+labelText+'.</span>');
				hasError = true;
			}
			else if($(this).hasClass('email'))
			{
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				if(!emailReg.test(jQuery.trim($(this).val())))
				{
					var labelText = $(this).prev().prev('label').text();
					$(this).parent().append('<span class="error">El '+labelText+'no es válido.</span>');
					hasError = true;
				}
			}
		});

		return !hasError;

	});
});

Insertando el script de pre-validación en la página de contacto

Para insertar el código Javascript de jQuery para pre-validar se añade código al archivo de funciones del tema WP (functions.php). Se trata de dos funciones, una para llamar directamente desde nuestra plantilla y otra que se llama automáticamente cuando WP obtiene el pie de página (footer) e inserta la línea de código que vincula con nuestro script.

<!--?php /* 	Este bloque de código reemplaza al jQuery incluido en WP por el que está alojado en los 	CDN de Google 	Referencia: http://digwp.com/2009/06/use-google-hosted-javascript-libraries-still-the-right-way/ */ if( !is_admin()) {    wp_deregister_script('jquery');    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');    wp_enqueue_script('jquery'); } /* 	Esta función agrega una acción para que se inserte el script de pre-validación 	en el "footer" de nuestro tema WP 	Referencias: http://codex.wordpress.org/Function_Reference/add_action */ function prepara_pre_validacion() { 	add_action('wp_footer', 'inserta_pre_validacion'); } /* 	Esta función se ejecuta automaticamente cuando se manda llamar la función "wp_footer()" 	en nuestro tema WP e inserta el script para pre-validar con jQuery */ function inserta_pre_validacion() { ?-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pre-valida-contacto.js"></script>
<!--?php } ?-->

Para instalar la plantilla en WP

Primero baja la librería Securimage CAPTCHA (yo uso la Version 2.0.1 BETA) mejorada respecto a la primer versión y viene con ejemplos y documentación.

La librería PHPMailer ya viene incluida en WP (al menos en versiones recientes), en el código de la plantilla se incluyen las clases necesarias.

Baja la plantilla con el código completo (pagina-contacto.php), el archivo de pre-validación en Javascript (pre-valida-contacto.js), copia el código PHP de functions.php en tu archivo functions.php del tema instalado, si no existe lo creas.

Los archivos deben quedar de la siguiente forma:

Extrae todos los archivos de Securimage dentro del directorio de tu tema WP y dentro de /includes/securimage/. El archivo Javascript (pre-valida-contacto.js) dentro de /js/. Como se muestra en seguida.

wordpress/wp-content/themes/directorio-tema/includes/securimage/
wordpress/wp-content/themes/directorio-tema/js/pre-valida-contacto.js
wordpress/wp-content/themes/directorio-tema/pagina-contacto.php
wordpress/wp-content/themes/directorio-tema/functions.php

Para configurar Securimage edita el archivo securimage_show.php ubicado en:

wordpress/wp-content/themes/directorio-tema/includes/securimage/securimage_show.php

Para más referencia te recomiendo la documentación oficial de Securimage, si no editas nada usa la configuración predeterminada, pero quizá te gustaría cambiar los colores, la tipografía, etc. pero esto ya es para otro artículo.

El código CSS necesario

El único código css que es necesario sirve para ocultar el campo del honeypot captcha, lo demás puede ser a gusto personal: colores, bordes, margenes, espacios, etc.

El siguiente código insertalo en la hoja de estilo del tema de WordPress que estés usando.

#contactForm .screenReader		{ display:none; visibility:hidden; }

2. Crear una página en WP con nuestra plantilla.

Ya que subiste los archivos necesarios como se explicó anteriormente, hay que crear una página en WordPress con el editor de páginas y seleccionar “Pagina de Contacto” como nuestra plantilla para que la use, ponerle título, dirección y el contenido que queramos vea el usuario antes del formulario.

Captura de pantalla, creación de página de contacto

3. Crear los campos personalizados en la página de contacto

Posteriormente viene algo de magia, se crearán los siguientes campos personalizados (custom fields) para la página, respetando minúsculas/mayúsculas:

  • mailHost: Dirección del servidor SMTP
  • mailPort: Puerto del servidor SMTP
  • mailUsername: Nombre de usuario de la cuenta de correo
  • mailPassword: Contraseña de la cuenta de correo
  • mailFrom: Dirección email que envía el correo electrónico
  • mailFromName: Nombre del remitente del email
  • mailSubject: Asunto del email
  • mailText: Contenido del email en texto plano
  • mailHTML: Contenido del email en HTML
  • successMessage: Mensaje de notificación de que el email fue enviado

Captura de pantalla, creación de campos personalizados

Aquí es necesario explicar algunos asuntos, primero los valores que hay que indicar para que esto funcione con cuentas de correo electrónico de Google Apps o Gmail y los valores de los demás campos para que contengan los datos que envía el usuario.

Configuración de Google Apps

La razón de usar PHPMailer y Google Apps (o cualquier servidor de correo SMTP) es que al enviar el email éste NO llega a la bandeja de SPAM tanto de nuestra propia cuenta así como en la del usuario que se envía a sí mismo una copia del mensaje. Es la razón principal, ya que la función mail() en algunos casos es imposible hacer que el correo no caiga en el spam.

Bien, los valores de los campos personalizados para Google Apps son:

  • mailHost: smtp.gmail.com
  • mailPort: 465
  • mailUsername: tu_email@tu_dominio.com
  • mailPassword: La contraseña de la cuenta

¡Eso es todo para Google Apps!

Configuración del cuerpo del mensaje

Después, para el mensaje en sí, tenemos los siguientes comodines (wildcards) que serán sustituidos por los datos que introdujo el usuario.

  • %name%: Es sustituido por el nombre que introdujo el usuario.
  • %email%: Es sustituido por el email que introdujo el usuario.
  • %message%: Es sustituido por el mensaje que introdujo el usuario.
  • %bloginfo%: Es sustituido por el nombre de tu blog.

De esta forma, en los campos personalizados restantes usamos esos comodines para que contengan la información correspondiente. El modo de usarlos lo muestro a continuación:

  • mailFrom: noreply@tudominio.com
  • mailFromName: %bloginfo%
  • mailSubject: Contacto: %name%
  • mailText: De: %name% <%email%>\n\n%message%
  • mailHTML: (ver mas abajo)
  • successMessage: (ver mas abajo)

Ejemplo de mailHTML



%bloginfo%
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</pre>
<div style="width: 94%; padding: 3%; margin: 0 auto; font-family: Georgia; font-size: 12px;">
<h2 style="font-family: Arial,sans-serif; color: #ab7c00;">Gracias <span style="color: #ca412c;">%name%</span></h2>
Estaré en contacto muy pronto.
<h4>Tu mensaje</h4>
%message%

—
Atentamente,
Julio Flores

<a href="http://jfastudios.com"><img style="border: none; outline: none;" alt="JFA Studios" src="http://jfastudios.com/blog/wp-content/themes/ArrowAttitude2/style/images/logo.png" /></a>

<hr />

<small>La función de este mensaje es únicamente informativa. Las respuestas no se supervisarán ni se contestarán.
Para contactar puedes escribir al e-mail de <a href="mailto:contacto@jfastudios.com">contacto</a> o ingresar <a href="http://jfastudios.com/contacto">aquí</a>.</small></div>
<pre>


Recuerden usar url’s completas para imágenes y estilos css de línea. También noten que aquí se usan los comodines.

Ejemplo de successMessage

</pre>
<h3 class="archive">Gracias <span>%name%</span></h3>
<pre>
<strong>Tu mensaje ha sido enviado.</strong> Responderé a la brevedad posible.

Si te enviaste una copia, por favor revisa en tu bandeja de <em>spam</em> ya que en ocasiones se filtra el email. Para evitar esto, agrega la dirección <tt>contacto@jfastudios.com</tt> a tu lista blanca o de contactos.

En mailText noten los saltos de línea (\n) pues lo trata como cadena y PHP lo sustituye por el salto visible, en mailHTML nos valemos de párrafos y lo que les de la imaginación así que no es necesario. En successMessage se puede usar HTML ya que se inserta a mitad del Loop de WordPress sin el contenido de la página.

Notas finales

¡Eso es todo!, sólo publicamos la página y realizamos las pruebas. Quizá sea necesario ajustar algunas partes del código según el caso, para mayor facilidad en la instalación baja el código completo, descomprime y súbelo directamente al directorio de tu tema WP teniendo cuidado con el archivo functions.php (haz un respaldo previamente), si ya existe y tiene funciones, entonces sólo edítalo y agrega el código que viene en mi archivo functions.php.

En resumen

  1. Sube los archivos de la plantilla de contacto.
  2. Baja la librería Securimage, descomprime y coloca todos los archivos dentro del directorio del tema y en <directorio-tema>/includes/securimage/
  3. Inserta el código CSS necesario.
  4. Crea la página en el editor y especifícale la plantilla “Pagina de Contacto”.
  5. Crea todos los campos personalizados y asígnales los valores correspondientes.
  6. Publica la página.

Disfrútalo, haz un comentario, sugiere algo o si encontraste errores hazlo saber.

Enlaces de referencia
Recomienda Ahora OrigenArts:

35 Responses

Sites That Link to this Post

  1. Bitacoras.com
  2. Video Tutorial #2 – Formulario de contacto WordPress sin plugins (simplificado) — JFA Studios
  3. Numero de visitas a mi blog
  4. Página de Contacto para WordPress sin plugins con Notificación Vía Email en GoogleApps | Noticias informatica by josem2112 | Scoop.it
  5. Como crear un formulario de contacto sin plugins en WordPress | Sin Plugins

Comments

  1. Joan says:

    Gracias por tu enorme aportación. Todo lo que sea ahorrarse el uso de plugins de terceros es interesante.
    Un par de preguntas:
    1. ¿Puede usarse de algún modo insertándolo en un post? Tengo tres formularios, uno en una página y dos en sticky posts. He empezado usando cformsII, pero consume demasiados recursos para mi gusto. Ahora estoy con Fast and Secure Contact Forms, que no usa javascript, permite introducirlo en posts mediante un shortcode, pero no sé aún si se carga en todas las páginas.
    3. Como ves, el tema de los recursos es importante para mí. ¿Sabes qué recursos consume y si lo hace en todas las páginas?
    3. ¿Estás usando tú mismo en tu web este formulario que aquí describes?

    Gracias

  2. Julio Flores says:

    Hola Joan, te respondo en orden vale ;)

    1. Estoy seguro de que si se puede usar en posts, directamente como esta ahora no, hay que adaptarlo y se podrían usar shortcodes como dices, lo checo y me pongo en contacto contigo. No conozco los plugins, les doy un vistazo ;)

    2 o (3). Pues al ser una plantilla de página wordpress, sólo se carga cuando se usa esa plantilla. Los recursos exactos no los se, dejame ver cómo se desempeña Securimage CAPTCHA y te aviso, el javascript se puede descartar sin problemas, sólo prevalida que se hayan introducido datos y el email esté bien formado, el código PHP también se asegura de eso. Funciona si están habilitados deshabilitados Javascript y los estilos CSS de la página :)

    Ahora sí, (3). Así es, uso exactamente lo mismo, sólo hay un poco de CSS y con el editor de páginas de wordpress agregue lo demás, una imágen y una lista.

  3. Ernesto says:

    No se como editar el archivo funtions.php, agrego el código y me da error.
    Estoy usando el nuevo tema de wordpress 3.0 twentyten, ¿Esto es funcional todavía sin modificaciones? ¿Que debo hacer exactamente en en las funciones para que esto me funcione? (valga la redundancia)
    Gracias amigo

  4. Julio Flores says:

    Que tal Ernesto, podrías poner el error que te dá?

    Este código funciona bien en WordPress 3.0 (este sitio lo tengo corriendo en WP3) sólo hay que checar bien algunos detalles que están descritos en el maaaaaaaar de texto del artículo.

    Revisa si sustituiste el archivo de funciones del tema TwentyTen, si es así, recuperalo y sólo agrega las funciones del código descrito aquí.

    Creo será mejor hacer un video tutorial de cómo hacerlo. Espera unos días y lo subo (es más fácil de lo que parece) pero me es más complicado detallarlo por escrito.

    Ponme aca el error que te pone y sigue los pasos del Resumen al final del artículo. Si te pierdes en algo, regresa la parte donde “explico” un poco más.

    Saludos ;)

  5. Sabogal says:

    No quiero el captcha, ¿qué parte del código modifico para eliminarla?

    Saludos

  6. Julio Flores says:

    Hola Sabogal, este código (pagina-contacto.php) http://bit.ly/axMCRY si lo pones en un editor con números de línea tendrías que borrar o comentar, como prefieras las siguientes líneas:

    Líneas 6 a 11
    Líneas 15 a 16
    Líneas 20 a 25
    y Líneas 165 a 170

    Las líneas remarcadas en amarillo hay que borrarlas/comentarlas (revisa el pdf siguiente) http://bit.ly/aE7eqX

    Con eso quedaría noqueado el Captcha, adicionalmente no es necesario que dejes los archivos de la librería Securimage. El Honeypot captcha es recomendable que lo dejes porque cae mucho spam sin el, en serio; y sólo necesitas de una línea de CSS para que funcione. Aún así si lo quieres retirar avisame ;)

    Cualquier problema, coméntalo acá. Saludos!

  7. Francisco says:

    Julio,
    la explicación esta tremenda,gracias…

    el problema que ami se me presenta es de que me tira el sidebar abajo del formulario.

    gracias

  8. Francisco says:

    tambien me tira un error de fsockopen cuando intento mandar un mensaje,
    sera que no funciona en servidor local (wamp)

  9. Francisco says:

    Yo otra vez …..
    Lo del sidebar ya lo voy arreglando con css,
    disculpa las molestias

  10. Julio Flores says:

    Que tal Francisco, el error que comentas se puede deber a la libreria PHPMailer que no puede abrir la conexión al servidor SMTP. Lo he probado localmente con XAMPP y funciona bien porque se conecta a los servidores de Google (gmail)… en todo caso, si lo estás usando con una configuración para un servidor de correo local, el error Si puede estar por ahi.

    Gracias por tus comentarios, me cuentas si detectaste que falló.

    Saludos!

  11. Francisco says:

    Que tal Julio…

    Bueno consegui que saliera el mensaje (esto lo solucione poniendo la ip de mi servidor en nombre de host,parece ser que ssl de hostgator funciona asi)

    Ahora lo que pasa es que el mensaje llega sin asunto y sin mensaje,simplemente un mensaje en blanco y asi sin el asunto gmail me lo califica como spam.

    y en campos personalizados tengo todo bien puesto tal como indicas en tus instrucciones.

    Saludos

  12. Francisco says:

    Julio….
    Ya esta arreglado resulta que en una parte de la clase phpmailer tenia todos los datos mal puesto:

    de todas maneras gracias por la explicacion e todo esto.

    Un saludo

  13. Francisco says:

    Hola Julio hay estoy de nuevo,

    A ver si me puedes ayudar con esto, yo ya lo he revisado todo y no veo nada abnormal,
    bueno te cuento,en el localhost todo me funciona perfectamente,pero al poner todo en mi hosting de hostgator resulta que la jdgallery que tengo en el blog(aun en construccion)me deja de funcionar(si quieres ver: http://blog.elartedeganar.com) como puedes ver la gallery se expande hacia abajo mostrando todo como si fueran posts sobreponiendose a los posts, aqui una imagen de como deberia ser lo he mirado todo y no encuentro nada diferente, ya hize pruebas de jquery noconflict y nada tampoco es eso,
    ¿hay que habilitar alguna extension de php en el servidor?

    Cuando quito la parte que hay que poner en functions.php el jdgallery vuelve a salir, pero claro asi el formulario no va.

    ¿que puede ser?

  14. Alyen says:

    E intentado poner el codigo de contacto como el wordpress 3.0.1 y me saliu este error:

    Warning: fsockopen() [function.fsockopen]: php_network_getaddresses: getaddrinfo failed: Name or service not known in …/wp-includes/class-smtp.php on line 122

    Warning: fsockopen() [function.fsockopen]: unable to connect to ssl://:25 (php_network_getaddresses: getaddrinfo failed: Name or service not known) in …/wp-includes/class-smtp.php on line 122

    ¿Alguien sabe porque?

    • JFA Studios says:

      Puede ser porque no se puede conectar la clase PHPMailer al servidor que especificas, en ocasionas hay problemas cuando la conexión es SSL.

      Prueba con otros parametros, pon los datos para conectarte por SMTP a Gmail por ejemplo y me avisas como te fue ;)

  15. enrique says:

    ok esta muy bien el tuto, pero me gustaria ver si se le puede agregar la posibilidad de enviar adjunto al mail, que tenga la opcion de escoger el archivo de la pc y enviarla al correo, espero tu respuesta ala brevedad para instalarlo con eso opcion extra, ya que ocupo que envien archivos los compañeros de la skool

  16. Julio Flores says:

    Enrique, checa el manual de la librería PHPMailer http://phpmailer.worxware.com/index.php?pg=tutorial, ahí te explica como usar archivos adjuntos y no importa si es hotmail, gmail, cualquier servidor SMTP funciona. En la misma página de PHP Mailer ves todo lo que puede hacer.

  17. Julio, ahora unos cuantos meses después, con algunos conocimientos más, quise pasarme de nuevo por aquí para darte las gracias y contarte que te he citado en un post que creé siguiendo el hilo de éste tuyo.

    Puedes verlo en:
    http://elartedeganar.com/formulario-de-contacto-para-wordpress-sin-plugins

    De nuevo gracias :-D

  18. Jackets XXL says:

    “How-do-you-do, just needed you to understand I have extra your website to my Yahoo bookmarks because of your extraordinary website layout. But severely, I consider your internet site has 1 of your freshest theme I’ve came across. It truly assists make reading through your blog site a lot simpler.”

    ——————————————–
    my website is
    http://kidsyoga.us

    Also welcome you!

  19. Pere Nadal says:

    Hola Julio, llevo un par de días remenando por tu web, y este artículo me ha sido muy pero que muy útil. Lo único, es que en los descargables, si se aplican tal cual sin modificar el capcha, la celda para rellenar el capcha está limitada a 4 (creo) carácteres, y como por defecto el capcha que viene tiene más letras, es imposible llenar bien el captcha. Un saludo y gracias de nuevo por tu tiempo.

  20. Julio Flores says:

    Hola Pere, en el sitio oficial encuentras la documentación sobre todo lo que quieras cambiar del captcha, te dejo un link para que veas como cambiar la dificultad.

    http://www.phpcaptcha.org/documentation/customizing-securimage/#difficulty

    • Pere Nadal says:

      Gracias Julio, lo he estado checando y está muy bien explicado. En realidad no me refería al captcha, sino al hecho de que la celda para rellenar sólo podía llenarse con 4 letras, y el captcha por defecto tiene más, con lo que no deja llenar todas las letras de la imagen y da un error. No pasa nada porque se cambia fácil y rápido modificando el maxlength=”4″ al número de letras que necesitamos, que por defecto es 6.

      Ahora estoy teniendo problemas con el mensaje de texto plano, que sale sin acentos. Digamos que el campo pesonalizado de “mailText” es necesario de llenar, pues algunas empresas y configuraciones de correo no reciben mails con html, y querría llegar a esos usuarios también. El problema es que no sé donde hay que indicar la codificación del texto plano, para poder añadir el utf8.

      Un saludo Julio.

  21. Pere Nadal says:

    Hola Julio, gracias por tu tiempo. Al final he podido arreglarlo incluyendo ” $mail->CharSet = “UTF-8″;” ya que revisando lo que comentas lo veía todo correcto.
    Ahora si que coge bien los acentos en un email de texto plano. Un saludo!

  22. Delia says:

    Excelente post!!! Muchas gracias por tu aporte, muy claro y preciso.

  23. Rafa says:

    Muchisimas gracias por la explicación, está muy clara. Es díficil encontrar cosas así.

  24. juan gomez says:

    Que buen post, gracias me sirvio mucho. Filicitaciones

  25. lee says:

    Julio saludos he visto tus posts y son muy buenos felicitaciones, quería saber si me puedes ayudar con algo en wordpress, veras yo hice un formulario personalizado pero cuando quiero enviarlo al email no me funciona estoy usando wp_mail. que me recomiendas?? o si me puedes dar un enlace en donde hable del tema. De antemano te doy las gracias..

  26. pablo says:

    hola, mira soy nuevo en esto de wp y me interesa poner un control de usuario para wp 3.5.1, lo que publicaste me sirve, no se si puedas hacer un video ya que entiendo mas con vídeos, otra cosa los códigos me sirven o tengo que hacerlos yo o modificarlos mejor dicho

Leave Your Thoughts

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *