Cómo crear un patrón de mensaje en su módulo de formulario de contacto Divi

Los patrones de mensajes de correo electrónico son una excelente manera de ver los mensajes enviados a través de sus formularios de contacto Divi. Tiene control total sobre el diseño y el contenido del diseño, por lo que obtiene la información exacta que desea de la manera que desea. En esta publicación, veremos cómo crear un patrón de mensaje en su módulo de formulario de contacto Divi y explicaremos cómo usarlo.

¿Qué es un patrón de mensaje?

El patrón de mensaje es una plantilla para el mensaje de correo electrónico. Especifica cómo se ve el mensaje y qué información incluye cuando lo recibe por correo electrónico. Puede incluir el texto que especifique y el contenido de cualquiera de los campos del formulario. El patrón de mensaje no es obligatorio, pero es útil. Simplemente déjelo en blanco para el patrón predeterminado.

¿Por qué usar un patrón de mensaje?

Utilizar un patrón de mensaje es una excelente manera de optimizar su flujo de trabajo. Tendrá la información exacta que desea en el diseño que desee.

Dónde encontrar el patrón de mensaje de correo electrónico

Para encontrar el campo Patrón de mensaje de correo electrónico, abra el Módulo de formulario de contacto haciendo clic en el icono de engranaje gris oscuro que aparece al pasar el mouse. Para este ejemplo, estoy usando la página de contacto del paquete gratuito de diseño de Home Baker que está disponible en Divi.

A continuación, desplácese hacia abajo hasta la sección denominada Correo electrónico . Aquí encontrarás dos campos. El primero es la dirección de correo electrónico . Esta es la dirección del mensaje que se enviará. El segundo campo se llama Patrón de mensaje . Introduzca su patrón en este campo.

Cuando se envía un mensaje a la dirección de correo electrónico que ha imputado en el campo Dirección de correo electrónico, normalmente incluye solo el contenido del campo Mensaje. Por ejemplo, enviaré este mensaje:

El resultado es un correo electrónico con de quién es, como de costumbre, pero el cuerpo del contenido solo muestra el mensaje en sí.

Cómo crear un patrón de mensaje

Podemos ajustar el contenido del correo electrónico creando un patrón de mensaje. Puede agregar texto y especificar los campos que desea incluir. Para incluir un campo, agregue dos símbolos de porcentaje a ambos lados del ID del campo. Por ejemplo, para incluir el campo con el ID-nombre, use %%name%%. Veremos cómo encontrar el ID de campo en la siguiente sección.

Puede crear una plantilla con texto, espacios y el contenido del formulario. Agregue su texto alrededor de los nombres de los campos e incluya espacios para los campos. Por ejemplo, soy %%name%% y mi mensaje es %%message%%.

Cuando agrego este patrón de mensaje al ejemplo anterior, recibimos un correo electrónico diferente. Este patrón incluye texto, ID de campo y espacios adicionales.

Este es el mensaje de %%name%%, correo electrónico %%email%%.

Mensaje: %%mensaje%%

El resultado es un correo electrónico con más información y un diseño que tiene más sentido. Es la misma información que se envió en el formulario de la sección anterior, pero ahora muestra más información y la coloca en un diseño que es fácil de leer, que es el diseño que creé con el patrón de mensaje.

Cómo agregar nuevos campos

Cada campo en el módulo de formulario de contacto es un submódulo con su propia configuración. Para crear un nuevo campo, vaya a la pestaña de contenido del módulo de formulario de contacto y haga clic en Agregar nuevo campo debajo de todos los submódulos del formulario.

Texto

En Texto , ingrese el Id. de campo y el Título . El Id. de campo es la etiqueta que usará para crear el Patrón de mensaje. Esta es una identificación única y solo debe usar caracteres en inglés sin caracteres especiales ni espacios. El campo Título se puede utilizar para definir el contenido. No tiene que ser un título único ni coincidir con el Id. de campo, pero es mejor si es único para que sea más fácil de entender.

A continuación, desplácese hacia abajo hasta las opciones y seleccione Tipo de campo . Elija cualquier configuración que desee para el campo. Haga clic en la marca verde en la parte inferior o en la flecha de retorno en la parte superior para volver a la configuración normal del módulo de formulario de contacto.

Finalmente, agregue el nuevo campo al Patrón de mensaje con cualquier texto que desee incluir. Cierre el módulo y guarde su configuración.

Cómo probar el patrón de mensaje

Finalmente, pruebe su patrón de mensaje para asegurarse de que funciona como usted desea. Simplemente llene el formulario usted mismo y vaya a la dirección de correo electrónico que usó para el campo de correo electrónico para ver el patrón de mensaje.

Recibirás el mensaje en la bandeja de entrada de tu correo electrónico para que puedas saber si te gusta el diseño o no.

Creación de un patrón de mensaje bien diseñado

El patrón de mensaje debe construirse de manera que se aproveche al máximo. Esto es para su uso, así que diséñelo de la manera que necesita verlo.

Asegúrese de usar espacios en blanco para que el correo electrónico sea más fácil de leer y usar. El patrón de mensaje incluye todos los espacios que agrega al patrón. Puede usar espacios para crear el diseño exacto que desea.

Ejemplo de patrón de mensaje de reserva de restaurante

Veamos un ejemplo de Patrón de Mensaje para una reserva de restaurante. Para este ejemplo, estoy usando la página de destino del paquete de diseño de restaurante Poke gratuito que está disponible en Divi. Reemplazaré el botón de reserva con un nuevo módulo de formulario de contacto. Mantendremos el formulario simple para este ejemplo.

Así es como se ve el diseño antes de agregar el módulo de formulario de contacto.

Cambiar el texto del título

Primero, edite el Texto del título para mostrar "Hacer una reserva". Resalte la parte del texto que no desea y haga clic en la tecla Eliminar.

Borrar fila

A continuación, elimine la Fila con los botones. Usaremos el estilo del botón izquierdo, pero no necesitamos estos botones.

Agregar un módulo de formulario de contacto

A continuación, agregue un módulo de formulario de contacto debajo del módulo de texto del número de teléfono.

Agregar nuevos campos

Ahora, elimine el campo de mensaje y agregue un nuevo campo haciendo clic en Agregar nuevo campo .

Cambie el Id. de campo a Teléfono, el Título a Número de teléfono y use Campo de entrada como Tipo . Para Símbolos permitidos , seleccione Solo números. Cierra el submódulo.

• ID de campo: Teléfono
• Título: Número de teléfono
• Tipo: campo de entrada
• Símbolos permitidos: solo números

Agregue otro campo, cambie el Id. de campo a Invitados, el Título a Número de invitados y use el Campo de entrada como Tipo . Para Símbolos permitidos , seleccione Solo números. Cierra el submódulo.

• ID de campo: Invitados
• Título: Número de invitados
• Tipo: campo de entrada
• Símbolos permitidos: solo números

Agregue otro campo y cambie el Id. de campo a Día, el Título a Día de visita y use Seleccionar menú desplegable como Tipo . Introduzca el nombre de cada día para las opciones. Cierra el submódulo.

• ID de campo: Día
• Título: Día de la visita
• Tipo: Seleccionar menú desplegable
• Opciones: añadir días

Agregue otro campo y cambie el Id. de campo a Hora y el Título a Hora de la visita. Seleccione Botones de opción para el Tipo . Para las Opciones , agregue los tiempos posibles. Cierra el submódulo.

• ID de campo: Hora
• Título: Hora de la visita
• Tipo: Botones de radio
• Opciones: tiempos posibles

Texto

Ahora, ajustaremos el formulario. En Texto en la pestaña Contenido, cambie el texto del botón Enviar a Reservar una mesa.

• Botón Enviar: Reserve una mesa

Correo electrónico

A continuación, desplácese hacia abajo hasta Correo electrónico e ingrese la dirección donde desea recibir el correo electrónico en el campo Dirección de correo electrónico . Además, cree el patrón de mensaje . Crearé un patrón que proporcione el nombre primero, omitiré una línea y luego mostraré el día, la hora y la cantidad de invitados. Después de esto, saltará una línea, mostrará un encabezado para la información de contacto y luego enumerará la información.

El patrón de mensaje se ve así (con espacios):

Reserva para %%name%%

Día día%%

Tiempo tiempo%%

Número de invitados: %%invitados%%

Información del contacto

%%correo electrónico%%

%%teléfono%%

Protección contra el spam

Desplácese hacia abajo hasta Protección contra spam y desactívela.

• Usar Captcha Básico: No

Campos

Ahora, diseñemos el módulo. Primero, vaya a Campos en la pestaña Diseño. Cambie el Color de fondo a rgba(255,255,255,0) y el Color del texto a negro.

• Color de fondo: rgba(255,255,255,0)
• Color del texto: #000000

Para el relleno de campos , agregue 13 px para la parte superior e inferior y 30 px para la izquierda y la derecha. Cambie la Fuente a Darker Grotesque y configure el Peso a Medium.

• Relleno de campos: 13 px arriba y abajo, 30 px izquierda y derecha
• Fuente: Darker Grotesque
• Peso: Medio

Cambie el Tamaño a 24 px para computadoras de escritorio, 18 px para tabletas y 14 px para teléfonos. Establezca la Altura de la línea en 1,4 em.

• Tamaño: escritorio de 24 px, tableta de 18 px, teléfono de 14 px
• Altura de la línea: 1,4 em

Botón

A continuación, desplácese hacia abajo hasta Botón y seleccione Habilitar estilos personalizados para el botón . Cambie el Tamaño del texto a 17px, el Color del texto a negro y el Fondo a #f6c85d.

• Habilitar estilos personalizados para el botón
• Tamaño del texto: 17px
• Color del texto: #000000
• Fondo: #f6c85d

Establezca el Color del borde en #f6c85d y el Espaciado entre letras del botón en 0,16 em. Cambie la fuente a Darker Grotesque, el peso a Ultra Bold y el estilo a TT.

• Color del borde: #f6c85d
• Espaciado entre letras de botones: 0,16 em
• Fuente: Darker Grotesque
• Peso: Ultra Negrita
• Estilo: TT

Cambie el Relleno del botón a 12 px para la parte superior e inferior y 20 px para la izquierda y la derecha.

• Relleno de botones: 12 px arriba y abajo, 20 px izquierda y derecha

Dimensionamiento

A continuación, desplácese hacia abajo hasta Tamaño, cambie el Ancho al 60 % y establezca la Alineación del módulo en Centro.

• Ancho: 60%
• Alineación del módulo: Centro

Borde

Finalmente, desplácese hacia abajo hasta Borde . Agregue 5px a las esquinas redondeadas , 2px al ancho del borde y haga que el borde sea negro. Cierre el módulo, guarde su configuración y pruebe su formulario.

• Entradas esquinas redondeadas: 5px
• Ancho del borde: 2px
• Color: #000000

Resultados del patrón de mensajes

Así es como se ve nuestro mensaje en el formulario y en el correo electrónico que recibí.

Mensaje en el formulario

Mensaje en el correo electrónico

pensamientos finales

Ese es nuestro vistazo a cómo crear un patrón de mensaje en su módulo de formulario de contacto Divi. Crear patrones de mensajes es fácil de hacer con el módulo de formulario de contacto de Divi, y son excelentes para organizar la información dentro de los propios correos electrónicos. Seguir unos sencillos pasos es todo lo que necesita para crear sus propios patrones de mensajes de correo electrónico.

Queremos escuchar de ti. ¿Ha creado un patrón de mensaje en su módulo de formulario de contacto Divi? Cuéntanos tu experiencia en los comentarios.