Con el plugin de Contact Form 7, podemos introducir formularios dentro de nuestro blog wordpress. Pero por defecto, unicamente manda uno o dos emails, pero no hace nada más.
Con la ayuda de otros plugins, podemos guardar esos datos en unas tablas y tener un registro de todos los datos. Para esto, podemos utilizar Flamingo, como nos dicen en la propia web del plugin de Contact Form, o algún otro plugin que tambien se puede utilizar con el mismo propósito como Contact Form DB.
Lo que vamos a explicar, es como hacer una «landing normal», con un formulario, y una pagina de gracias o «thank you page».
Para ello, ademas del plugin contact form 7, debemos instalar algún plugin que nos permita ejecutar codigo php dentro de los posts, paginas, etc. Hay mucho, podemos elegir por ejemplo Short Exec Code.
Generamos nuestro formulario con los datos que necesitamos dentro de la opción Contacto > Formulario de contacto, podemos crear uno nuevo o utilizar el que viene por defecto y modificarlo.
<p>Su nombre (requerido)<br />
[text* your-name id:your-name] </p>
<p>Su e-mail (requerido)<br />
[email* your-email id:your-email] </p>
<p>Asunto<br />
[text your-subject] </p>
<p>Su mensaje<br />
[textarea your-message] </p>
<p>[submit «Enviar»]</p>
contactform7
A los datos del formulario, le tenemos que añadir la etiqueta id, para que luego podamos recogerla del formulario y mandarla por la url. Esto es sencillo en Contact Form 7, unicamente añadimos
id:your-name
dentro de la etiqueta, y cambiando «your-name» por el nombre que le queramos dar a cada variable.
Bajamos abajo del todo, y añadimos el siguiente codigo en la sección «Configuración Adicional».
on_sent_ok: «var nombre = document.getElementById(‘your-name’).value; location =’/gracias/?nombre=’+nombre;»
configuracion adicional contact form7
Este código lo que hace es ejecutar las acciones de javascript necesarias cuando el formulario se ha enviado correctamente. Se puede hacer a través de una funcion de javascript, o como en este caso, directamente sobre el codigo. Definimos un parámetro para cada campo del formulario, y hacemos una redirección a la página de gracias, pasandole por la url todos los parámetros recogidos del formulario.
Unicamente hemos añadido aquí el parametro nombre, pero deberiamos mandar todos los campos que tengamos en el formulario.
Ahora nos queda crearnos la pagina de gracias, que lo hacemos desde el propio gestor de wordpress, en «Páginas» > Añadir nueva y creamos una pagina que se llame «gracias» y que tenga la url /gracias/ (obviamente, el nombr y la url se puede poner la que se quiera), pero se debe cambiar entonces tambien el nombre, en el apartado «configuración Adicional» que hemos comentado anteriormente.
Nos vamos a «herramientas» > Shortcode Exex PHP y nos creamos un codigo html para recoger esos parámetros que pasamos por la url.
extract(shortcode_atts(array(‘arg’ => ‘default’), $atts));
print_r($_REQUEST);
Shortcode exec php
En ese caso unicamente pintamos el array que nos llega por la request, pero realmente ya con este array, podríamos hacer cualquier cosa. Pintar por pantalla los datos del formulario, enviar los mails que necesites y en el formato que se necesite, codigos de conversiones de analytics o cualquier otra herramienta, integraciones por pixel transparente, etc.
Ahora solo nos queda meter ese codigo de ejecución de PHP que hemos creado, en nuestro caso lo hemos llamado «gracias» y lo metemos dentro la pagina de gracias que nos hemos creado anteriormente.
De esta forma, podemos generar landing page en WordPress de una manera sencilla y utilizar todos los metodos de tracking, conversiones, etc para controlar la campaña.
Hola a ver si puedes ayudarme, necesito pasar 2 variables por la url y en cuanto meto la segunda me da fallo, vamos qu eno hace nada, seguro que es por como lo hago: esto es lo que pongo:
on_sent_ok: «var email = document.getElementById(‘your-email’).value; var name = document.getElementById(‘your-name’).value;location =’http://madridoktoberfest.es/2015/subscribe_contactar_sendy.php?your-movil=+movil&your-name=+name&your-email=’+email;»
Buenas,
tienes las comillas mal puestas creo.
on_sent_ok: “var email = document.getElementById(‘your-email’).value; var name = document.getElementById(‘your-name’).value;location =’http://madridoktoberfest.es/2015/subscribe_contactar_sendy.php?your-movil=»+movil+»&your-name=»+name+»&your-email=’+email;”
Algo así te debería funcionar. Prueba y me dices.
Saludos Amigo, presisamente este codigo es lo que necesito, pero en la consola me da el siguiente error, VM2681:1 Uncaught SyntaxError: Unexpected token ILLEGAL y me marca lo siguiente .value; location =’http://endocrinologica.lunas-design.com/gracias/?nombre=’+nombre”
si me podrias dar una mano, lo agradecira
Buenas,
mira el tema de las comillas. Copia y pega el codigo a un editor de texto y pon las comillas correctamente, porque seguramente en el copia/pega alguna comilla está incorrecta.
Hola David, lo primero gracias por el post, es justo lo que buscaba 🙂
he probado el código y la redirección la hace bien pero de devuelve esto en la página de agradecimiento:
Array ( [nombre] => undefined )
Cómo podría solucionarlo?
Muchas gracias.
Hola Francisco, comprueba que el parametro en el contactform7 se llama igual que le pones en el elemento getElementById
document.getElementById(‘your-name’)
Es decir, que en el formulario, has puesto el id y se llama your-name y que no le hayas puesto otro nombre.
Buenas tardes.
Ante todo agradecerte este post. Siguiendo la idea que explicas quiero hacer una función pero no sé cómo poder realizarla. Lo que necesito es que para que salte la página de agradecimiento se cumplan dos requisitos: que se envíe correctamente el formulario (on_sent_ok) y que el campo numérico que he creado en el formulario tenga un valor mínimo.
Gracias
Hola antonio,
puedes hacer en el contactform7, que el valor de un campo tenga un campo minimo
https://contactform7.com/number-fields/
hola buen post, creo que esto me sirve pero no entiendo muy bien como es, tengo un select dentro del formulario y necesito enviar el id de la opción que sea seleccionada al carrito de compras de woocomerce, para eso ya tengo una funcion en php que captura un valor de un campo select, pero no eh podido pasar el dato del contact form a mi funcion
Hola Julian,
el dato hay que pasarlo por javascript y luego recogerlo y ya puedes utilizar tu función php.
Enhorabuena por el post David.
Mi problema es que mis conocimientos son limitados en programación y no se como realizar lo que necesito.
Tengo una pagina de agradecimiento con un pixel de conversión y en ese pixel debo recoger el nombre y el email de la persona que relleno el formulario. El valor se llama «transactionID», pero desconozco como enviarlo a esa página, que se recoga y que luego pueda trackear nombre e id.
Te he enviado un email, ya que veo te dedicas profesionalmente a la programación a medida.
Gracias por tu respuesta. Un saludo