Descubre en el siguiente enlace si Divi es el tema de WordPress que necesitas para tu web y los ofertas y descuentos para conseguir una suscripción a Elegant Themes anual o de por vida.
Este artículo no será actualizado, puedes ver una guía más completa de cómo realizar un formulario con Divi o Extra con casilla de verificación y enlace a textos legales en esta dirección.
Muchas de las plantillas premium de Elegant Themes suelen traer un formulario de contacto básico con los campos más comunes utilizados. Los temas EXTRA o DIVI pueden configurar un formulario propio y personalizado sin necesidad de añadir más plugins.
Configurar un formulario en DIVI y EXTRA, de Elegant Themes
Tanto EXTRA como DIVI son plantillas premium de Elegant Themes que estás pensadas para poder personalizarlas al máximo, y por eso las han dotado de una forma de diseñar la web que no tienen otras plantillas. Extra dispone de una página de contacto predefinida que podemos utilizar si no queremos muchas complicaciones, pero en Divi no hay categorías de páginas, por lo que tendremos que usar otro método.
En la plantilla Extra, al generar una nueva página y marcarla con la propiedad de contacto, esta automáticamente genera un formulario con cuatro campos pre-establecidos y la posibilidad de integrar un mapa de localización. Pero si no nos gusta, podemos crear nuestra propia página de contacto de la misma manera que haremos en Divi.
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 de un formulario de contacto. Vamos a ver el proceso que podemos utilizar en ambas plantillas utilizando el CONSTRUCTOR DIVI.
La facilidad que proporciona el "DIVI BUILDER" para poder crear webs, nos ayudará a crear un formulario a nuestro gusto.
Preparando la plantilla
Como consejo personal y punto de partida, lo ideal sería cargar una plantilla de contacto de la biblioteca, de las que trae por defecto el tema. Pero cómo quiero mostrar todo el proceso desde cero, yo no lo haré.
Lo primero que hacemos es crear una nueva página donde poner el formulario de contacto. Pinchamos en "El Constructor Divi" para empezar a usar sus módulos y dejamos seleccionada la opción de "Plantilla predeterminada". Esto es importante para el tema Extra, pues no queremos utilizar el formato de contacto preestablecido.
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.
En la sección del formulario y el texto seleccionamos el formato que va a tener pulsando en "Insertar columnas", y elegimos la que más se adapte a la idea del diseño que queremos tener.
El resultado sería algo parecido a esto antes de insertar los módulos necesarios. Vamos a dar a publicar para guardar los cambios.
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:
Insertar el mapa en el formulario de contacto
El mapa que irá en la primera sección, podemos añadirlo de dos formas distintas, por medio del módulo "mapa" o insertando un código que nos proporciona Google maps.
Embeber o insertar el código de Google Maps
Podéis ver cómo conseguir ese código pinchando aquí.
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.
Utilizar el módulo de mapa en las plantillas Extra y Divi
Si utilizamos el "módulo de los mapas", ya sea en su anchura completa o estándar, podremos aprovechar algunas funciones que no tenemos con el sistema anterior. Pero para poder utilizar las nuevas opciones, necesitamos conseguir una clave API, la cual nos la proporciona Google si la solicitamos a través de nuestra cuenta. Podéis ver cono es todo el proceso en este enlace.
Entre las ventajas que incorpora al formulario el 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 en cada punto de localización.
Añadir los módulos a la zona del formulario
A la hora de seleccionar los módulos, elegiremos "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.
Configurar los campos del formulario
Para configurar los campos del formulario tenemos que ir dando en "Añadir nuevo Campo", tantas veces como campos queremos que tenga el formulario. Podemos añadir todos los que queramos. Por defecto vienen el nombre, el email y el mensaje, pero podemos poner teléfono, edad, ciudad... tantos como necesitemos. Tan sólo hay que configurar uno a uno diciendo que tipo de entrada es.
La configuración de los campos del formulario está muy simplificada y es muy sencilla:
- Identificación de campo: Referencia para saber que estamos configurando.
- Título: Es la palabra o texto que aparecerá en el campo para saber que debemos poner.
- Tipo: Selección para configurar el tipo de campo
- Campo de entrada: Para el nombre, apellidos, teléfono, asunto y demás casillas que no sean correos electrónicos ni texto del mensaje.
- Campo de correo electrónico: Información predefinida para insertar el correo electrónico del usuario que escribe el mensaje
- Área de texto: Es la zona destinada a desarrollar el mensaje o texto a comunicar.
- Campo obligatorio: Opción para obligar a rellenar el campo seleccionado.
- Hacer anchura completa: Elegir si queremos que el campo ocupe todo el ancho o la mitad.
Configurar las opciones del módulo
Dentro de la configuración del módulo del formulario, hay dos campos importantes a tener en cuenta, son el correo electrónico de la persona que va a recibir los mensajes que se escriban, que normalmente seríamos nosotros, y el patrón del mensaje.
- Mostrar Captcha: Muestra una suma aleatoria que hay que resolver para poder enviar el formulario.
- 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, evitando el envío por php.
- Título: Permite poner un título al formulario de contacto.
- 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 que todos los datos que pedimos los veamos en el cuerpo del mensaje, tenemos que crear un patrón en esta casilla.
- La fórmula para presentar cada apartado es poner la identificación del campo que escribimos a la hora de crear el formulario, entre dos símbolos de %, delante y detrás. Así, si pusimos como identificador "Name" al campo para pedir el nombre, debemos poner "%%Name%%", si pusimos "Email" para el correo electrónico, debemos escribir "%%Email%%". Para marcar los saltos de línea he usado la etiquepa "" de HTML y escribir el siguiente cuerpo del mensaje:
1 2 3 4 5 6 7 | Formulario de contacto enviado por: %%Name%%Correo electrónico: %%Email%% Teléfono: %%Telefono%% · Móvil: %%Movil%% Ha envíado el siguiete mensaje: %%Message%% |
Mensaje de éxito: Si lo dejamos por defecto, el mensaje que sañdrá será "Gracias por contactar", pero podemos modificarlo en este apartado.
En la pestaña "Ajustes avanzados de diseño", tanto en el tema EXTRA como en DIVI de Elegant Themes, podemos personalizar los colores, tamaños o tipografías.
Disponemos también de otra pestaña para añadir código CSS3 y poder modificar las hojas de estilo, y así crear sitios webs completamente diferentes en aspecto y contenido.
Si no queremos meternos en "camisa de once varas", con las opciones básicas podemos conseguir un aspecto profesional sin necesidad de conocimientos de programación. Eso sí, requiere aprender a manejar la plantilla para conseguir un formulario como este.
Hola, excelente artículo. Le agregué al formulario un campo de lista desplegable y ya no envía la info al correo, ni siquiera sale el mensaje de "enviado con éxito", sabes que se debe ese error?
Este artículo es un poco antiguo, suelo actualizarlos cuando veo que están obsoletos, pero hace tiempo decidí desglosar el contenido y casi todo lo relacionado con páginas webs lo publico en otro blog. Te dejo el enlace a un artículo más actualizado. Si sigues teniendo dudas puedes dejarlas allí.
https://www.ingresosviaweb.com/crear-un-formulario-en-divi/
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?
Cuando hay problemas de envío de los formularios, suele ser por que el servidor dispone de unas medidas anti spam que dificultan el envío. Prueba a desactivar momentáneamente el captcha, por si fuera el que da problemas. Comprueba si tienes algún espacio en blanco delante o detrás del correo que utilizas para enviar los correos. Si sigue fallando, te recomiendo que configures un correo a través de SMPT. Tendrás que instalar un plugin para hacerlo.
Hola, tengo un blog que usa divi extra. Cuando alguien rellena el formukario de contacto me llega bien a mi cuenta.de.correo, pero en la.cabezera me aparece como remitente mail@aprendiedogolf.com y no puedo ver la direccion de correo de la persona que lo rellenó.El nombre y el contenido lo veo perfectamente. Gracias
Hola Marcelino, comprueba el tipo de campo que tienes asociado al correo electrónico en las opciones, y que sea campo de correo electrónico y no como campo de texto. Puede que no te aparezca en la cabecera porque lo tengas cambiado.
El email del usuario que rellena el formulario es una información más, como puede ser el nombre, apellidos, el teléfono o el asunto. Y no gestiona el envío del mensaje, sino el correo que asignes a wordpress.
Si no aparece en la cabecera del mensaje, podemos configurar el patrón del mensaje que recibiremos en nuestro email, entre los campos que podemos configurar está el correo electrónico.
En el apartado "Configurar las opciones del módulo" del artículo, muestro como se configura ese apartado.
Si tienes alguna duda de cómo configurarlo, puedes decírmelo y te ayudo.
Gracias por la.ayuda. Al usar el modulo de.contacto es necesario configurar el patron del mensaje poniendo entre ％％ Email, Phone..etc. Si se usa la plantilla de contact en vez de la.predeterminada no es necesario pero las opciones tb son muy reducidas...
Hola excelente tu tutorial, pero tengo un tema. Tengo unos chekbox que en el email que llega me aparece "cheked" y "not cheked" como hago para cambiar eso y ponerlo en castellano o que aparezca diferente en el email recibido?
Perdona la tardanza en responder Paula, este artículo tengo que volver a actualizarlo, de momento puedes ver cómo se hace un formulario, con las nuevas opciones de Divi en otro blog que administro. Estoy derivando todo lo que tenga que ver con wordpress e internet hacia esa web. https://www.ingresosviaweb.com/crear-un-formulario-en-divi
Respecto a tu problema he realizado varias pruebas y en ninguna me ha salido ese resultado, puede que se tratase de alguna incompatibilidad del formulario en las primeras versiones que incluyen esas opciones. Ya han actualizado dos o tres veces la plantilla y supongo que lo habrás solucionado. Crea un patrón de mensaje como indico en el artículo de la otra web (también hay vídeo) para decidir que es lo que quieres recibir y cómo.
Hola muy buenas, veras tengo un problema con una web, que me cayó ya hecha, que usa un formulario DIVI y no doy con la solución, no sé por donde puedo configurar el mail desde el que el formulario DIVI envia los datos del formulario (No el email que escribe el usuario en un campo del form, sino el email que usará el botón de enviar para mandarme la información del formulario y saber que alguien ha dejado un mensaje.) Tuve que cambiar la web de servidor y en algun lugar debe de estar definida esa cuenta con la que envia, los datos de SMPT y la contraseña de la cuenta, pero no doy con ello para cambiarlo a una cuenta que ya cree en el nuevo servidor.
Tienes idea de donde puede estar configurada esa cuenta dentro de DIVI o de WordPress.
Muchas gracias por adelantado
Hola Marc,
Si el formulario está realizado con el módulo del constructor DIVI, el correo que que recibe los mensajes es el que se escribe en el campo "Correo Electrónico" de los Ajustes Generales del módulo. Los temas de WordPress utilizan la funcion "mail()" de php para enviar los correos, pero algunos servidores lo tienen dasactivado por cuestiones de span y seguridad, por lo que puede que los mensajes se envíen a través de un plugin que configura el modo SMTP de envío. Si es así, es en ese plugin donde hay que configurar el correo, que debe ser el mismo que pongas en el módulo de Divi.
En el artículo pongo un enlace a un vídeo para ver cómo conseguir las claves que necesita Divi para mostrar los mapas de Google. Es este https://www.youtube.com/embed/uUot0twl-6o
Hola Martín, gracias por tu respuesta.
El tema está en como configurar no la cuenta que recibe sino la que envia, es decir, cuando le doy a enviar al botón manda desde una cuenta form@midominio.com que es distinta de la cuenta que debe recibir el correo, esa está bien y funciona correctamente, pero no recibe lo que se manda desde el formulario que sale desde esta otra cuenta(form@midominio.com), ¿donde puedo configurar esa cuenta? He buscado en todas las opciones de DIVI y no doy con ello.
Gracias por el vídeo para el mapa de google.
Al final por si a alguien le sirve lo he resuelto con el plugin WP-mail. Muchas gracias Martín por tu ayuda!!!
Hola tengo una duda ¿donde puedo editar el código php del formulario? porque quiero editar la forma en que se ve y también sale un error en un mensaje que ya viene defino con el tema; si pudiera ayudarme. Saludos
Hola Yanetzi, para cambiar el aspecto del formulario puedes hacerlo con las hojas de estilo desde el personalizador del tema, desde la última versión de WordPress puedes añadir código css sin necesidad de editar ningún archivo. Respecto a lo de modificar los archivos PHP, es una mala idea, podrías hacerlo, pero con cada nueva actualización del tema perderías todos los cambios. Si quieres modificar alguna cadena mal traducida o escrita, es mejor que modifiques los archivos .po de los idiomas con algún editor.
Hola Juan,
Enhorabuena por tu blog. Tengo una duda, tengo una web donde los clientes se han de bajar unos PDFs (formulario de alta de nuevos clientes, contrato, etc) para, desde su ordenador, rellenar el pdf a mano para luego enviarme la foto del documento desde la web o email. Lo que quisiera es que el cliente rellene el formulario de alta y el contrato de servicios (este ultimo firmado electrónicamente) directamente desde mi web y me llegue directamente. De esta forma evitar tantos pasos al cliente, siempre muy engorroso. Me gustaría que fuera contractual, es decir, que cuando le den a “enviar” el contrato rellenado sea totalmente legal y no tengan que firmar el documento posteriormente. No sé si me he explicado bien. Un saludo
Alberto
Hola Alberto, para lo que quieres hacer te recomiendo utilizar un plugin adicional, como el contact form 7, que permita insertar una casilla como que se han leído los términos y condiciones antes de poder enviar el formulario.
Estimado
juan gracias por compartir, he seguido las indicaciones al pie de la letra y funciona ok.
salvo que no envia el mail del contacto a pesar de estar como obligatorio en la web
el email que genera trae todos los datos incluido un agregado para teléfono agregado por mi , pro no el email , donde tendría que modificar esto.
desde ya gracias
Hola Jorge, gracias por comentar el artículo, me ha servido para darme cuenta que estaba anticuado y actualizarlo, en estos días subiré un vídeo con la nueva información. Respecto a tu duda, el correo de la persona que escribe el mensaje aparecerá sólo en la cabecera del e-mail que recibas, si dejas las opciones por defecto. Si quieres que aparezca en el cuerpo del mensaje del e-mail, tienes que crear un patrón de respuesta en las opciones del módulo del formulario. Puede revisar el artículo que he actualizado en la parte de "opciones del módulo del formulario".
Si necesitas más ayuda, aquí me tienes.