Configurar un formulario en Divi o Extra con casilla de verificación y política de privacidad

por | 31 Comentarios

Por fin Elegant Themes a respondido a las propuestas de los usuarios para la incorporación de un link en el formulario en DIVI y EXTRA. Con la nueva normativa europea sobre protección de datos europea, esta es una buena noticia para no tener que depender de plugins de terceros. Además, con las nuevas opciones de campos, podemos diseñar cualquier tipo de formulario y no sólo uno de contacto.

Suscríbete:

Cómo crear un formulario en DIVI y EXTRA con casilla de verificación

Las plantillas EXTRA y DIVI están consideradas como unas de las mejores y más versátiles dentro de WordPress. Por eso han querido dar a este punto una vuelta de tuerca y permitir una configuración más avanzada al típico formulario de contacto.

Los temas Divi y Extra, aunque mantienen algunas diferencias, permiten utilizar el Constructor Divi (Divi Builder) para generar las páginas o las entradas.

A partir de las actualizaciones 3.4 y 2.4 de DIV y EXTRA respectivamente, podemos olvidarnos de instalar otros plugins para estar dentro de la legalidad.

La nueva normativa europea, para todo blog o web que disponga de un formulario, por sencillo que sea, obliga a cumplir unas normas obligatorias para ofrecer una información y una seguridad sobre los datos que se insertan en estos formularios.

Un formulario básico de contacto debe tener, para estar oficialmente legal, la siguiente información:

  1. Una primera capa de información detallando quién, cómo, dónde y qué se hacen con los datos.
  2. Una casilla de verificación desmarcada para aceptar la política de privacidad.
  3. Un enlace directo a esa política de privacidad con la información más detallada de lo que se hace con los datos del usuario.

Por supuesto, hay que desarrollar los textos de la página donde mostraremos esa política de privacidad, junto con el aviso legal que necesitaremos mostrar al usuario, y que será muy diferente según el tipo de web que utilicemos y los complementos que tengamos integrados.

Antes de adaptar o crear el nuevo formulario, necesitamos disponer de las nuevas versiones para crear un formulario en DIVI o EXTRA. Si tenemos cualquier otro tema pero utilizamos el plugin «Divi Builder», también necesitaremos la última versión.

Crear la página para el formulario en DIVI o EXTRA

La actualización de esta entrada pretende ser una guía completa para crear un formulario (de ejemplo sencillo) y solventar algunos de los problemas que podemos encontrarnos.

Vamos a crear una nueva página, si no la tenemos todavía, en la que incluiremos unas datos de información, un mapa y un formulario en Divi (extrapolable a Extra y a cualquier web que use el constructor Divi).

El ejemplo que voy a realizar será una página de contacto, o de recogida de datos, totalmente terminada.

Lo primero de todo es generar la nueva página desde la barra superior de la administración o desde el menú de la izquierda, en la sección «Páginas > Añadir Nueva«.

Seguidamente escribimos el título de la página y activamos el «Constructor Divi«.

Crear nueva página para formulario en Divi

Crear las secciones de la página para el formulario en Divi

Actualmente hay dos formas de crear una página de contacto, utilizando una ya prediseñada o generando una desde cero.

Insertar una página de contacto prediseñada en Divi o Extra

Tanto Divi como Extra incorporan plantillas para generar una web completa, con todas sus secciones. Podemos utilizar cualquiera de ellas para insertar únicamente la página de contacto en nuestra web para luego personalizarla.

Para poder optar a esta opción, necesitamos estar registrados en Elegant Themes para disponer de una clave API que permita descargarnos estas plantillas.

Existe otra opción, si accedemos al blog de Elegant Themes, podemos descargar alguna de las plantillas suscribiéndonos de forma gratuita a la newsletter. Sólo tendremos que cargar los archivos manualmente y tendremos el diseño creado.

Suscríbete:

Si eres de los que tiene una clave API para conectar con los servidores de Elegant Themes porque has comprado el tema, tienes que pinchar en la pestaña «Cargar diseño«, navegar por las opciones que hay y elegir la página de contacto que más te guste.

Luego cambias las imágenes y los textos por los tuyos y lo adaptas a la nueva normativa europea de protección e datos (que veremos un poco más abajo como se hace).

Si quieres un mapa, tendrás que insertar uno propio a través del código de Google Maps o de la clave Api de Google.

Elegir presiseño de Divi para formulario de contacto

Crear una configuración de página de contacto en Divi de forma manual

El esquema de los módulos es el siguiente:

  • Una sección de anchura completa para insertar el módulo de mapa.
  • Una sección estándar donde colocaremos los módulos que consideremos necesarios para nuestro formulario.

Si no sabéis cómo funciona el «Constructor Divi», podéis echar un vistazo a este artículo donde explico cómo se utiliza.

Si utilizáis el tema Extra, tenéis que aseguraros que en el panel de «Atributos de página» está seleccionada la «Plantilla predeterminada«.

Plantilla predeterminada en Extra

Ahora añadiremos las secciones, las filas y los módulos necesarios, es recomendable tener un esquema de lo que queremos realizar para no equivocarnos e ir sobre seguro.

En este formulario añadiré dos secciones, una para un mapa de anchura completa, y otra que contenga una fila para el formulario e información adicional. Si el mapa no queremos que tenga una anchura total, elegimos una sección estándar.

Sección de anchura completa en divi

En la sección estándar donde irán los campos del formulario y la información, pinchamos en «Insertar columnas» y elegimos el formato que nos guste o necesitemos.

Sección estándar para formulario en div
Columnas para el formulario en Divi

El resultado sería algo parecido a esto antes de insertar los módulos necesarios. Vamos a dar a publicar para guardar los cambios.

Secciones de una página de contacto en Divi

En este momento podemos optar por trabajar desde la zona de administración o viendo los resultados en tiempo real en la parte frontal de la web. Pinchando en «Usar constructor visual» tendremos este aspecto:

Formulario en e editor visual de Divi

Insertar un mapa en el formulario de contacto

Tenemos dos formas de insertar el mapa:

  • Crear el código desde Google Maps, y pegarlo en un «módulo de código» para embeberlo en la página web.
  • Generar un código API que nos proporciona Google y que activará el «módulo del mapa» que ya hemos insertado.

La segunda forma nos ofrece un mapa con opciones y características mejoradas a través del módulo de Divi y la primera tan sólo insertaremos el mapa que vemos en el sitio de Google Maps.

Embeber o insertar el código de Google Maps

Para embeber en la sección del mapa el código conseguido, debemos elegir el «módulo de código» y pegarlo en la casilla del contenido. Esta opción mostrará el mapa según lo vemos en la aplicación de Google Maps.

Suscríbete:

El proceso es muy sencillo y rápido, pero no tendremos las opciones que nos ofrece Divi utilizando la clave API.

  1. Abrimos Google Maps.
  2. Buscamos la localización.
  3. Pinchamos en compartir.
  4. Seleccionamos la pestaña «Insertar mapa».
  5. Seleccionamos el tamaño.
  6. Copiamos el código y lo pegamos en el módulo de código de la sección de Divi de nuestra web.
Embeber mapa de Google en formulario en divi
Embeber mapa en formulario en Divi

Para ajustarlo a la anchura total de la web, cambiaremos los valores que hay dentro del código de la anchura por «width=»100%«, y pondremos la altura (height) que mejor nos quede.

Insertar el mapa con el «módulo de mapa»

Lo primero de todo es conseguir la API de Google, es gratuita y sólo se necesita tener una cuenta de Google. En el siguiente enlace te explico todo el proceso para conseguir la API de los mapas de Google

Una vez que tengamos la clave, la pegaremos en la casilla de la «Clave API de Google«, en las opciones generales del tema, guardamos los cambios y volvemos a la edición de la página del formulario en Divi.

Clave API de maps para formulario en divi

Añadimos un módulo de mapas y lo editamos para configurarlo.

Módulo de mapa del constructor Divi

Entre las ventajas que incorpora al formulario del módulo del mapa, están la de añadir y marcar varios puntos de referencia, activar el zoom con el ratón, que se pueda arrastrar en los dispositivos móviles, localizar un punto central de referencia o colocar un texto descriptivo personalizado en cada punto de localización.

Módulo de mapas para formulario en DIVI

Añadir la información de la web

A la hora de seleccionar los módulos, elegimos «Formulario de contacto» para el formulario, y la configuración que queramos para los datos de contacto.

En esta composición están los módulos de «Imagen» en el que colocaré el logotipo, «Texto» donde irán la dirección, el teléfono y algún dato de interés y «Seguir en medios sociales» para enlazar desde la página con las redes con las que se tenga una cuenta.

No voy a entrar a describir cómo se configuran estos últimos módulos, pues son muy intuitivos y fáciles de crear.

Módulos para el formulario en Divi
Datos de la web en formulario en divi

Personalizar el formulario de contacto en Divi

Al añadir el módulo del formulario, vienen preestablecidos los campos del nombre, del email y del mensaje. Además tenemos un «captcha» para evitar el envío masivo a través de nuestro formulario. Un punto para los chicos de Elegant Themes.

Partiendo de que cada uno tendrá sus preferencias y compondrá el formulario según las necesidades, voy a centrarme en los aspectos generales y más importantes, dividiendo este apartado en otros dos: la configuración del formulario y la configuración del envío.

Configurar los campos del formulario en Divi

Podemos añadir tantos campos como queramos: los básicos para crear un formulario de contacto o crear un formulario que recoja todos los datos que necesitemos del usuario, una hoja de registro, información para un presupuesto…

Para configurar los campos del formulario tenemos que ir dando en «Añadir nuevo Campo«, tantas veces como campos queremos que tenga el formulario.

Por defecto vienen el nombre, el email y el mensaje, pero podemos poner teléfono, edad, ciudad… Tan sólo hay que configurar uno a uno diciendo que tipo de entrada es.

Campos de formulario del formulario en Divi

Según el campo que queramos agregar, tenemos que fijarnos en una serie de opciones que le harán único. Sin entrar en los aspectos visuales, las más importantes son estas:

  • Identificación de campo: El nombre que lo va a identificar dentro del código del formulario de la web, será el mismo que utilizaremos para componer el mensaje que nos llegará al correo. Debe ser un nombre sin espacios ni caracteres especiales.
  • Título: Es el texto que aparecerá por defeco dentro del campo.
  • Tipo: Dependiendo de l información que queramos recopilar, tendremos que elegir una de ellas.
    • Campo de entrada – Hace referencia al nombre, apellidos, ciudad, país…
    • Campo de correo electrónico – Ya lo dice el nombre.
    • Área de texto – Lo utilizaremos para permitir escribir una cantidad de texto superior al campo de la entrada, como los mensajes.
    • Checkboxes – Casillas de aceptación (Opción de añadir un link de momento sólo desde el «Constructor Visual»).
    • Botones de Radio – Opciones con forma de botón. (Opción de añadir un link de momento sólo desde el «Constructor Visual»).
    • Seleccionar Desplegable – Opciones ocultas en un menú desplegable.
  • Campo obligatorio: Permite elegir si queremos que sea obligatorio rellenar o marcar el campo.
  • Lógica Condicional: Esta opción puede ocultar los campos que elijamos hasta que cumplamos alguna de las opciones que establezcamos.
  • Hacer anchura completa: Decides si quieres que el campo ocupe la mitad o la totalidad de la anchura del módulo. (En la pestaña «Diseño«).

Siguiendo estas pautas, mi formulario en Divi se compondrá de la siguiente manera:

Campos del formulario en Divi

Cumpliendo con la legalidad y la normativa de protección de datos de un formulario en DIVI

Este aspecto es importante, y afecta a nivel mundial ya que, aunque la normativa se aprobó en Europa, todas las webs o blogs que quieran funcionar dentro de este marco, sean del país que sean, deben adaptarse.

Para cumplir legalmente con un formulario en Divi, tenemos que enlazar desde el mismo formulario, con un link, a la política de privacidad, que debemos haber añadido en una página independiente, explicando muy claro para que utilizaremos los datos que pedimos en el formulario.

Crear el enlace a la política de privacidad en un formulario

Para crear el enlace tenemos que usar el «Constructor visual«, ya que desde las opciones de la administración aun no está habilitada esta función, pero tampoco es necesario que esté.

Seleccionamos y editamos el campo que contiene una casilla de verificación o «checkbox«. Si no teníamos creado este campo, tendremos que hacerlo y añadirlo al final del formulario.

  1. En las opciones de este campo escribimos el principio de una frase como «He leído y acepto la«.
  2. De los iconos del final de esa misma casilla picamos en el segundo que tiene forma de cadena, se abrirá una nueva ventana donde pondremos la url que enlace a la página de la política de privacidad y el texto que aparecerá como enlace, en mi caso el final de la frase anterior «política de privacidad«.
Casilla de verificación con enlace GDPR
Inserción de la primera capa de información

Esta capa no es más que un texto muy reducido de lo que pasa con los datos personales que insertan en los campos del formulario.

Añadimos un módulo de texto y colocamos un texto como este:

Primera capa protección de datos

Este módulo podemos darle el aspecto que queramos, como añadir un color de fondo para resaltarlo o diferenciarlo del resto del formulario. El aspecto final del formulario en Divi sería el siguiente:

Aspecto final del formulario en Divi

Configurar las opciones de envío del formulario en divi

Para que el formulario funcione, hay que configurar las opciones de la primera pestaña del módulo, donde colocaremos el e-mail que hayamos elegido para recibir los mensajes del formulario

  • Título: Permite poner un título al formulario de contacto.
  • Mensaje de éxito: Podemos escribir el texto que aparecerá tras enviar el formulario correctamente.
  • Texto del botón de Enviar: Aquí podemos modificar el texto que aparece en el botón, muy útil en las ocasiones en el que aparece en otro idioma y no sabemos como traducirlo.
  • Correo electrónico: Es el correo electrónico que recibirá los mensajes. WordPress utiliza la función «mail()» de php, la cual puede estar deshabilitada en algunos servidores para evitar el envío masivo de spam y podríamos tener algún problema de envío. Siempre podemos instalar un plugin que permita enviar correos a través de SMTP, saltando la función php del servidor. Patrón del mensaje
  • Patrón de mensaje: Cuando se envía el formulario, el formato del mensaje que recibimos es muy básico y sólo incluye los campos que tengamos marcados como «Campo de entrada» y «Área de texto». El campo del correo electrónico no se incluye en el mensaje, pero podemos verlo en la cabecera del email como la persona quien nos lo envía. Si queremos ver todos los datos que pedimos en el cuerpo del mensaje, tenemos que crear un patrón en esta casilla (más abajo os lo explico).
  • Mostrar Catpcha: Aquí activamos la acción de sumar los números antes de enviar el formulario.
  • Activar URL de dirección: Podemos redirigir al usuario a la página principal o a otra que nosotros elijamos.
Crear un patrón de mensaje para el formulario en Divi o Extra

Como decía ates, si no configuramos un «Patrón de mensaje«, recibiremos un texto bastante feo, en el que además pueden faltarnos datos de los que solicitamos en el formulario y aparecer otros que no son interesantes.

Correo recibido de formulario en divi

Utilizando los nombres que hemos usado para identificar cada campo del formulario, escribimos una plantilla del mensaje que queremos recibir, introduciendo los datos importantes con el formato «%%Identificación del campo%%«.

Correo recibido de formulario en divi con patrón

Procurad no equivocaros a la hora de poner los nombres o no recibirás el correo correctamente.

Otras configuraciones del formulario en Divi

Como os dije, no voy a entrar en el diseño, ya que es un campo en el que cada uno tiene sus gustos, pero DIVI nos permite cambiar tipografías, tamaños, colores de fondo o del borde, aspecto del botón… un montón de aspectos para crear un formulario único para nuestra web.

Enviar formulario a través del protocolo SMTP en WordPress

Puede fallarnos el envío de los formularios por muchas razones, cuando pasa esto hay que controlar algunos aspectos e intentar ponerles solución.

WordPress gestiona los envíos a través de la función php mail(), pero hay servidores, sobre todo los gratuitos o con bajos recursos, que la tienen desactivada para no sobrecargar el servidor o evitar los envíos masivos de spam.

Si perteneces a este grupo, te recomiendo que cambies a un servidor más decente, si quieres que tu proyecto crezca no puedes ir racaneando, y menos en la cuestión del hosting o servidor.

Te recomiendo un servidor económico pero sin estos problemas como Hostgator, o uno especializado en WordPress y asequible como Siteground, que es el que yo uso y no tengo queja alguna.

Antes de configurar una alternativa al envío por defecto de WordPress, podemos probar y comprobar lo siguiente:

  • Qué hemos escrito correctamente el nombre del email en la casilla correspondiente, sin espacios adicionales o caracteres equivocados.
  • Que utilizando un correo diferente seguimos teniendo el miso problema.
  • Que los formularios no están llegando a la bandeja de spam de nuestra cuenta de correo.
  • Que el servidor o hosting contratado disponga de un servicio de correo. Aunque tenga activado php mail(), si no dispone de servidor de correo, los formularios no se enviarán (es muy habitual en los hosting gratuitos).

Configurar una conexión SMTP de un servidor de corroe

Vamos con la solución más o menos mágica. Pero primero voy a explicar en que consiste.

Lo que vamos a hacer es utilizar el servidor de correo electrónico de una cuenta que disponga de un protocolo SMTP, que normalmente estará fuera de nuestro servidor, aunque puede ser un correo creado en el mismo servidor (servidores o hosting con servicio de correo pero con a función php mail() deshabilitada).

Para configurar este método necesitamos los datos de envío de un correo:

  • Cuenta de e-mail
  • La contraseña de la cuenta de e-mail
  • Servidor de correo saliente
  • Puerto de correo saliente

Estos datos los podemos localizar en la ayuda o configuración de cualquier correo electrónico. Por ejemplo aquí podrás ver los datos de Gmail o en la imagen los de una cuenta de un servidor contratado.

Datos de servidor SMTP de correo para formulario en divi

Ahora instalamos y activamos un plugin que permita integrar estos datos con WordPress. Los que yo suelo utilizar son WP Mail SMTP o Easy WP SMTP

Abrimos los ajustes e integramos los datos en las casillas correspondientes. Estos plugins suelen tener una pestaña de prueba para realizar una comprobación de envío.

Plugins de envío por SMTP

Es probable que tengamos que realizar algunas pruebas utilizando los diferentes puertos de envío (25, 465 0 587) y los protocolos que puede soportar el correo que usamos (SSL o TSL). Estos datos varían según el prestador del servicio, pero suelen venir especificados cuando consultamos la información de ayuda.

También es posible que tengamos que evitar que los correos lleguen a la carpeta spam, debéis crear un filtro o una regla. En algunas ocasiones es suficiente añadir el email a los contactos, pero no siempre funciona. Podéis ver cómo se hace con una cuenta de Gmail.

Modificar el e-mail de envío que utiliza Divi

La creación del formulario nos permite introducir un correo electrónico en el que recibiremos los mensajes, pero quien los envía es otro diferente, se trata de un e-mail creado por Divi y asociado a nuestro dominio.

Si observáis las imágenes del apartado anterior, o si estáis recibiendo ya mensajes desde vuestra web, podéis observar que el remitente es «[email protected]». Como apunte decir que Divi ya ha modifica el correo, cualquier otro tema utiliza el correo «[email protected]» para enviar los mensajes.

Hay tres formas de modificar este aspecto, una de ellas ni la mencionaré al tener que cambiar código en los archivos del core de WordPress, que perderemos con las futuras actualizaciones.

Utilizar un plugin para cambiar el correo del remitente

La opción más fácil para quien no quiera complicarse la vida es utilizar WP from email , este plugin tiene dos campos de configuración, el correo que queremos que aparezca en los mensajes y el nombre del remitente.

Si queremos que el e-mail que introducimos sea funcional y pueda ser contestado, tiene que ser un e-mail que exista, independientemente de que esté asociado al dominio de la web o no.

plugin cambio de email en DIVI

Añadir un pequeño código al archivo funtions.php

Para utilizar este método tienes que tener activado el envío de correos a través de php en tu servidor.

Generalmente todos los servidores decentes tienen esta función, puedes comprobarlo fácilmente si al entrar en la administración solicitas una nueva clave (como si se te hubiese olvidado), si recibes el correo es que funciona.

Para este proceso debemos haber creado antes un tema hijo de Divi o sobre un plugin de funciones personalizadas creado por nosotros. Siempre que se hagan cambios a nivel de código hay que hacerlo así para no perder las modificaciones o cambios con las actualizaciones.

Si ya tienes tu tema hijo o plugin de personalización, añade este código al final del archivo funtios.php.

En el código anterior debes modificar las siguientes opciones:

  1. En la primera función sustituye «[email protected]» por el correo que quieres utilizar como remitente.
  2. En la segunda función, donde pone «Nombre del remitente» pon el nombre que queréis que se muestre como remitente del correo.

asegúrate de comprobar que no se han eliminado ninguna comilla, llaves o paréntesis, guarda los cambios y comprueba que todo funciona.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

31 Comentarios

  1. Esteban

    Hola que tal Juan, he tenido un problema y es que el php que pusiste arriba, lo quiero insertar al chile theme pero me marca error y hago los formularios pero el botón de enviar no funciona.

    Espero puedas ayudarme

    Responder
    • Juan

      Hola Esteban,

      He comprobado el código con formularios del tema Divi y en otros temas y funciona correctamente. Comprueba que antes de insertar el código tienes bien configurado el módulo del formulario. Debes colocar un correo de envío para que el botón se active.

      Ese correo es el que luego se sustituye por el de la función.

      Responder
  2. marcos

    Hola buenos días:
    Me ha resultado muy útil tu tutorial para poder adaptar mi formulario de contacto con DIVI.
    La consulta sería por el tema de la casilla de verificación, la de aceptar la política de privacidad, puesto que siempre me sale en el formulario el título de esa casilla, no se si hay alguna forma de que solo se vea la casilla y no se vea el título del campo.
    Veo que en el video del tutorial se ve el título, sin embargo en las capturas de pantalla que pone a lo largo del tutorial no sale el título de la casilla de verificación.
    Un saludo

    Responder
    • Juan

      Hola Marcos,
      Para que desaprarzca el texto sólo tienes que escribir un espacio en blanco en el «Título» de la casilla de verificación. Te dejo un enlace a una imagen para que puedas ver dóde hay que hacerlo. https://prnt.sc/s3mwob

      Responder
  3. Emiliano

    Fantástico el vídeo.

    Estaba configurando un formulario, y no me llegaban los correos.

    Ver el vídeo y mano de santo.

    Responder
  4. Patricia

    Muchas Gracias por el post me has ayudado mucho, sobretodo en que no entendía para qué era eso de la Lógica.

    Responder
    • Juan

      Hola Patricia,

      Tengo pendiente actualizar el artículo con la nueva versión de DIVI 4, pero me alegro que haya podido servirte todavía. Si quieres ver un vídeo sobre cómo uso la lógica condicional para mostrar y ocultar campos, puedes seguir este enlace: https://youtu.be/Vn4p5BlfWBg

      Responder
  5. Alberto

    Hola Juan, antes de nada muchas gracias por tu ayuda.
    Una pregunta, en un formulario con casilla de teléfono y coreo electrónico, hay alguna forma de hacer obligatorio introducir al menos uno de los campos? Ya he visto la opción de hacerlo obligatorio, pero me gustaría dar la opción de poner uno u tro como forma de contacto, sin obligar a poner los 2.
    Muchas gracias de antemano, un sakludo

    Responder
    • Juan

      Hola Alberto,

      Acabo de publicar un vídeo explicando un proceso en el módulo del formulario para elegir que campo rellenar y que sea obligatorio.

      https://youtu.be/Vn4p5BlfWBg

      Cuéntame si te sirvió, gracias.

      Responder
  6. Alex

    Buenas, llegue a tu post después de muchisima busqueda en google. En una de mis webs estoy usando Divi como theme, pero el formulario de contacto que ofrece por defecto no me convence mucho, por lo que cree mi propio formulario con html y css. Cree y subi a mi servidor un archivo .php que enviaria el formulario a mi correo. Me salta un aviso alertandome de que mi solicitud parece propia de metodos de spam y no envia el formulario.

    Quite el .php de la raiz y subi su contenido al funtions.php entonces empezo a generarme correos automaticos sin ninguna informacion dado que los campos estaban vacios por lo que intuyo que el codigo de envio esta bien creado, lo copio por si acaso

    Podrías iluminarme un poco en como poder incluir mi propio formulario de contacto en divi y que funcione?

    Un saludo y gracias

    Responder
    • Juan

      Hola Alex,

      Existen muchas formas de crear un formulario personalizado sin tener que recurrir a la programación. Utilizando WordPress, que te da todo hecho, no tiene sentido inyectar más código php o html a una web.

      Si no te gusta el formulario por defecto, siempre puedes instalar otro plugin como contact form 7 que permite más opciones, o simplemento adaptarlo con css modificando el aspecto.

      Si añades funciones de envío a través de WordPress puedes ocasionar conflictos de programación, ya que no sólo se utiliza la función «enviar» con el formulario, también con los comentarios de los artículos y los mensajes de administración.

      Responder
  7. Alberto

    Hola,
    tengo un problema con los formularios de «Divi Contact Exxtended». Los formularios los envía bien, pero en la pestaña «Form Submisions» me aparecen los envíos de formulario desordenados en la fecha, ¿Sabes como puedo corregirlo?

    Un saludo y muchas gracias
    Alberto

    Responder
    • Juan

      Hola Alberto,

      «Divi Contact Extended» es un plugin de pago que no tiene nada que ver con los creadores de Divi, Elegant Themes. Por lo que seguramente no sea totalmente compatible o las actualizaciones necesarias no son tan efectivas ni van al ritmo de los cambios que ha sufrido Divi en los últimos meses.

      Siento no poder ayudarte porque no conozco el plugin y no se como funciona, si es cierto que conozco a más gente que ha tenido algún problema con ese mismo plugin . Lo único que puedo sugerirte es que envíes un mensaje o comentario al creador del plugin para que te ofrezca la solución.

      Responder
  8. jorge

    Hola, felicidades por el post.

    Tengo una duda. En el campo de correo electrónico se pueden poner varios destinatarios para un mismo formulario? Si pongo dos correos separados por ; el correo ya no se envía…hay alguna forma?

    un saludo

    Responder
    • Juan

      Hola jorge,
      Para enviar el formulario a varios destinatarios tienes que colocar los correos separados por coma » , «. El punto y coma no funciona normalmente en ningún formulario de una web.

      Responder
  9. Mar

    Hola! muchas gracias por el artículo, muy completo. Solo una duda: ¿es posible que el mensaje de éxito (una vez enviado el formulario con éxito) se redireccione a una ventana específica para, posteriormente, poder rastrear objetivos de conversión? Un cordial saludo!

    Responder
    • Juan

      Hola Mar,
      Puedes redirigir a otra url diferente dentro de la misma ventana donde se encuentra el formulario, pero no a otra diferente. No hay una opción para seleccionar el tipo de comportamiento que tendrá el link. Supongo que tocando código se podría conseguir.

      Responder
  10. Manuel José Riquelme Tejero

    Hola! gracias por el post!

    Tengo un pequeño problema, no me aparece la opción de enlace en el campo de checkbox y no se como puedo poner el enlace 🙁

    Me ayudas? alguna idea?

    Gracias!

    Responder
    • Juan

      Hola Manuel, ¿estás editando el formulario en el Constructor visual? La opción de colocar un enlace sólo aparece si editas el módulo desde la parte visual.

      Responder
  11. Fernando

    Hola Juan, en primer lugar felicitarte por el buen trabajo que haces, en segundo lugar quería preguntarte si es posible cambiar el remitente para que no sea [email protected] y poner delante de la @ info o cualquier otro nombre.

    Gracias de antemano.

    Responder
    • Juan

      Hay dos formas de hacer el cambio, la fácil utilizando un plugin como «Change From Email«. Sólo tienes que instalarlo y escribir qué correo quieres que aparezca y qué nombre, y lo sustituirá cuando envíes el formulario automáticamente.
      Hay otra menos fácil, pero habría que crear un tema hijo y realizar unas modificaciones en el archivo funtions.php. Si estás interesado en este método dímelo y lo explico.

      Responder
      • Fernando

        Casi que me decanto por el código para no abusar de plugins.

        Responder
        • Juan

          Me parece bien, actualizaré el artículo a lo largo del fin de semana para ofrecer esa opción a todo el que lo necesite.

          Responder
          • Fernando

            ok, muchas gracias! cuando este publicado lo implento y te confirmo si todo funciona bien.

            Responder
    • Juan

      Hola Fernando, he actualizado el artículo y he añadido las opciones para cambiar el remitente del formulario, tanto con el plugin como con código. Espero que te sirva.

      Responder
  12. Pilar

    Buenos días, ante todo muchas gracias por compartir el artículo.
    En el Checkbox, en el campo «aceptar condiciones de privacidad» ¿cómo puedo hacer para insertar un enlace para leer la política de privacidad? he intentado meter el enlace en el texto pero no he podido. Te agradecería cualquier sugerencia.
    Un cordial saludo.

    Responder
    • Juan

      Hola Pilar, el formulario creado con Divi Builder no permite colocar ningún enlace, sólo advertir de que se leea la política de privacidad, cuyo enlace puede encontrarse en le footer de la web y, en tal caso, marcarlo como que se ha hecho esa acción.
      Si quieres un formulario con esa posibilidad de configuración, puedes instalar el plugin contact Form 7, que permite muchas más opciones y adaptarlo al estilo de la web con CSS.

      Responder
      • Alex

        Hola Juan, primero de todo gracias por el artículo.

        Me he leído el apartado de «Cumpliendo con la legalidad y la normativa de protección de datos de un formulario en DIVI» pero a la hora de seleccionar la checkbox no me aparece el campo «Opciones» con la opción de poner enlaces. ¿sabes porque podría ser?

        Muchísimas gracias!

        Responder
        • Juan

          Hola Alex,

          la nueva función para colocar un link en el checkbox sólo funciona desde el editor visual, pero tienes que tener actualizado el tema DIVI o EXTRA a la última versión que es la 3.4 y 2.4 respectivamente, (en lo que he escrito el artículo han sacado la X.4.1).

          Estoy haciendo un vídeo para completar el artículo, entre hoy y mañana lo añadiré.

          Responder
  13. Jorge

    Buenos días, buen artículo, gracias por compartirlo.
    Tengo un problema con un formulario en Divi, lo he creado y funcionaba perfectamente, sin embargo últimamente tengo que darle a enviar hasta 3 veces para que lo haga correctamente. Me explico, con el formulario relleno, tecleo el captcha, le doy a enviar y me aparece el mensaje «Por favor, actualice la página y vuelva a intentarlo.» Vuelvo a teclear el captcha, le doy de nuevo a enviar y me vuelve a aparecer el mismo mensaje, así hasta la tercera vez que ya se envía el mensaje. He realizado pruebas poniendo otro correo y funciona bien, sin embargo con uno de hotmail y otro del mismo dominio en el que está alojada la página no me funciona. Probé a bajar la versión de php (estaba en la 7.0) y sigue fallando.

    ¿Se te ocurre por qué puede ocurrir esto?

    Responder
    • Juan

      Habría que realizar varias pruebas para ver de donde viene el fallo. Si te pide que rellenes el captcha cada vez, probaría a desactivarlo para ver si ese es el problema. Los servidores de hosting suelen poner medidas de seguridad frente a diversos tipos de correos, outlook, hotmail. yahoo… ya que muchas veces se utilizan para el reenvío de spam. Una solución sería configurar un correo a través de SMTP, así saltarías las medidas del servidor y te asegurarías el envío del mensaje.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido