Contact Form es uno de los plugins más utilizados de WordPress para incluir formularios en nuestra página web de una manera rápida, sencilla y segura. En este tutorial vamos a Configurar Contact Form 7 y vamos a ampliar el típico campo de «Acepto la Política de Protección de Datos Personales» para que nos aparezca en un pop up utilizando jQuery.
En primer lugar comentar que partimos de un tema hijo, por lo que si no tienes instalado un tema hijo te recomiendo que te leas este post para seguir con el tutorial.
1. Instalar Contact Form en WordPress
La instalación de Contact Form es muy sencilla, basta con buscar el plugin desde el panel de control de nuestro wordpress (Plugins > Añadir nuevo) e instalarlo.
2. Configurar Contact Form 7
Una vez instalado, en el menú lateral izquierdo aparecerá un icono de un formulario con el texto Contacto, desde aquí podremos crear los formularios.
Al crear un nuevo formulario nos aparecerá el Título, un formulario maquetado y un generador de etiquetas, vamos a probar un formulario sencillo con Nombre, Apellidos, Teléfono, Correo, Comentarios y un CheckBox para aceptar los términos.
Bloque formulario
<p>* Tu nombre<br /> [fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][text* nombre] </p> <p>* Apellidos<br /> [text* apellidos] </p> <p>* Teléfono<br /> [text* telefono] </p> <p>* Email<br /> [email* email] </p> <p>* Comentarios<br /> [textarea* comentarios] </p> <p>[acceptance acceptance-terminos] <a class="opener" href="javascript:void(0);">Acepto los términos</a></p> <p>[submit "Enviar"]</p>
(*) Se ha utilizado un CHECKBOX para «Aceptar los términos» y se ha añadido un enlace con un Javascript para que abra nuestro pop up con el Aviso Legal. Mas adelante implementaremos nuestro tema hijo con Javascript para que funcione nuestro pop up.
Siguiendo con la configuración del mensaje, ahora en la parte inferior, donde aparece el bloque «Email«, configuramos el envío del mensaje, este mensaje es el que nos llegará a nosotros cuando un usuario rellene el formulario.
Bloque Email
Para: aquí nuestro correo, o el correo de nuestra web De: NOMBRE <nuestroEmail> Asunto: El asunto del correo --------------- Cuerpo del mensaje: <h1>Formulario de contacto</h1> Nombre: <strong> [nombre]</strong> Apellidos: <strong> [apellidos]</strong> Teléfono: <strong> [telefono]</strong> Email: <strong> [email]</strong> Comentarios: <strong>[comentarios]</strong>
(*) Marcar la casilla de «Usar contenido del tipo HTML»
Bloque Email (2)
Para configurar el mensaje respuesta tendremos que marcar la casilla «Usar e-mail 2» en el bloque inferior «E-mail (2)», una vez activado volverán a aparecernos los mismos campos que en el bloque anterior «E-mail», ahora al rellenarlo tenemos que tener en cuenta que es lo que queremos que a nuestro usuario le llegue:
Para: [email] De: NUESTRA WEB <nuestroEmail> Asunto: El asunto del correo ----------------------------------- Cuerpo del mensaje: <h1>Hola [nombre]</h1> El correo nos ha llegado correctamente, gracias por confiar en etc etc ....
(*) Marcar la casilla de «Usar contenido del tipo HTML»
3. Insertar el formulario en la web
Una vez configurado todo el correo, al guardar el formulario nos aparecerá su Shortcode, éste es el código que necesitamos para insertar el formulario tanto en nuestra web en una entrada, una página o un widget. Copiamos ese código y lo pegamos por ejemplo en una página, eso sí, en modo de Texto, no en modo Visual.
Y ya tenemos nuestro formulario en funcionamiento, ahora faltará implementar nuestro tema hijo para que se abra el pop up de Aviso legal.
4. Implementar nuestro tema hijo con Javascript
Necesitamos modificar el header.php y el footer.php, para ello debemos copiar los archivos del tema padre y llevarnoslos a nuestro tema hijo para realizar las correspondintes modificaciones.
Modificar el footer
Tenemos que copiar el footer.php del tema padre y pegarlo en nuestro template hijo para después implementarlo, por una parte añadiremos un div con el id=»dialog» y con el texto de «Aviso Legal», habrá que ponerlo justo antes de cerrar la etiqueta body:
<div id="dialog" title="Aviso Legal"> <p>Aquí el texto de aviso legal / política de protección de datos personales...</p> </div>
Y seguidamente pegamos el siguiente código Javascript:
jQuery(".opener").click(function() { jQuery("#dialog").dialog("open"); jQuery('#dialog').animate({scrollTop: '0px'}, 0); }); var cancel = function(){ jQuery("#dialog").dialog("close"); } jQuery("#dialog").dialog({ autoOpen:false, width: 800, /* el ancho del pop up */ height: 450, /* el alto del pop up */ modal:true, zIndex: 3999, });
Modificar el header
Tenemos que copiar el header.php del tema padre y copiarlo en nuestro tema hijo, donde añadiremos las siguientes líneas de código justo antes del cierre del head:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
8 respuestas
Gracias por el enlace, un saludo… 🙂
hola ya implemente los codigos al sitio padre pero nada ocurre.
que podria ser?
Hola Fradian,
comprobé el código y lo implementé en mi plantilla y a mi me funciona perfectamente (https://www.generacionweb.es/contacto/) Si quieres pasame el enlace al formulario y miro a ver que puede ser.
Creo que esa no es la opción correcta, contact form7 tiene una opción de campo aceptación para ese cometido, porq sino, si no marcas la casilla de las condiciones te lo trata como un campo obligatorio cuando hay un mensaje de error precisamente para las condiciones (tienes que aceptar las condicioens etc…)
Lo correcto es añadir un campo aceptación y añadir «acceptance_as_validation: on» en la configuración adicional
Espero que os sirva, 1 sldo
Muchas gracias Richard, actualizo el código.
Un saludo
De nada, enhorabuena por la web
Hola, primero gracias por el post. Tengo que implementarlo en un cliente y uso plantilla Avada. Sin embargo, he seguido todos los pasos y no se abre el pop-up. Os adjunto enlace de la página que usado. Por favor, ¿Podéis ayudarme?
https://www.marta-aguirre.com/prueba-contacto-con-java/
Hola Arsenio,
prueba instalarte estos plugin (Popup Builder y Contact Form 7 Shortcode Enabler) y luego en el contact form 7, en la línea de los términos le pones:
[acceptance acceptance-111][sg_popup id=»1″ event=»click»] Acepto los términos[/sg_popup]
Espero que te sirva!!