Video Tutorial #2: Formulario de Contacto WordPress Sin Plugins
Video tutorial de cómo implementar un formulario de contacto en WordPress sin plugins. ¡Simplificado!
Quizá las páginas de contacto de los sitios en internet nunca pasen de moda. Y eso a pesar de que en Twitter dispongamos del tan preciado DM, la razón que encuentro, es que no sabemos lo que mañana pueda pasar con Twitter o Facebook o <ponga aquí su red social preferida> y perder esa información.
En un artículo anterior Página de contacto para WordPress sin plugins y notificación vía email con Google Apps se describe a detalle “el proceso a mano”. Ahora lo veo engorroso y complicado de adaptar. Por eso, en este videotutorial les traigo lo mismo, pero simplificado y más fácil de implementar y “configurar”.
¿Bueno y que hay de nuevo?
El concepto es el mismo (no es gran ciencia un formulario de contacto: tu nombre, tu email y tu mensaje, punto) pero el código ha sido metido en una clase PHP que fácilmente podemos modificar y adaptar, ¿Mencioné que se mejora la forma de implementarlo? Ahora en la plantilla para WordPress veremos código enormemente más simple.
Entonces, los dejo con el screencast del proceso y por supuesto el código 
Ver Video Tutorial #2: Formulario de Contacto WordPress Sin Plugins en blip.tv
Formulario de Contacto WordPress (simplificado) by Julio Ricardo Flores Andrade is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Sobre el autor:
Siempre más persona que diseñador gráfico, autor, emprendedor. Es un Inceptor, trae viajes más profundos que Julio Verne, es un viajero del tiempo.
email: julio@origenmedia.com | Twitter: @JulioRFA | Facebook: fb.com/JulioRFA
Hola Francisco,
un exelente videotutorial…Gracias
yo estaba usando el formulario de contacto anterior y por supuesto quiero hacerle la modificación y pasarlo al nuevo simplificado.
aqui en el tutorial no dices nada de la prevalidacion(los archivos js y el jquery), ¿quieres decir que esto ya no es necesario?
Hola, si efectivamente ya no tomé en cuenta la pre-validación porque se haría más complicado. Hay que editar el archivo
functions.phpy hacer otros malabares a mano.Como ves, ahora son tan sólo un par de líneas para meter el formulario, sin tanto rollo. Aún así, si veo que necesitan de la pre-validación ya se lo estaré agregando, procurando que quede igual de sencillo.
Saludos
Hola Julio.
Estoy haciendo mi web portfolio no blog, usando wordpress como CMS. Mis conocimientos de programación son más bien nulos.
Tengo una duda que no sé si me podrás resolver un poco orientada para tontos jeje, pero bueno.
Leyendo el tema de recursos consumidos por un número de plugins determinados, no acabo de entender la direferencia entre el formulario que creas en el artículo o en el videotutorial con respecto a usar un plugin de esos que te crean un formulario para wordpress.
Otra cuestión al respecto es el tema de la seguridad. Mi web no tiene habilitados los comentarios, por lo que los visitantes solo pueden ver la info en las distintas secciones (es una web de diseño, se muestran solamente diseños, imágenes en definitiva.) ¿El tener los comentarios desactivados me expone a los mismos riesgos que si los tuviese activados?
Seguramente acabe usando este que has creado en el video porque parece sencillo de implementar por muy pocos conocimientos que tenga de programación, o por lo menos lo intentaré.
Saludos
Que tal Chris, te respondo vale
Es fácil deducir porque un plugin de WP “consume” más recursos… y es que WP tiene que hacer toda una maravilla (en serio) de operaciones para engancharse con el código de los plugins… lo “encuentra” automáticamente y crea una serie de objetos internos (no te asustes con esto) para ejecutar el código tal cual está implementado en su esquema para plugins, puesto que ellos ponen las “reglas” de cómo debe ir cierta parte del código para que tu plugin se adapte al CMS.
A diferencia del “código duro”, sin “ganchos”, “a pelo” que puedes ejecutar directamente con PHP. Que en este código que presento es el caso.
Un plugin sería: Codigo Plugin -> WordPress -> PHP
El código que aquí expongo iría así: Código Formulario -> PHP
… espero no haberte enredado más, pero creo queda más claro.
De la seguridad…. bueeeeeh!! prácticamente todos estamos expuestos a los mismos riesgos con o sin comentarios habilitados, así sea WordPress, Drupal, Joomla, lo que sea… yo no me preocuparía por si tengo los comentarios deshabilitados o no, eso es cuestión de si le quieras brindar cierta interacción a tu sitio con tu público y por supuesto contigo. ¿A qué riesgos me refiero? pues que hay ataques mucho más efectivos y fuertes que incluso no se llevarían tu web, sino todo el servidor. También ojo con el spam es peligroso para tu posicionamiento en buscadores.
La seguridad está en prevenir los desastres, haciendo respaldos y cuidando nuestro dominio también. WordPress ofrece una muy buena seguridad por default que se puede blindar un poco más, lo recomendable es ir actualizando porque en cada actualización corrigen desde grandes a pequeños fallos.
Bueno Chris, por acá seguimos, me cuentas como te fue adaptando tu formulario de contacto
Hola Julio otra vez. Ya casi estoy a punto de terminar mi web usando tu formulario en la parte correspondiente.
Aunque me carga bien, quería consultarte algo sobre cómo escribes el código php en el archivo contact-template.php.
la plantilla la comienzas con las etiquetas de php y luego la cierras por primera vez tras el principio del loop.
A continuación html con llamadas php en su interior y otra vez abres php que cerraras líneas mas abajo pero….al final, antes del endwhile abres y no lo cierras cuando pides el footer.
Hasta ahora lo poco que he tocado de php siempre se abre y cierra, pero como vo que en este caso no cierras al final, te quería consultar si es posible cambiar a como lo he visto yo hasta ahora, para poder ir con mejor pie y no liarme en mi web. Es que la estructura de todas mis plantillas es similar pero abren y cierran cada vez que tengo algo de php.
Lo que si me da miedo, es no poner algo bien y liarme…porque quiero agrehgar un div a modo de 2 columnas(una sería tu formulario) y me hace desplazamientos raros en mi página de contacto:
Estaría bien de la siguiente manera?:
<?php
/*
Template Name: Pagina de Contacto
*/
/**
* This is a Contact Form Page Template for WordPress 2.8+
* @author Julio Flores Twitter: @JulioRFA
* @version 0.1
* @since WordPress 2.8+
*
* http://jfastudios.com
*
*/
?>
//Iniciar una sesion
//El Loop de WordPress
<div id="post-">
false,
'setSendCopy' => false,
'setHoneypot' => false
);
$contactForm = new ContactForm($config);
?>
Contenido de mi columna 2
Ya ves que es una tontería, pero a lo mejor coloco mal estas etiquetas en tu código y loque hago es empeorar la cosa.
Un saludo nuevamente y gracias
Parece que he usado mal las etiquetas code…lo siento…espero que po rlo menos me explicase bien.
Saludos y disculpa
Estas en lo correcto, y también estoy en lo correcto. Eso de no cerrar la etiqueta de PHP ?> el intérprete lo entiende y está bien,… esta práctica me la quedé cuando apredí sobre CodeIgniter.
INCORRECT:
<?php
echo "Here's my code!";
?>
CORRECT:
<?php
echo "Here's my code!";
/* End of file myfile.php */
/* Location: ./system/modules/mymodule/myfile.php */
Claro, si al final de tu archivo hay más HTML o texto que NO sea código de PHP, entonces si, cierras la etiqueta de PHP y continuas normal, como en tu ejemplo
Te dejo el link de la guia de usuario de CodeIgniter, de su PHP Style Guide
Muchas gracias.
He intentado encerrar entre etiquetas todo y parece funcionar, pero a la hora de añadir más código html, me descoloca todo y no sé ahora mismo como solucionarlo.
Lo único que quiero hacer es meter en un div todo lo que es el formulario para flotarlo con otro div que contiene html, nada más, por eso lo de encerrar el código entre etiquetas, que es como he hecho el resto de la web. Por encima de ambos divs la llamada al header y por debajo la llamada al footer, muy simple, pero no sé qué hago mal que no lo consigo maquetar.
En cuanto terminen de reparar el monitor del ordenador (computadora creo que dicen por latino américa) lo intentaré otra vez.
Por cierto, muy interesante la guía esa que has enlazado.Gracias.
por fin!! ya tengo el ordenador en casa, pasó tiempo la verdad.
Bueno, pues me puse con el formulario y lo conseguí adaptar casi perfecto, la única pega es que me crea un div con id = post-37, en el que repito, está el formulario.
Lo curioso es que me toma los estilos del listado de post y no sé por qué no consigo cambiarle los estilos. Esto es normal?
Gracias otra vez, espero que al subirlo al servidor (no sé por cuál decantarme aun) siga funcionando.
Saludos
Bueno, finalmente parece que lo he conseguido.
Mencionar que lo de iniciar sesión me sacaba por pantalla una serie de advertencias cuando lo subí al servidor, por lo tanto, en la plantilla del formulario, donde pones session_start(); he suprimido esa función (es una función?¿) y ya no muestra ninguna advertencia.
Saludos
Hola Chris, llego tarde a responder, pero podrías poner que mensajes te enviaba? … En realidad, la función de session_start() sirve para iniciar una sesion en PHP, lo usa básicamente el CAPTCHA, si no lo usas entonces no tendrás problemas, de lo contrario no te va a funcionar, en este caso te recomiendo dejar el Honeypot
Harto chanta tu video, das pena
Hola Julio, estoy tratando configurar el formulario en wordpress 3.0.3 y no hay caso. El tema es que no me da error de ningún tipo pero tampoco envía el email y luego de darle a “enviar” me dirige a una página en blanco. Podés ver el formulario en este link: http://deexcursion.com.ar/contacto/
Tengo todos los campos personalizados configuardos tal cual tu explicación y estoy usando la version simplicada del formulario.
¿Que puede estar pasando? Desde ya gracias por tu tiempo y buena voluntad.
Tienes Twitter? te dejo el mio: @JulioRFA, así podemos checarlo más facil
Tambien, puedes poner el código de tu plantilla y una captura de pantalla de los campos personalizados por favor e incluso lo que le pusiste a cada campo (claro menos la contraseña)
Ya hice una prueba y efectivamente no se envia nada, ahorita lo checamos
Hola me esta costando mucho trabajo esto del contacto pero ya casi lo tengo, ahora lo que pasa es lo mismo que al compañero, cuando pulso enviar me saca una página en blanco.. que puede pasar?
gracias por todo
julio, tengo una pregunta.
Yo uso el formulario Contact que me da wordpress.
Pero el problema que tengo es que cuando alguien llena el formulario y lo manda no se a donde lo manda.
No se donde configurar eso
Saludos
Gracias por el aporte es muy util.
Hola, he probado tu form y funciona perfectamente. tengo una consulta, como hago para agregarle mas campos al formulario?
Por ejemplo.
Nombre:
Empresa:
telefono:
Email:
direccion:
Mensaje
y como haria si quiero colocarle un select?
espero puedas ayudarme, ya intente agregandole campos y no me envie los datos…
gracias anticipadas…