Índice
- ¿Cómo funciona?
- Crear un formulario
- Guardar una plantilla
- Editar, duplicar o eliminar una plantilla
- Integrar tu formulario en tu página web
- Integrar tu formulario en WordPress
- Previsualizar un formulario
- Ver el código de un formulario
- Editar un formulario
- Archivar, eliminar o restaurar un formulario
- Solución de problemas
¿Cómo funciona?
El Editor de formularios de Mailjet incluye un formulario de registro, un email de confirmación y una página de confirmación. Cuando alguien se registra en tu página web, se le envía un email de confirmación con un enlace que le redirige a la página de confirmación. Una vez que confirme su registro, su dirección de email (y cualquier otra información recopilada a través del formulario de registro) se añade a tu lista de contactos.
¿Y lo mejor de todo? Que lo único que tienes que hacer es diseñar y personalizar el formulario, el email y la página de destino en el editor de formularios. Mailjet generará el código para el formulario de registro y se encargará del flujo de trabajo.
¿Tu página web se ejecuta en WordPress? Entonces seguramente te interese echar un vistazo al plugin de WordPress de Mailjet, que te permite crear un formulario de inscripción, gestionar tus contactos, crear emails y ver estadísticas en tiempo real directamente desde tu escritorio de WordPress Admin.
Crear un formulario
En el menú, selecciona "Contactos" → "Editor de formularios".
Ahora haz clic en el botón "Crear formulario nuevo".
La página "Crear formulario nuevo" muestra las diferentes secciones de tu formulario.
Cuando completes una sección, su marca de verificación se volverá de color verde.
Y una vez que completes todas las secciones, ya podrás publicar el formulario de inscripción que acabas de crear.
- Título: Ponle un título a tu formulario para identificarlo en tus informes. Es un nombre de uso interno que solo verás tú.
- Diseño del formulario: Crea y previsualiza tu formulario.
- Detalles del email: Define la línea de asunto y la información del remitente.
- Diseño del email: Puedes personalizar el email que se envía a los nuevos suscriptores en el que se les pide que corroboren su suscripción a tu newsletter (opt in doble). Este email incluirá un botón con el enlace que redirige a los destinatarios a la página de confirmación.
- Página de confirmación: Cuando alguien se registre en tu formulario, recibirá un email de confirmación con un enlace para corroborar su registro. Por defecto, este enlace lleva a la página de confirmación a través de Mailjet, que puedes diseñar en el editor de formularios. Si prefieres usar tu propia página de confirmación alojada en tu sitio web, haz clic en "Usar una página de confirmación externa" y luego introduce la URL.
- Lista de contactos: Elige dónde se almacenan los datos de los suscriptores.
Vamos a empezar: Haz clic en "Diseñar formulario" para seleccionar la plantilla de tu formulario.
El primer paso es decidir qué tipo de formulario quieres crear:
¿Prefieres que tu formulario de inscripción esté directamente integrado en tu página web? ¿O mejor que aparezca de forma emergente en una nueva ventana cuando se haga clic en un botón o enlace?
Formulario integrado o emergente
Formularios de suscripción incrustados y formularios de suscripción emergentes son dos formas diferentes de mostrar formularios para recopilar información de suscriptores, que se utilizan a menudo en sitios web para recolectar direcciones de correo electrónico. Vamos a ver las diferencias y los beneficios de cada uno.
Formulario integrado
Descripción:
- Un formulario incrustado está integrado directamente en el contenido de una página web. Es estático y permanece visible en la página, lo que significa que los visitantes siempre lo pueden ver sin necesidad de interactuar.
- Normalmente, los formularios incrustados se colocan en áreas de mucho tráfico como la barra lateral, el pie de página o al final de una entrada de blog.
Beneficios:
- No intrusivo: Como forma parte de la página, no interrumpe la experiencia del usuario. Los visitantes pueden interactuar con el formulario a su propio ritmo.
- Siempre visible: Proporciona una presencia constante en la página, lo cual facilita a los usuarios encontrarlo y suscribirse cuando se sientan preparados.
- Ideal para una recopilación a largo plazo: Los formularios incrustados son efectivos si se quiere mantener una visibilidad constante, en particular para usuarios que visitan frecuentemente el sitio.
- Mejor integración con el contenido: Los formularios incrustados se integran naturalmente en el contexto, por ejemplo, después de un artículo o la descripción de un producto, incentivando a los usuarios a suscribirse después de consumir el contenido.
Cuándo utilizarlo:
- Cuando se desea un enfoque sutil para recolectar correos electrónicos, sin interrumpir la experiencia de navegación del usuario.
- En blogs, artículos, o páginas de productos donde los usuarios podrían querer suscribirse después de recibir valor del contenido.
Formulario emergente
Descripción:
- Los formularios emergentes aparecen en la página web como una ventana modal después de un cierto tiempo, tras una acción específica (como desplazarse o hacer clic en un botón), o con intención de salida (cuando el visitante está a punto de abandonar la página).
- Los formularios emergentes suelen ser visualmente llamativos e incluyen incentivos como descuentos u ofertas especiales.
Beneficios:
- Alta visibilidad: Los formularios emergentes captan la atención de inmediato porque aparecen en el centro de la pantalla. Esto los hace muy efectivos para generar suscripciones.
- Opciones de temporización y activación flexibles: Puedes configurar los formularios emergentes para que aparezcan tras una acción específica, como el tiempo que se ha pasado en la página, el porcentaje de desplazamiento o la intención de salida (que tienen que codificarse por tu parte). Esto te permite dirigirte a los usuarios que probablemente estén más interesados.
- Eficaz para la conversión de leads: Debido a su naturaleza intrusiva, los formularios emergentes son efectivos para aumentar las conversiones, especialmente si se acompañan de una oferta atractiva como un descuento, una guía gratuita, o contenido exclusivo.
- Personalizable según el comportamiento del usuario: Se pueden personalizar según la actividad del usuario, lo cual es ideal para dirigir mensajes específicos a audiencias determinadas.
Cuándo utilizarlo:
- Cuando se desea maximizar rápidamente el número de suscripciones y se tiene algún incentivo que ofrecer, como un descuento, un eBook o una guía gratuita.
- En páginas donde puede ser necesario captar la atención del usuario antes de que se vaya, como páginas de productos o de intención de salida.
Si eliges un formulario emergente como tipo de formulario, aparecerá un botón adicional que se llamará "Disparador" en la página de diseño del formulario para que puedas modificar el botón que desencadenará tu formulario emergente y dejarlo a tu gusto (texto, colores, etc...).
En este ejemplo, elegiremos el formulario "emergente".
Herramientas de diseño de formularios
Esta parte se corresponde con el principio del diseño, donde decides la estructura que tendrá tu formulario. En este paso puedes añadir tantas columnas como necesites. Podrás añadir el contenido más adelante.
Puedes elegir entre 1 y 4 columnas consecutivas, además de jugar con la relación entre los distintos bloques de contenido. Para ello, haz clic en "ver más opciones".
El diseño puede cambiarse más tarde utilizando la barra de herramientas si lo necesitas.
Herramientas de contenido
Este área abarca todos los elementos de contenido que aparecerán en tu formulario (texto, imágenes, botones, redes sociales, etc.).
Añadir contenido es muy fácil: solo tienes que hacer clic en el bloque de contenido y arrastrarlo al lugar que quieras de tu formulario. Si quieres mover el bloque de sitio, arrástralo y suéltalo en la nueva ubicación.
Haz clic dentro del marco para personalizar el elemento utilizando la barra de herramientas que aparece alrededor del marco.
Texto
Con la barra de herramientas de texto, es muy fácil personalizar tu bloque de texto y darle formato. Puedes:
- Ajustar la altura de las líneas.
- Alinear el texto.
- Establecer el color de fondo.
- Modificar los márgenes.
- Dar formato al texto (fuente, negrita, cursiva, etc.).
- Seleccionar el tipo de consentimiento (explícito o implícito).
Imagen
La barra de herramientas de imagen te permite:
- Configurar la posición horizontal.
- Modificar los márgenes.
- Aplicar un borde (forma) a la imagen.
- Aplicar el escalado en móvil.
- Establecer el color de fondo.
Hay dos maneras de añadir una imagen a la sección:
- Cargar tu imagen o elegir una imagen de tu galería.
- Enlazar a una imagen existente en línea.
En este ejemplo, vamos a cargar una imagen.
Haz clic en el botón de cargar imagen y arrastra el archivo de la imagen y suéltalo en el cuadro de diálogo o bien haz clic en el enlace "importar un archivo" para cargar la imagen. También tienes la opción de cargar una imagen desde un enlace externo.
Puedes añadir a la imagen un texto alternativo. Así, si por alguna razón la imagen no se puede visualizar, aparecerá el texto alternativo en su lugar. Es importante que el texto alternativo sea breve y descriptivo, tipo tuit. :)
Una vez elegida la imagen, puedes usar el Editor de imágenes para recortarla, cambiarle el tamaño, rotarla o invertirla.
Esto puedes hacerlo también después de guardar la imagen, haciendo clic en la imagen que quieras modificar y luego en el botón del Editor de imágenes.
Divisor
Puedes añadir una línea divisora para separar secciones o elementos dentro de una sección.
La barra de herramientas de divisor te permite:
- Establecer el color de fondo.
- Modificar los márgenes.
- Dar formato a la línea (diseño, color, grosor).
- Ajustar el espaciado horizontal y vertical.
Botón
La barra de herramientas de botón ofrece muchas opciones, como:
- Radio del borde (establece la redondez de las esquinas del botón).
- Color, grosor y estilo (sólido, punteado, discontinuo, etc.) del borde del botón.
- Configurar la posición horizontal y el espaciado interno.
- Añadir un hipervínculo.
- Alineamiento de la fuente.
- Ajustar los márgenes.
- Personalizar el texto utilizando datos de los contactos.
- Dar formato a la fuente (familia de la fuente, color, negrita, etc.).
Espaciador
Añade un espacio en blanco para separar los elementos o las secciones de tu formulario. Con la herramienta de espaciador puedes:
- Establecer la altura del espacio en blanco (en píxeles).
- Añadir un color de fondo (opcional).
Redes sociales
Añade a tu formulario los iconos de tus redes sociales favoritas, como Facebook, Twitter, LinkedIn, Instagram, YouTube…
Haz clic en el botón "Configurar enlaces" para abrir el recuadro de configuración de redes sociales, donde puedes:
- Seleccionar hasta 10 iconos de redes sociales.
- Modificar el texto de las etiquetas.
- Compartir la versión en línea de tu newsletter de marketing en tu cuenta de redes sociales o configurar el enlace para que redirija directamente a la página de tu red social.
- Crear tu propio icono de redes sociales haciendo clic en "Añadir un icono personalizado".
Para mostrar y configurar las etiquetas de texto, haz clic en "Mostrar etiquetas".
Haz clic en las opciones del bloque (lápiz) para configurar el tamaño, las formas y el color de los iconos, así como el color de fondo y el espaciado interno de la sección.
Bloque HTML
Puedes añadir directamente código HTML en tu formulario. Arrastra el bloque HTML a tu formulario y después haz clic en el botón de la barra de herramientas para abrir la ventana del editor de HTML y añadir el código.
Vídeo
Si quieres añadir un vídeo a tu formulario, arrastra la herramienta de vídeo a la ubicación que desees. En el recuadro emergente, añade la URL de tu vídeo.
Si tu vídeo es de YouTube, Vimeo o Dailymotion, las imágenes de previsualización se generarán automáticamente. Para todos los demás vídeos, haz clic en "Elegir otra imagen" para añadir tu propia imagen de previsualización.
Una vez creada la miniatura de previsualización, se añadirá el botón de reproducción predeterminado. Este último puedes cambiarlo, y puedes elegir entre varios diseños. Ten en cuenta que la imagen del botón de reproducción se redimensionará automáticamente en función del tamaño de la miniatura. En concreto, será el 50 % del borde más pequeño (ancho o alto) de la previsualización en miniatura.
El último paso es añadir una descripción sencilla de la imagen de previsualización en el campo "Texto alternativo de la imagen". Este texto alternativo se mostrará en caso de que tu suscriptor no pueda ver la imagen. Después, haz clic en "Insertar un vídeo".
Desde la barra de herramientas de vídeo, puedes hacer clic en el botón "Vídeo" para editar tu vídeo cuando quieras.
Formularios
Es muy fácil recopilar información adicional (datos) de tus suscriptores: solo tienes que hacer clic en el bloque de formulario que te interese y arrastrarlo al lugar del formulario que quieras. Si quieres mover el bloque de sitio, arrástralo y suéltalo en la nueva ubicación.
Texto
El bloque de formulario "Texto" te permite añadir una propiedad (dato) en forma de cadena de caracteres vinculada al email del suscriptor. La longitud máxima de este campo es de 255 caracteres.
Opciones disponibles:
- Configurar la posición horizontal y el espaciado interno.
- Aplicar un borde (forma) a la imagen.
- Establecer el color o imagen de fondo.
- Seleccionar un dato de contacto.
- Establecer que el campo es obligatorio.
- Añadir un texto marcador de posición (sugerencias).
- Ajustar el límite máximo de caracteres.
Área del texto
El bloque de formulario "Área del texto" te permite añadir una propiedad (dato) en forma de cadena de caracteres vinculada al email del suscriptor (igual que el bloque "Texto"), pero esta vez la longitud máxima permitida del campo es de 500 caracteres.
Opciones disponibles:
- Configurar la posición horizontal y el espaciado interno.
- Aplicar un borde (forma) a la imagen.
- Establecer el color o imagen de fondo.
- Seleccionar un dato de contacto.
- Establecer que el campo es obligatorio.
- Añadir un texto marcador de posición (sugerencias).
- Ajustar el límite máximo de caracteres.
Número
El bloque de formulario "Número" te permite añadir una propiedad (dato) en forma de entero o decimal vinculada al email del suscriptor. Puedes añadir un rango personalizado y límites de incremento para este campo.
Opciones disponibles:
- Configurar la posición horizontal y el espaciado interno.
- Aplicar un borde (forma) a la imagen.
- Establecer el color o imagen de fondo.
- Seleccionar un dato de contacto.
- Establecer que el campo es obligatorio.
- Añadir un texto marcador de posición (sugerencias).
- Establecer un rango personalizado o límites de incremento.
Botón de opción
El bloque para formularios "Botón de opción" permite al usuario elegir una única opción entre un conjunto predeterminado de opciones mutuamente excluyentes. Cuando el usuario elige un botón de opción, cualquier botón de opción seleccionado anteriormente en el mismo grupo deja de estar seleccionado.
Opciones disponibles:
- Cambiar márgenes
- Formatear el texto (fuente, negrita, cursiva, etc.)
- Establecer los colores del fondo, el borde interior y el borde exterior de los botones de opción
- Elegir el posicionamiento (espacio entre los iconos y el texto, o entre las distintas opciones)
- Utilizar una propiedad de contacto
- Establecer que el campo sea obligatorio
- Definir el texto para cada botón de opción
Ten en cuenta que las distintas opciones de texto variarán en función del tipo de propiedad que hayas elegido (cadena de caracteres, entero, booleano, etc.)
URL web
El bloque para formularios "URL web" se utiliza para almacenar URL de páginas web. Su uso más habitual es el de almacenar la página web personal del contacto. El formulario solo aceptará una URL que tenga un formato correcto. Si el formato es incorrecto, el campo cambiará a rojo y aparecerá un mensaje de error.
Opciones disponibles:
- Establecer bordes y espaciado
- Establecer el color o imagen de fondo
- Establecer que el campo sea obligatorio
- Añadir un texto marcador de posición (sugerencias)
- Ajustar el límite máximo de caracteres
Fecha
El bloque para formularios "Fecha" se utiliza para almacenar fechas en un formulario, como por ejemplo la fecha de nacimiento de un usuario. Se aplica una máscara de entrada al campo automáticamente, que le muestra al usuario la forma correcta de introducir la fecha, y que puedes cambiar en el panel de preferencias.
Opciones disponibles:
- Establecer bordes y espaciado
- Establecer el color o imagen de fondo
- Utilizar una propiedad de contacto
- Establecer que el campo sea obligatorio
- Preferencias de formato de fecha
Menú desplegable
El bloque para formularios "Menú desplegable" permite al usuario elegir una única opción entre un conjunto que aparece en un menú desplegable con opciones predefinidas, de forma parecida al bloque de "Botón". Cuando el usuario elige una opción del menú desplegable, cualquier otra opción previamente seleccionada deja de estar seleccionada.
El uso de un menú desplegable en un formulario de inscripción hace que el formulario sea más fácil de usar al reducir la cantidad de escritura requerida y al proporcionar un conjunto claro de opciones para que el usuario elija. Además, puede ayudar a garantizar que los usuarios proporcionen información precisa y coherente, lo que puede ser importante para administrar las suscripciones.
Opciones disponibles:
- Establecer bordes y espaciado
- Formatear el texto (fuente, negrita, cursiva, etc.)
- Colores de los iconos de flecha
- Establecer el color o imagen de fondo
- Utilizar una propiedad de contacto
- Establecer que el campo sea obligatorio
- Definir el texto para cada opción
Secciones
Duplicar una sección
Haz clic dentro de la sección que quieras duplicar para resaltarla y después haz clic en el icono de duplicación situado en la parte derecha de la pantalla.
Eliminar una sección
Para eliminar una sección del cuerpo de tu formulario, haz clic dentro de la sección que quieras eliminar y después haz clic en el icono de la papelera. Finalmente, confirma la eliminación.
También puedes eliminar rápidamente una sección o un elemento arrastrándolo al área de herramientas de contenido.
Ajustes de estilo global
Puedes dar formato fácilmente a los estilos de texto de todos los párrafos, encabezados e hipervínculos de tu formulario con tan solo un par de clics.
Para acceder a los estilos globales de texto, haz clic en el icono del engranaje de la esquina superior izquierda (pestaña "Ajustes").
Tal como sugiere su nombre, la opción "Estilo global" define la familia y el color de fuente de todos los elementos enumerados (encabezados, párrafos y enlaces).
Luego, puedes personalizar aún más el estilo de cada uno de estos tipos de elementos.
Para terminar, si quieres usar un estilo de texto diferente para un encabezado o párrafo determinado, solo tienes que aplicar el método de siempre: utilizar la barra de herramientas de la sección para cambiar el estilo del texto.
Opciones de logo
Al usar nuestro Editor de formularios, se agregará un logotipo 'Con la tecnología de Mailjet' al pie de página.
Puedes elegir entre cinco colores diferentes en la sección 'Opciones de logo' en la pestaña 'Ajustes'. Ten en cuenta que el logo no se puede mover ni cambiar de tamaño.
Si estás en un plan de pago, el logo se puede eliminar seleccionando la opción 'Sin logo'.
Modificación de mensajes de éxito y error
Los usuarios ven estos mensajes cuando envían un formulario correctamente o cuando hay un error. Todavía tienen que hacer clic en el email de opt in doble para suscribirse.
Estos mensajes se generan automáticamente, así que no tienes que preocuparte. Aun así, si quieres mostrar tus propios mensajes de éxito y error, también puedes.
En la página 'Diseño de formulario', haz clic dentro del marco del formulario para mostrar la barra de herramientas y selecciona el icono de botones deslizantes. Entonces podrás modificar los dos mensajes y adaptarlos a tu gusto.
Tipo de consentimiento y modificaciones en el texto
Puedes elegir entre dos tipos de consentimiento, explícito e implícito. Haz clic dentro del marco de texto de consentimiento para mostrar la barra de herramientas y selecciona el icono de botones deslizantes. Elige el tipo de consentimiento que quieres utilizar y edita el texto para incluir cambios si lo necesitas.
Consentimiento explícito (recomendado)
El consentimiento explícito es aquel en el que un individuo puede tomar la decisión de si autoriza o no la recopilación de su información personal antes de que se recojan dichos datos. Esta es la mejor forma de asegurarse de que los suscriptores están de acuerdo con recibir tus comunicaciones.
Consentimiento implícito
El consentimiento implícito no requiere que los suscriptores "marquen la casilla". Este tipo de consentimiento significa que, por el hecho de enviar el formulario, los suscriptores están de acuerdo con recibir las comunicaciones que planeas enviarles.
Guardar una plantilla
Crear una plantilla te permite ahorrar tiempo y esfuerzo en el futuro. Al crear una plantilla de tu trabajo, puedes reutilizarla fácilmente para proyectos similares sin tener que empezar desde cero cada vez.
Al diseñar tu formulario, puedes optar por guardarlo como una nueva plantilla o reemplazar una plantilla existente. Desde la página de diseño del Editor de formularios, simplemente haz clic en el menú desplegable en la parte superior derecha y selecciona "Guardar como plantilla".
En general, guardar tu trabajo como una plantilla puede ahorrarte tiempo y esfuerzo a largo plazo, a la vez que garantiza la coherencia, la estandarización y la colaboración entre proyectos.
Para acceder a tus plantillas guardadas al crear un formulario, haz clic en el botón "Diseñar un formulario" y luego elige una de tus propias plantillas.
Editar, duplicar o eliminar una plantilla
Para editar, duplicar o eliminar una plantilla de formulario, ve a la página de gestión de plantillas de formularios y haz clic en el icono del engranaje.
Se te presentarán varias opciones entre las que puedes elegir. Elige la acción que quieres y listo.
Nota: Por favor, recuerda tener cuidado al eliminar plantillas de formularios, ya que esta acción es permanente y no puede deshacerse.
Integrar tu formulario en tu página web
El último paso es integrar el código HTML del formulario de inscripción. Para ello, basta con copiar el código y pegarlo en tu página web.
Aquí tienes un desglose del código que te ayudará con su integración en tu página web.
Integrar tu formulario en WordPress
Puedes añadir el código del formulario de inscripción directamente a una publicación o una página o a través de un widget de WordPress.
En este primer ejemplo, vamos a crear una nueva página y añadirle el formulario de inscripción.
En el menú, selecciona "Páginas" → "Añadir nueva".
Introduce el título de la página, elige el bloque de "HTML Personalizado", y pega el código del formulario de inscripción (de tu cuenta de Mailjet).
Haz clic en "Publicar" y listo: tu formulario de inscripción aparecerá en la nueva página.
También puedes añadir tu formulario de inscripción a tu sitio web a través de los widgets de WordPress.
En el menú principal, ve a "Apariencia" → "Widgets".
En la página de Widgets, verás todos tus widgets. Para añadir un nuevo widget (el formulario), haz click en el icono "+" que hay en la esquina superior izquierda y arrastra el bloque de "HTML personalizado" desde el menú de widgets.
Pega el código del formulario de inscripción (desde tu cuenta de Mailjet) en la sección "Contenido". Después haz clic en "Actualizar".
Y ya estaría todo. Ya puedes acceder a tu página web para ver tu formulario de inscripción.
Previsualizar un formulario
Para previsualizar tu formulario de inscripción, ve a la sección "Diseño del formulario" y haz clic en el icono del lápiz (editar).
Cuando estés en la página de diseño del formulario, haz clic en el botón "Previsualizar" situado en la esquina superior derecha de la pantalla.
Puedes previsualizar tu formulario en diferentes dispositivos, como dispositivos móviles y de escritorio.
Ver el código de un formulario
En la página de gestión de formularios, haz clic en el icono del engranaje del formulario cuyo código quieras ver y selecciona "Ver código".
Aquí tienes un desglose del código que te ayudará con su integración en tu página web.
Editar un formulario
En la página de gestión de formularios, haz clic en el icono del engranaje y selecciona "Editar".
Ten en cuenta que tendrás que volver a cargar el código HTML de tu página web después de cada modificación que realices en el formulario de inscripción para que se apliquen los cambios.
Archivar, eliminar o restaurar un formulario
Si quieres archivar un formulario concreto, haz clic en el icono del engranaje en la página de gestión de formularios y selecciona "Archivar".
Si quieres archivar varios formularios a la vez, marca la casilla de verificación de cada formulario y después haz clic en el botón de "Archivar".
Si deseas eliminar permanentemente un formulario que ya has archivado, ve a la sección de "Archivados" de la página de gestión de formularios, haz clic en el icono del engranaje y selecciona "Eliminar".
Recuerda tener cuidado siempre al eliminar formularios o cualquier otro dato de tu cuenta de Mailjet, ya que la información eliminada no se puede recuperar.
Si has archivado un formulario y quieres restaurarlo, puedes hacerlo en el icono del engranaje, seleccionando "Restaurar".
Solución de problemas
Si habías implementado un formulario de inscripción en tu página web y de repente ha dejado de funcionar, verifica que la lista de contactos asociada al formulario no haya sido modificada o eliminada.