Crear un enlace en una casilla de verificación de un formulario Divi

por | 19 Abr, 2018 | Blog, Divi, Formularios, JavaScript

Formulario Divi

La verdad es que con las últimas actualizaciones de Divi, ha habido un gran salto de calidad en las opciones del tema ya de por sí espectaculares. Y uno de los módulos que ha sido mejorado sensiblemente es el formulario de contacto. Cierto que no tiene las opciones de algunos plugins premium como Gravity Forms, pero la mejora ha sido importante.

Se le añadió la lógica condicional, las casillas de selección y los botones de radio. Por nombrar algunas de las nuevas funcionalidades más significativas.

Y vamos a aprovechar este tutorial para repasar algunas opciones para personalizar un formulario. Y además vamos a añadir un link que permita al usuario leer el aviso legal de nuestra página antes de enviar el formulario.

También puedes darle un toque de animación a tus campos de formulario personalizándolos como te explicamos en este otro tutorial.

Requisitos legales

Ahora prácticamente cualquier página cuenta con un formulario de contacto. Esto nos “obliga” a cumplir con una serie de requisitos legales como la consabida política de cookies o la ley de privacidad. Entre otras cosas debemos incorporar enlaces a una página que explique la política de privacidad de nuestra web. A otra que muestre la politica de cookies, etc.

Y también es habitual contar con una casilla al final de nuestro formulario que el usuario debe activar para manifestar su conformidad con nuestra política legal. Si no la activa no se envía el formulario. Ahora todo esto es posible hacerlo sin problemas con las actuales funcionalidades del formulario de contacto de Divi.

Lo que no hace el formulario todavía

Pero también podríamos agregar, como comentaba al principio, un link en nuestra casilla de activación o checkbox para que el usuario pueda leer el texto legal antes de activar el checkbox y enviar el formulario.

Esta es la novedad de esta práctica que incorporaremos a nuestro formulario.

Así que vamos a crear un sencillo formulario de contacto que nos servirá de repaso de este módulo y añadiremos el vínculo al checkbox con un poco de JavaScript. Para ello vamos a utilizar el tantas veces olvidado módulo. Aquí puedes ver cómo va quedar el formulario una vez terminado.

Politica web

Una cosa más

Otra cosa que también haremos es ocultar el título de la casilla de verificación. Parece más un estorbo que una ayuda. Y necesitamos nombrar nuestro checkbox porque si no lo hacemos, cuando el usuario quiera enviar el formulario sin activar la casilla, en el mensaje de advertencia aparecerá la opción vacía, fíjate en la captura.

titulo-checkbox-en-Crear un enlace en una casilla de verificación de un formulario Divi

 

Crear el formulario Divi

Como siempre, lo primero que haremos será crear una nueva página o entrada y activamos el constructor Divi. Insertamos una columna y acto seguido un módulo tipo formulario.

formulario-de-contacto

Yo he desactivado la opción de captcha en las opciones de elementos de formulario y he guardado.

Luego volveremos al módulo formulario para configurar lo que nos falta.

Ahora vamos a personalizar los distintos niveles de esta sección, esto es, la sección, la fila y el módulo.

Configurando la sección

Abrimos los ajustes de la sección que contiene la fila con el formulario. Solo cambiaremos el fondo de la sección que estará formada por dos colores y que configuramos desde el apartado fondo, pestaña de degradado (la Segunda) en los ajustes de contenido. Yo he elegido un morado y un amarillo como colores. Exactamente, el código del primero es #7900f2 y el segundo #ffd800. El degradado es lineal con inicio al 0% y final 60%. Experimenta tú con tus colores preferidos. Cuando termines guarda y vamos a por la fila.

configuracion-seccion-formulario-checkbox

Ajustes de la fila

Activa la construcción visual para ver los cambios en pantalla en el momento de realizarlos. Así tendremos más control sobre la personalización.

Pulsamos el botón de configuración de la fila. En la primera pestaña, contenido, solo vamos a cambiar el color de fondo a blanco.

Ahora click en la segunda pestaña, diseño, donde realizamos los siguientes ajustes:

  • Vamos a añadir un poco de “aire” a derecha e izquierda del formulario, de manera que, en Separación (espaciado si tu tema es Extra) > relleno personalizado, escribimos 3% tanto en la casilla derecha como izquierda.

relleno-personalizado-fila-checkbox

  • Ponemos un borde de 8 px y elegimos color. Yo he puesto #bb81e8

ajuste-borde-fila-checkbox

  • Finalmente configuramos una sombra, los valores que yo he usado son 0 px en posición vertical y horizontal. Fuerza de desenfoque de la sombra: 30 px. Fuerza  de la extensión de la sombra: 8 px. El resto de valores los dejamos por defecto.

Y ahora el módulo

Retomamos ahora los ajustes del módulo formulario, así que abrimos la configuración del módulo. Añadimos la casilla de verificación, añadiendo campo y, en tipo, seleccionamos Checkboxes. Rellenamos  Identificación del campo y Título (en texto) y el texto que aparecerá a la derecha del checkbox (en  opciones de campo). Realmente da igual lo que pongas aquí, porque lo cambiaremos mediante código JavaScript.

Respecto al estilo, en la pestaña diseño, ajustamos los bordes redondeados a 4 px, ancho 1 px y color de borde #bfbfbf, que es un gris suave.

También elegimos una sombra dura, eligiendo como punto de partida la cuarta opción de las disponibles. Ahora cambiamos la posición horizontal y vertical a 4 px. Aplicamos ahora un color a la sombra. En mi caso rgba (73,98,139,0.5). Y ya tenemos nuestro formulario customizado.

opciones-de-sombra-formulario-checkbox-divi

Ahora vamos a añadir el enlace.

Añadir el enlace a nuestra página legal

Vamos utilizar un módulo de código para insertar el JavaScript necesario. Lo ponemos en un módulo de código en lugar del apartado integración del tema (Divi > opciones de tema > integración) porque no quiero que se ejecute este script cada vez que se accede a la página. Sólo cuando se entre en la página del formulario. Si necesitamos poner el formulario en varias páginas, podemos convertir la sección en global. Además, de esta manera es más fácil crear varios formularios con enlaces distintos. Así que creamos un módulo tipo código, en la sección del formulario y pegamos el código que te facilitamos  a continuación.


icono-javascript

Pulsa para abrir el código

 

Aquí tienes una captura subrayada en distintos colores y más abajo como adaptarlo para tu formulario.

javaScript-modulo-codigo-formulario

La línea de color azul destaca la clase que vamos a modificar. En rosa el texto que NO incorpora ningún link. Sobre la línea gris la dirección del enlace, rojo para el texto que lleva el link (al pulsar sobre él nos va a llevar a la página que indicamos sobre la linea gris). Por último, el texto subrayado en verde es el estilo añadido al texto. Podríamos customizarlo más. Por ejemplo, que el link se abra en nueva pestaña, etc.

Listo, ya lo tenemos.

Ahora un poco de css para ocultar el nombre de nuestro checkbox. En la configuración de la página, en avanzado css, añadimos este CSS:

.et_pb_contact_field_options_title { 
display: none; 
}

 

ajustes-css-divi-builder-pagina

Esto hará que no se vea el nombre pero si no se activa la casilla, sí aparecerá en el mensaje de advertencia de que es obligatorio activarlo.