Vamos a ir un paso más allá de lo que se supone que es un formulario de contacto básico. Por norma general es habitual utilizar una casilla para el nombre, otra para solicitar un email, en ocasiones un teléfono y un campo más amplio para escribir un mensaje. Pero si necesitamos adjuntar archivos al formulario la cosa se complica un poco.
En este artículo voy a enseñarte cómo debes hacerlo si utilizas el tema Divi, para que puedas mantener el aspecto del tema y funcione a la perfección.
Crear formularios con campos especiales en DIVI
El módulo de formulario que trae el constructor Divi Builder no permite crear un campo en el que podamos adjuntar un archivo que se entregue al enviar el formulario, por eso tenemos que recurrir e instalar un plugin adicional que permita realizar esta función. En esta ocasión será el plugin Contact Form 7, disponible de forma totalmente gratuita en el repositorio de WordPress.
Aunque este tutorial lo puedes utilizar y extrapolar a cualquier otro tema, está adaptado y personalizado para usarse con el tema DIVI, el tema EXTRA o con el plugin DIVI BUILDER instalado en WordPress.
Si empiezas de cero, tendrás que instalar y configurar primero correctamente WordPress, puede seguir todos los pasos del curso gratuito de WordPress que tengo publicado en este mismo blog.
A riesgo de caer en una obviedad, necesitas tener instalado el tema Divi, el tema Extra o disponer del plugin Divi Builder. Si aún no lo tienes es un buen momento para hacerte con Divi con un pequeño descuento desde este enlace:
Si ya tienes WordPress con Divi o Extra, los pasos que seguiremos para poder adjuntar archivos a un formulario, evitar spam y cumplir con la ley de protección de datos son los siguientes:
- Instalar el plugin Contact Form 7.
- Configurar la API de Google reCAPTCHA para evitar el spam.
- Crear los campos que necesitamos para el formulario.
- Enlazar con la página de política de privacidad.
- Adaptar los estilos al aspecto del tema.
Os preguntaréis si es necesario poner un reCAPTCHA, el formulario que voy a mostraros es un formulario que cumple con la 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 Google reCAPTCHA en Contact Form 7 para protección contra spam
Para protegernos del spam tenemos dos posibilidades dentro del complemento, "Akismet" y "reCAPTCHA". Nosotros activaremos el segundo por ser más completo y específico para el envío de correo.
Por eso, antes de crear el formulario de contacto con Contact Form 7 vamos a colocar las claves API de Google, para poder utilizar el reCAPTCHA y beneficiarnos de la seguridad que nos ofrece este complemento gratuito, (hasta que Google quiera).
Picando en la pestaña "Contacto > Integración", aparecen varias opciones, en el apartado reCAPTCHA picamos en el botón que pone "Configurar la integración". Al momento aparecen dos campos, uno para la clave secreta y otra para a clave del sitio que debemos rellenar con los datos que Google nos proporciona, pero para eso es imprescindible tener una cuenta (gratuita) de Google.
Para obtener las claves hay que acceder a la cuenta de Google, puedes acudir a la ayuda del complemento picando en el enlace que pone reCAPTCHA (v3), o puedes acceder desde aquí.
Si ya estás logado en el navegador con tu cuenta de Google, se abrirá una nueva ventana con la web de Google reCAPTCHA. Si no lo estás, te pedirá primero que accedas con tus datos de acceso.
Para activar las claves API tienes que rellenar los siguientes datos:
- Un nombre o etiqueta para poder identificar y administrar la API, ya que podemos generar varias APIS diferentes si lo necesitamos (por ejemplo si tenemos varias webs).
- Marcar el tipo de reCAPTCHA que queremos utilizar, Contact Form 7 requiere el tipo reCAPTCHA v3.
- Añadir el dominio o dominios donde utilizaremos estas claves API de Google, sin protocolo y sin www, sólo el nombre y la extensión.
- Terminamos marcando la casilla Enviar.
En la siguiente ventana aparecen las dos claves API que tenemos que copiar y pegar en las casillas del plugin Contact Form 7.
Guarda los cambios y ya estarás listo para empezar a crear el formulario.
Como puedes ver, el proceso es muy sencillo, si lo necesitas también puedes añadir el reCAPTCHA a otros plugins de formulario como Ninja Forms o Pirate Forms.
Configurar 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. Os lo explico paso a paso a continuación.
Nos olvidamos del formulario de ejemplo y creamos uno nuevo desde cero en la pestaña "Contacto > Añadir nuevo".
Escribimos un nombre para el nuevo formulario. En la ventana inferior aparecen varios campos ya configurados, que vamos a borrar para crear los que verdaderamente necesitamos.
Para configurar los campos que nos interesan hay que ir seleccionándolos en los botones que aparecen encima de la caja de configuración del formulario y rellenar las opciones de las ventanas emergentes que aparecerán.
El código se irá creando automáticamente en la ventana inferior.
Las opciones disponibles por defecto que podemos generar para nuestro formulario son las siguientes:
- 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
- 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.
Por ejemplo, para los campos del nombre, apellidos o asunto del mensaje utilizaremos el campo texto. Según elijamos las opciones del campo, se irá generando el código en la parte inferior que se insertará cuando piquemos en el botón azul.
- Tipo de campo: Si queremos que sea obligatorio o no
- Nombre: Aparece un nombre aleatorio, pero podemos cambiarlo por el que queramos, sin espacios ni caracteres especiales. Será la referencia a utilizar a la hora de crear el diseño del mensaje que se recibirá cuando se envíe el formulario.
- Valor predeterminado: Texto que aparecerá preestablecido en la casilla al cargar el formulario, si no ponemos nada quedará en blanco. Podemos utilizar este campo para indicar que concepto es el que debe rellenar el usuario activando la casilla inferior de marcador de posición del campo (Ej.: NOMBRE).
- Akismet: Método para prevenir el spam que fuerza la comprobación del campo (Sólo funciona si hemos instalado el plugin Akismet).
- Atributos de ID y de Clase: Al asignar un identificador o clase, podemos modificar el aspecto del formulario con hojas de estilo CSS.
De esta forma mecánica añadimos casillas para solicitar el correo electrónico, un número de teléfono, el nombre de una web (URL)... hasta que tengamos el formulario completo.
La última inserción debe ser el botón "Enviar".
Aunque no es la versión definitiva, iremos teniendo algo parecido a la imagen siguiente:
Campo para adjuntar un archivo al formulario en Divi
Hay algunos campos especiales que requieren una 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 que hay en internet, para saber que dato hay que poner en el campo de límite.
Por ejemplo, un archivo de un tamaño de 2 megas equivale a 2097152 bytes.
Para elegir el formato de los archivos que vamos a permitir adjuntar, colocamos las extensiones seguidas y separadas por una coma.
El código generado por este campo lo colocamos antes del la opción "ENVIAR". Podemos colocar el cursor en la posición adecuada antes de generar el campo o moverlo después una vez generado.
Campo de aceptación y cumplimiento con la ley de protección de datos RGPD
La ley de protección de datos obliga a cumplir una serie de requisitos imprescindibles para evitar una sanción o multa. Muchos formularios no cumplen con esta normativa porque afea la página de contacto o por desconocimiento. En tu mano dejo esta opción, pero me siento obligado a indicar cómo se hace para todos aquellos que lo quieran implementar.
Son 3 cosas las que tenemos que hacer para que nuestro formulario esté en el camino de cumplir con la ley de protección de datos:
- Casilla de aceptación: Obligatoria y desmarcada para que el usuario sea quien la active de forma voluntaria.
- Enlace a la página de la política de privacidad: Donde se desglosa todo lo referente al uso que se hará de los datos recogidos y donde se explique el procedimiento que seguiremos para proteger los datos que se incorporan en e formulario.
- Primera capa de información: Básicamente es un resumen con la información principal de quien recoge los datos, donde se almacenan y los derechos que tiene el usuario.
La casilla de aceptación y el enlace lo podemos generar desde la ventana de configuración de la aceptación. Para crear el enlace es necesario utilizar una etiqueta HTML, un ancla, pero te lo dejo bien indicado para que solo tengas que cambiar la url de tu página de protección de datos o textos legales.
Para añadir el enlace colocamos en el campo "Condición" el texto que queramos que aparezca de la siguiente manera:
|
1 |
He leído y acepto la <a href="https://www.zonajsc.com/politica-de-privacidad/">política de privacidad</a> de Zona JSC |
Acuérdate de cambiar la url del enlace y la información que creas conveniente, pero mantén el código respetando los corchetes donde están.
La primera capa de información debe ir junto al formulario, pero no tiene porque formar parte del mismo, solo ir en una parte visible de la página, a mi me gusta tenerlo todo en un mismo bloque e insertarlo junto al código del formulario.
Puedes añadir un texto como este cambiando los apartados del responsable y destinatario:
Al enviar un formulario se solicitan datos como tu email y nombre que se adjuntan al mensaje enviado, por lo que debes aceptar nuestra política de privacidad. Responsable de los datos: -Persona o empresa responsable- | Finalidad: Responder a solicitudes del formulario. | Legitimación: Tu consentimiento expreso. | Destinatario: -Quién recibe los datos- (datos almacenados sólo en cliente de email). | Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.
Código del formulario de Contact Form 7 para Divi
A falta del último toque para transformar el aspecto y mostrar un formulario con el diseño del tema Divi, este es el código final tras adaptar y reducir un poco el tamaño del texto de la primera capa de información:
|
1 2 3 4 5 6 7 8 9 10 11 |
[text* tu-nombre placeholder "NOMBRE"] [text* tus-apellidos placeholder "APELLIDOS"] [email* email placeholder "CORREO ELECTRÓNICO"] [tel telefono placeholder "TELÉFONO"] [textarea* mensaje placeholder "DEJA UN MENSAJE"] [file archivo limit:2097152 filetypes:jpg|doc|png|pdf] [acceptance aceptacion] He leído y acepto la <a href="https://www.zonajsc.com/politica-de-privacidad/">política de privacidad</a> de Zona JSC [/acceptance] [submit "ENVIAR"] <p style="font-size: 0.8em; line-height: 1.2;">Al enviar un formulario se solicitan datos como tu email y nombre que se adjuntan al mensaje enviado, por lo que debes aceptar nuestra política de privacidad. <strong>Responsable de los datos:</strong> -Persona o empresa responsable- | <strong>Finalidad:</strong> Responder a solicitudes del formulario. | <strong>Legitimación:</strong> Tu consentimiento expreso. | <strong>Destinatario:</strong> -Quién recibe los datos- (datos almacenados sólo en cliente de email). | <strong>Derechos:</strong> Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.</p> |
Puedes copiar y pegar el código en tu formulario para tener un resultado como la imagen de abajo:
Adaptar Contact Form 7 a Divi
Hace ya un tiempo que salió un plugin que adapta el formato del formulario Contact Form 7 al aspecto de un formulario del tema Divi, y lo hace muy bien, el plugin en concreto se llama "Contact Form 7 Module For Divi Builder". Lo puedes encontrar en el repositorio de WordPress y añadirlo directamente desde tu web.
Añade un módulo al constructor que permite seleccionar uno de los formularios creados en Contact Form 7 y darle la forma que más nos guste, con multitud de opciones dentro del módulo.
Una vez activado tienes que editar la página donde vas a insertar el formulario con el constrictor Divi y añadir el módulo como otro cualquiera. Tendrás la opción de elegir un formulario creado con Contact Form 7 desde un desplegable.
Ahora puedes jugar con la pestaña "Diseño" para cambiar los colores, el tamaño o el botón entre muchas opciones, incluso darle animación si te apetece, como con cualquier otro módulo de Divi, pero con la potencia de las características del formulario de Contact Form 7.
Adaptar el formulario sin plugin
Este sistema requiere un conocimiento básico de programación, no es complicado implementarlo, pero precisa de un esfuerzo un poco mayor que usar un simple plugin.
Si crees que me poniendo muy técnico puedes saltar al código de abajo para hacer un corta y pega, y si te da algún fallo, entonces si te recomiendo volver a este punto.
Antes de empezar necesitamos conocer las clases CSS que dan forma a un formulario de Divi. Para hacerlo utilizo el inspector del navegador.
No quiero extenderme mucho, en este vídeo de YouTube se explica cómo se localizan los nombres de los identificadores o clases CSS.
La ventaja de estas clases CSS es que ya tienen asignados los estilos propios de Divi, por lo que mostrará un aspecto totalmente integrado con el tema, además de hacerlo responsive y adaptable a todos los dispositivos.
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 |
Caja que contiene el botón "Enviar":
|
1 |
.et_contact_bottom_container |
Aspecto del botón "Enviar":
|
1 2 |
.et_pb_contact_submit .et_pb_button |
No vamos a utilizar todos en este ejemplo, pero es bueno conocerlo todos por si los necesitamos.
Para poder colocar cada clase CSS es necesario añadir una etiqueta HTML que incluya el estilo elegido. Para simplificarlo al máximo utilizaré la etiqueta "p" que configuran los párrafos para cada campo a rellenar, y la etiqueta "div" para agruparlos en cajas.
El código del formulario anteriormente configurado quedaría así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="et_pb_contact"> <div class="et_pb_contact_form"> <p class="et_pb_contact_field et_pb_contact_field_half">[text* tu-nombre placeholder "NOMBRE"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[text* tus-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 telefono placeholder "TELÉFONO"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[textarea* mensaje placeholder "DEJA UN MENSAJE"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[file archivo limit:2097152 filetypes:jpg|doc|png|pdf]</p> </div> </div> [acceptance aceptacion] He leído y acepto la <a href="https://www.zonajsc.com/politica-de-privacidad/">política de privacidad</a> de Zona JSC [/acceptance] <div class="et_contact_bottom_container"> [submit class:et_pb_contact_submit class:et_pb_button "ENVIAR"] </div> <p style="font-size: 0.8em; line-height: 1.2; display: inline-block; margin-top: 10px;">Al enviar un formulario se solicitan datos como tu email y nombre que se adjuntan al mensaje enviado, por lo que debes aceptar nuestra política de privacidad. <strong>Responsable de los datos:</strong> -Persona o empresa responsable- | <strong>Finalidad:</strong> Responder a solicitudes del formulario. | <strong>Legitimación:</strong> Tu consentimiento expreso. | <strong>Destinatario:</strong> -Quién recibe los datos- (datos almacenados sólo en cliente de email). | <strong>Derechos:</strong> Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.</p> |
Y pasamos de tener un formulario de aspecto sencillo a tener las características de Divi.
Dependiendo del servidor y de la configuración de tu página web, puede surgir el problema que no muestre los cambios una vez aplicados. Para solucionarlo hay que desactivar la casilla "CSS Dinámico" de las opciones de optimización de Divi.
Configurar el envío de los correos desde Contact Form 7 y Divi
Al crear cada campo del formulario, se generan unas referencias que sirven para configurar el esquema del correo electrónico que recibiremos cuando un usuario envíe un formulario.
Para empezar a configurar este apartado seleccionamos la pestaña "Correo", que seguramente esté marcada con una advertencia en rojo para indicarnos que hay algo mal.
Por defecto, el plugin carga el correo del administrador de la web como el correo del receptor de los mensajes, pero podemos cambiarlo por el que nosotros queramos utilizar.
En la casilla "De" debemos respetar el correo que aparece, ya que es el encargado de enviar los correos desde nuestro servidor.
Si observas bien, hay unas referencias entre corchetes que son las referencias de cada uno de los campos de nuestro formulario personalizado.
Debes sustituir las referencias por defecto que aparecen en los campos de esta pestaña por las referencias que tu has generado, para poder recibir toda la información correctamente.
Para recibir los archivos adjuntos, hay que colocar la referencia en la casilla destinada para ello, de lo contrario no podremos recibir los archivos que se hayan adjuntado al formulario.
Para gente con conocimientos más avanzados, puedes activar la casilla de contenido HTML y darle una forma más atractiva añadiendo imágenes y estilos visuales más personalizados.
Mientras respetemos las referencias de los campos, podemos configurar el mensaje con cualquier texto que queramos, 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.
Insertar el formulario con la opción de adjuntar archivos en la web
Si utilizamos el plugin de Divi para Contact Form 7, seleccionamos el formulario de una lista desplegable como ya hemos visto.
Pero si quieres hacerlo por el método manual, basta con copiar el shortcode que aparece al lado del nombre del formulario de la lista del plugin y pegarlo adecuadamente en el editor de WordPress a través de un bloque de shortcode, o a través de en un módulo de código o texto en Divi Builder.
Para completar la página de contacto puedes visitar cómo hacer un formulario en DIVI y ver la forma de insertar un mapa y otros datos de interés
Hasta que actualice el vídeo, os dejo el actual que, aunque no está completo, puede ayudaros a resolver algunas dudas, y recuerda que para poder llevar a cabo este tutorial necesitas disponer de una suscripción a Elegant Themes para disfrutar de Divi. No te lo pienses y aprovecha el descuento que te ofrezco, válido sólo por 24 horas desde que accedes desde este link.
Descargo de responsabilidad : Existe una relación publicitaria con y Elegant Themes por la que genero una pequeña comisión si adquieres el/los producto/-os por medio de los enlaces de esta página. Gracias a ello puedo ofrecerte ofertas como estas, a ti no te supone ninguna carga adicional económica ni compromiso alguno y a mí me sirve para tomarme un café. MUCHAS GRACIAS
Configurar el footer en Divi con módulos
Diferencias entre Divi y Extra como temas para WordPress. ¿Cuál elijo para mi web?
Cómo configurar una anchura personalizada de columnas en DIVI
Comprar Divi con Descuento en Cyber Monday: La Oferta del Año en Elegant Themes
Añadir más botones en los módulos del tema Divi
Cómo crear un footer en DIVI atractivo y funcional
Hola Juan,
Ya lo veo todo muy bien en divi o desde el personalizador de temas, el problema es que cuando salgo de ambos, el formulario se muestra como al principio de crearlo con el plugin, es como si nada se hubiera guardado. No entiendo por qué lo veo perfecto hasta que salgo de divi.😥 Qué puede estar fallando?
Hola Beatriz, el artículo está escrito antes de que se actualizara Divi con las nuevas funciones de optimización de la pestaña de configuración del tema. Debes desactivas la función "Dynamic CSS" para que el nuevo CSS de las hojas de estilo pueda aplicarse sobre el formulario.
Muchas gracias por todo!
Una duda, es que no sé nada de códigos...etc. Cuando he copiado todo el código de tu web y lo he pegado en el formulario que hemos creado, donde hay que insertar la URL de nuestra política de privacidad, lo que veo en tu vídeo no es igual que lo que aparece en lo que hemos copiado de tu web y no sé bien dónde insertar la URL. Me podrías ayudar? y cuando entro en el personalizador de temas para copiar en el CSS adicional el código de tu web, yo ya tengo ahí mucho código...entonces copio el tuyo a continuación?
Un saludo y muchas gracias!
En los próximos días voy a actualizar este artículo que tiene algunos pequeños cambios de configuración con las últimas versiones de Divi. En el artículo, un poco más abajo del código que hay que copiar, aparece una sección llamada cómo cumplir con la RGPD, ahí indico donde tienes que poner el link, dentro del texto ("He leído... a href="https://tudominio.com/tupoliticadeprivacidad">política de privacidad<...). El código CSS es adicional al que ya tienes, por lo que hay que pegarlo delante del que existe o al final del todo, sin borrar el existente.
Muchísimas gracias! Gracias por tu ayuda. Voy ver si lo encuentro...jeje
Estaré pendiente de la actualización de tu artículo.
Un saludo y gracias!
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.
Para que funcione tuve que deshabilitar el recaptcha. Pero no me agrada mucha esa alternativa, Otra solucion?