Configurar Contact Form 7 con aviso legal en pop up

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>