Vamos a ir un paso más allá de lo que se supone que es un sencillo formulario de contacto. Normalmente, los campos para el nombre, email, teléfono y una casilla para escribir un mensaje son suficientes para ponernos en contacto con el administrador de una web. Pero si necesitamos algún campo especial, como adjuntar archivos al formulario, la cosa se complica un poco.
Crear formularios con campos especializados en DIVI
El módulo de formulario que trae el constructor Divi Builder no permite crear un campo en el que adjuntar un archivo que se entregue al enviar el formulario, por eso tenemos que instalar un plugin que pueda crear esta función. El elegido es el plugin Contact Form 7.
Para seguir los pasos de este tutorial tenemos que tener instalado el tema DIVI, EXTRA o el plugin DIVI BUILDER en nuestro WordPress, aunque muchos de los puntos se pueden extrapolar a otros temas:
- Instalar el plugin Contact Form 7.
- Conectar con la API de Google reCAPTCHA.
- Crear los campos que necesitamos para el formulario.
- Adaptar los estilos al aspecto del tema.
Seguro que os preguntáis para qué necesitáis poner un reCAPTCHA, el formulario que voy a mostraros es un formulario que cumple con la nueva ley europea de protección de datos, por lo que cualquier filtro que impida el envío masivo de correos o spam es bienvenido, y si es gratis mejor.
Instalar y configurar el plugin Contact Form 7 en DIVI
La instalación se realiza como cualquier otro plugin o complemento, desde la pestaña "Plugins" del administrador en "Añadir nuevo". Lo buscamos, instalamos y activamos. Aparecerá una nueva pestaña en el menú de la izquierda llamada "Contacto".
Integración de la API de Google reCAPTCHA con Contact Form 7
Antes de crear el formulario vamos a colocar las claves API de Google para poder utilizar el reCAPTCHA y beneficiarnos de la seguridad que nos ofrece este complemento.
Picando en la pestaña "Contacto > Integración", aparece una ventana con un botón que pone "Configurar claves". Al pulsarlo aparecen dos campos, uno para la clave secreta y otra para a clave del sitio. Ahora estarás pensando dónde conseguirlas, no te preocupes, sólo necesitas tener una cuenta de Google.
Para obtener las claves picamos en el enlace que nos ofrece la misma ventana, o puedes acceder desde aquí. Se abrirá una nueva ventana en el navegador con la web de Google reCAPTCHA.
En la parte superior de la web de Google reCAPTCHA hay un botón azul que pone "My reCAPTCHA", lo pulsamos para poder elegir qué tipo de seguridad queremos. Recordad que tenemos que estar logados con nuestra cuenta de Google o Gmail, de no estarlo nos pedirá que nos identifiquemos antes.
Una vez dentro nos pedirá que rellenemos una serie de opciones:
- Un nombre para poder identificar y administrar la API, ya que podemos generar varias APIS diferentes si lo necesitamos (si tenemos varias webs).
- También marcaremos el tipo de reCAPTCHA que queremos en ese momento, yo recomiendo la más sencilla que es la "V2 > Casilla", ya que el resto requiere Java Script y no todos los servidores o temas de WordPress tienen soporte para este método. Tal vez en un futuro se globalice todo.
- Al marcar la casilla se despliega otro campo donde colocaremos el nombre del dominio de la web donde estamos creando el formulario, sin protocolo ni www, sólo el nombre y la extensión.
- Marcamos las casillas de aceptación del servicio y terminamos pulsando en "Registrar".
En la siguiente ventana aparecerán los dos números (claves) que tenemos que copiar y pegar en las casillas del plugin Contact Form 7.
Como puedes ver, el proceso es muy sencillo, y se puede añadir el reCAPTCHA a otros plugins de formulario diferentes como Ninja Forms o Pirate Forms.
Configuración de un formulario en DIVI con reCAPTCHA y campo de archivo adjunto
A diferencia del formulario del módulo del constructor DIVI, aquí tenemos que generar los campos uno a uno, por lo que se precisa de un mínimo de paciencia. No os preocupéis que no es complicado.
Vamos a obviar el formulario que viene por defecto y comenzaremos de cero. Creamos uno nuevo desde la pestaña "Contacto > Formularios de contacto" y picando en "Añadir nuevo".
Debemos escribir un nombre para el nuevo formulario. En la ventana inferior aparecen varios campos ya configurados, que vamos a seleccionar y borrar para crear los que verdaderamente necesitamos.
Para configurar los campos (lo veremos en el siguiente punto) hay que ir seleccionando qué tipo de campo queremos y rellenar las opciones de las ventanas emergentes que irán saliendo. El código se irá creando automáticamente en la ventana que hemos vaciado.
Estos son todos los campos que podemos generar:
- texto: Para el nombre, apellidos, dirección...
- correo electrónico: Comprueba si es un formato correcto de e-mail o no
- URL: Solicita la url de la web al usuario
- teléfono: Campo para el teléfono
- número: Código postal, cantidades...
- fecha: Fecha de nacimiento, inscripción, alta...
- área de texto: Para el mensaje a enviar, descripciones...
- menú desplegable: Muestra varias opciones en un menú desplegable
- casillas de verificación: Varias opciones para marcar en casillas
- botones de selección: Varias opciones para marcar con botones
- aceptación: Casilla para aceptar avisos legales, condiciones de venta, política de privacidad...
- cuestionario: Crea un cuestionario con preguntas y respuestas
- reCAPTCHA: Inserta un reCAPTCHA (necesita configurar la integración con la API de Google)
- archivo: Permite adjuntar archivos al formulario
- enviar: Confirma y envía el formulario
Crear los campos del formulario
Casi todos los campos se configuran igual, disponen básicamente de las mismas opciones para crearlos y se diferencian por el prefijo que se añade al insertarlos.
Al picar sobre uno de los campos a crear se abre una ventana emergente con varias opciones:
- Tipo de campo: Si queremos que sea obligatorio o no
- Nombre: Aparece uno aleatorio, pero podemos cambiarlo por el que queramos, sin espacios ni caracteres especiales
- Valor predeterminado: Es el texto que aparecerá en la casilla al cargar el formulario, si no ponemos nada quedará en blanco, pero podemos utilizarlo para indicar que concepto es el que debe rellenar el usuario marcando la casilla inferior de marcador de campo (Ej.: NOMBRE).
- Akismet: Obliga al usuario a que indique el nombre el autor obligatoriamente para evitar el spam
- Atributos de ID y de Clase: Al asignar un identificador o clase, podemos modificar el aspecto del formulario con CSS.
Hay campos que requieren alguna configuración adicional, como el de "archivos", que permite limitar el tamaño de subida y el tipo de archivos para adjuntar al formulario.
Para acertar con el tamaño de archivo adecuado, podemos utilizar alguna de las calculadoras de cambio entre Megas y Bytes para saber que dato hay que poner en el campo de límite.
A groso modo, 2100000 de bytes equivalen a 2Mg en tamaño de archivo, con una simple regal de tres podéis obtener el tamaño que necesitáis.
Cada vez que insertemos un campo se añadirá al formulario un shortcode que identifica el campo elegido.
El código de ejemplo lo podéis ver en el siguiente apartado.
Adaptar Contact Form 7 a Divi
Antes de dejaros el código completo para que lo podáis utilizar o modificar a vuestro antojo, vamos a adaptarlo a las propiedades y estilos que trae el módulo de formulario de "Divi Builder".
Para tener un punto de partida he colocado, cada shortcode generado, entre unas etiquetas "p" para que adopte las propiedades del texto que tenemos configurado en el tema.
Luego he buscado las etiquetas, de los identificadores y clases, que Elegant Themes tiene configurados, para que nuestro formulario los adopte y muestre el aspecto que queremos, además lo hace responsive y adaptable a todos los dispositivos.
No quiero extenderme mucho, en este vídeo de YouTube se explica cómo se localizan los nombres de los identificadores o clases CSS.
2 cajas que contienen los campos de formulario (div):
1 2 | .et_pb_contact .et_pb_contact_form |
Campos de media columna a la izquierda:
1 2 | .et_pb_contact_field .et_pb_contact_field_half |
Campos de media columna a la derecha:
1 2 3 | .et_pb_contact_field .et_pb_contact_field_half .et_pb_contact_field_last |
Campos de anchura completa:
1 2 | .et_pb_contact_field .et_pb_contact_field_last |
1 caja fuera de las anteriores que contiene el botón "Enviar":
1 | .et_contact_bottom_container |
Dentro de la etiqueta de CF7 añadiremos las siguientes clases:
1 2 | .et_pb_contact_submit .et_pb_button |
Para el reCAPTCHA utilizaremos una combinación de dos cajas (div), la del botón y la de los campos de formulario:
1 2 | .et_contact_bottom_container .et_pb_contact |
Este es el código resultante:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="et_pb_contact"> <div class="et_pb_contact_form"> <p class="et_pb_contact_field et_pb_contact_field_half">[text* Nombre placeholder "NOMBRE*"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[text Apellidos placeholder "APELLIDOS"]</p> <p class="et_pb_contact_field et_pb_contact_field_half">[email* email placeholder "CORREO ELECTRÓNICO*"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[tel tel placeholder "TELÉFONO"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[textarea* mensaje placeholder "MENSAJE*"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">¿Desea adjuntar algún archivo? (Formatos doc, jpg o tif) <!-- br--> [file adjunto limit:2100000 filetypes:doc|jpg|tif]</p> <p> </p> </div> </div> [acceptance protecciondatos class:protect] He leído y acepto la política de privacidad de este sitio [/acceptance] <div class="et_contact_bottom_container"> [submit class:et_pb_contact_submit class:et_pb_button "ENVIAR"]</div> <div class="et_contact_bottom_container"> <div class="et_pb_contact"> [recaptcha] </div> </div> |
Y pasamos de tener un formulario de aspecto sencillo a tener las características de Divi.
Si observáis la imagen, el reCAPTCHA se monta sobre otro elemento del formulario. Para arreglarlo tenemos que añadir un pequeño código CSS en la pestaña "CSS adicional" del personalizador de WordPress.
Vamos a añadir algún cambio más con el siguiente código, como que se oculte el texto de cada campo al poner el cursor para escribir, o que los mensajes de error aparezcan sólo bajo cada campo que no esté bien rellenado.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | /*FORMULARIO*/ div.wpcf7 .ajax-loader { position: absolute; left: 0; } .wpcf7-submit:hover { padding: 0.3em 1em !important; } .wpcf7-acceptance span { margin-bottom: 1em; } div.wpcf7-validation-errors { display: none !important; } div.wpcf7-mail-sent-ok, div.wpcf7-spam-blocked { clear: both; border: none; } .wpcf7 input:focus::-webkit-input-placeholder, .wpcf7 textarea:focus::-webkit-input-placeholder { opacity: 0 !important; } .wpcf7 input:focus:-moz-placeholder, .wpcf7 textarea:focus:-moz-placeholder { opacity: 0 !important; } .wpcf7 input:focus::-moz-placeholder, .wpcf7 textarea:focus::-moz-placeholder { opacity: 0 !important; } .wpcf7 input:focus:-ms-input-placeholder, .wpcf7 textarea:focus:-ms-input-placeholder { opacity: 0 !important; } @media only screen and (max-width: 520px) { .wpcf7 .et_contact_bottom_container { margin: 5px auto; } } |
Configurar el envío de los correos desde Contact Form 7 y Divi
Al crear cada campo del formulario estamos creando nuevas referencias que tenemos que configurar en el apartado de envío de correo electrónico.
Por defecto, el plugin carga el correo del administrador como el correo del receptor de los mensajes, pero podemos cambiarlo por el que necesitemos. Lo que no carga son las nuevas referencias de los campos que hemos creado.
Para corregir esto, abrimos la pestaña "Correo electrónico" del formulario que hemos creado y utilizamos las palabras que aparecen con corchetes para configurar el envío del mensaje. Las palabras que aparecen en negrita son la que no están bien configuradas, cuando guardemos el formulario tienen que aparecer en color gris para comprobar que las hemos utilizado correctamente.
Para poder recibir los archivos adjuntos, hay que colocar la referencia del campo que hemos elegido en la ventana destinada para ello, de lo contrario no podremos recibir los archivos que se hayan adjuntado al formulario.
Mientras respetemos las referencias de los campos, podemos configurar el mensaje con el texto que deseemos ver, añadir una coletilla final con indicación de la protección de datos en el cuerpo del mensaje y traducir todos los textos que veamos en otro idioma.
Hay dos casillas de correo: el "Para" que podemos modificar según la necesidad o añadir varios separados por coma (,) y el "De" que no debemos modificar, ya que es el encargado de enviar los correos desde nuestro servidor.
Adaptar el formulario a la ley de protección de datos RGPD
La nueva ley de protección de datos obliga a cumplir una serie de requisitos imprescindibles para evitar una sanción o multa.
Ya hemos colocado un reCAPTCHA y una casilla de confirmación obligatoria para que los usuarios marquen voluntariamente, medidas que aconsejan implementar en cualquier formulario.
Junto con la casilla de aceptación, debe aparecer siempre un acceso a la página de los textos legales, donde se explique el procedimiento que seguimos para proteger los datos que se incorporan en e formulario. Esta url se coloca dentro del código del formulario, dentro de un "ancla" preparado para ello, como muestro en la siguiente imagen.
Ahora es obligatorio colocar una primera capa de información junto al formulario, esta primera capa puede ir en un módulo de texto separado y colocarlo en una parte visible de la página, pero a mi me gusta tenerlo todo en bloque e insertarlo junto al shortcode del formulario.
Podéis pegar este código por encima del código del formulario dentro del plugin Contact Form 7, o en un módulo a parte, como más os guste.
1 2 3 4 5 6 7 8 9 10 | <div class="wpcf7_rgpdivw">Al enviar un formulario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximos envíos.<br>Al enviar un formulario debes aceptar nuestra política de privacidad. <p> </p> <ul> <li>Responsable de los datos: El responsable.</li> <li>Finalidad: Responder a solicitudes del formulario.</li> <li>Legitimación: Tu consentimiento expreso.</li> <li>Destinatario: Quién recibe los emails</li> <li>Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.</li> </ul> </div> |
Para no dar tanta importancia a este texto, vamos a cambiarle el tamaño y adaptarlo al formulario con este código CSS, que colocaremos en la pestaña "CSS adicional" del personalizador de WordPress, a continuación del que ya tenemos.
1 2 3 4 5 6 7 8 | /*PRIMERA CAPA RGPD*/ .wpcf7_rgpdivw { font-size: 13px; margin-bottom: 15px; } .wpcf7_rgpdivw li { margin-bottom: -5px; } |
Añadir unas casillas de aceptación o colocar una primera capa de información no es suficiente para cumplir con la nueva ley europea, pero si estaremos en el buen camino para lograrlo.
Cómo insertar el formulario con la opción de adjuntar archivos en la web
Ya hemos terminado lo más difícil, para poder utilizar el formulario en una página o entrada basta con copiar el shortcode, que identifica el formulario, en un editor de WordPress o en un módulo de texto de Divi Builder.
El shortcode lo encontramos en la lista de formularios que tengamos configurados en el plugin Contact Form 7.
Para completar la página de contacto puedes visitar cómo hacer un formulario en DIVI y ver la forma de insertar un mapa o unos datos de dirección.
Añadir deslizador de diapositivas en DIVI adaptable- Cómo diseñar una landing page creada con Divi y Extra
- El mayor descuento de Divi durante el Black Friday 2022
- Configurar el footer en Divi con módulos
- Cómo configurar una anchura personalizada de columnas en DIVI
- El mayor descuento en Divi por el aniversario de Elegant Themes
A mi me funciona todo perfecto y estoy super contenta salvo una cosa. La casilla de verificación de privacidad funciona pero a partir de ahí se traslada al resto de la pagina y cuando pasas por encima de otros textos o fotos que están a continuación del formulario el cursor se vuelve manita indicando que hay un enlace y es el de la política de privacidad.
Me da una rabia horrorosa no soy capaz de corregirlo, es como si el código del enlace no tuviera fin y siguiera por el resto de la página. Juan si se te ocurre como podría solucionar este tema te agradecería enormemente si me pudieras echar una mano.
gracias de antemano por tu tiempo y paciencia!
Mándame el código que has utilizado en la configuración del formulario y lo reviso a ver si hay algún fallo.
Hola, muchas gracias por el tutorial!
Tengo una pregunta, el formulario que intento crear esta en ingles, como hago para editar el botón que dice "seleccionar archivo" para que me quede "select file", puesto que hasta ahora todo marcha perfecto, pero no puede ser que ese boton quede en español!
mil gracias!
Hola gracias por tus aportes, todo me funcionó excelente, pero tengo una consulta, si quiero cambiar el color de cada casilla (nombre, apellido,tel, etc)que por defecto con su código aparece con un gris tenue a un color por ejemplo azul, al igual que el color del boton y borde del boton ¿que codigo css tendría que utilizar y donde ? en css adicional o en donde del editor del formulario y una duda respecto a su codigo css es ¿que significa div.wpcf7? es la clase por defecto de divi del formulario? Gracias por sus conocimientos
(Ojo: soy muy novato en eso de css, gracias nuevamente por su atención)
Hola Juan Francisco,
Con los códigos que muestro en el artículo añado las características de Divi al formulario de Contact For 7, por esos las casillas son grises, porque Divi las muestra grises.
Para que el formulario sea único, utilizo la etiqueta "div.wpcf7", de esta forma el código modificado sólo afecta a los formularios crados con el plugin. Hay webs que disponen de varios formularios, uno para contacto, otro para pedir presupuesto o para apuntarse a una newsletter, y de esta forma se puede controlar el aspecto de cada formulario por separado, los de Divi por un lado y los de contact Form 7 por otro.
Para cambiar el aspecto del botón puedes utilizar las opciones del personalizador, en la pestaña "Botones > Estilos de botones" para que tenga el mismo aspecto unificado con el resto de los botones que pueda tener la web.
El cambio de color de las casillas hay que hacerlo a través de la opción de "CSS adicional" pegando el siguiente código:
div.wpcf7 .et_pb_contact_field input,
div.wpcf7 .et_pb_contact_field textarea {
background: #b2f8ff !important;
}
Puedes modificar el color cambiando la referencia de color por el que más te guste o se adapte a tu web.
Hola Juan, buenos días.
Tengo el mismo error... "A ocurrido un error al intentar enviar tu mensaje, ... "
He cambiado algunas cosas como por ejemplo la palabra "bottom" por "button" de "et_contact_bottom_container" tanto en el codigo del firmulario como en el CSS pero sin resultado alguno.
Le agradeceria si pudiera dar una solución, ya que su post es muy bueno y buscaba justamente algo así.
Sin más, reciba un cordial saludo
Hola Joaquin,
Las clases CSS que has cambiado son diferentes, una indica la posición de una caja en la parte inferior (bottom) y la otra hace referencia a un botón (button), no es un error, es así.
El artículo lo acabo de actualizar, ya que he visto que las líneas de código aparecían mal, ahora ya se pueden copiar sin errores, es posible que ese fuera uno de los errores.
Otro problema que también he actualizado en el artículo es el tamaño del límite del archivo, en el ejemplo ponía una cantidad ridícula (claro que era un ejemplo), pero habría que poner una tamaño adecuado al archivo o archivos que deseamos adjuntar.
A modo de referencia, 1Mg equivale a groso modo a 1000000 de bytes (1 millón) que sería el número que hay que poner para este caso.
Si esto no funciona, comprueba los datos de configuración, el correo de envío que hayas elegido y demás.
Puedes hacer una prueba creando una página de prueba con un formulario sencillo y comprobando que envía correctamente el mensaje sin errores.
Acabo de hacer una prueba sobre la última versión de Divi en varios servidores (de pago) y no he tenido problemas. Espero que puedas solucionarlo.
Muchas gracias Juan por vuestra atención. He estado mirando el CSS y lo volví a su anterior estado. Probaré con la actualización que has hecho.
Un saludo cordial
Excelente post, la información es muy útil y la explicación de un experto.
Realice paso a paso todo el tutorial, pero al momento de enviar me dice que a habido un error y gque lo intente enviar mas tarde. ¿Cual puede ser el problema?
Un saludo
¿Puedes enviar o recibir otro tipo de correos desde la web, como woocommerce o de recuperación de contraseña? Utiliza otro correo de envío en la configuración de Contact For 7 para probar si ese es el problema.
Hola que tal, pudiste arreglar ese error? me esta pasando lo mismo...
Para que funcione tuve que deshabilitar el recaptcha. Pero no me agrada mucha esa alternativa, Otra solucion?