Índice
- ¿Cómo funciona?
- Crear un formulario
- Integrar tu formulario en tu página web
- Previsualizar un formulario
- Ver el código de 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
Ambos son tipos de formularios para captar clientes potenciales. La diferencia está en cómo se muestran.
Formulario integrado
El formulario integrado se encuentra normalmente alojado en una página diseñada para ello, en una web, y el usuario debe visitar esa página web en concreto para suscribirse utilizando el formulario.
Formulario emergente
El formulario emergente aparecerá después de que el usuario haga clic en un botón. El botón puede colocarse en muchos lugares distintos de tu página web. Además, el formulario puede configurarse para que aparezca en función de otras condiciones predefinidas, también se puede activar a través de un hipervínculo, una imagen o cualquier elemento HTML que pueda activar una función Javascript (que tienen que codificarse por tu parte), lo que te permite captar clientes potenciales en función de sus patrones de comportamiento.
Por ejemplo, puedes hacer emerger un formulario cuando un usuario lleve un tiempo viendo tu web, o cuando esté a punto de abandonarla.
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, peso).
- 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, peso 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
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.
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.
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.
Eliminar un formulario
Si quieres eliminar un formulario concreto, haz clic en el icono del engranaje en la página de gestión de formularios y selecciona "Archivar".
Si quieres eliminar varios formularios a la vez, selecciona la casilla de verificación de cada formulario y después haz clic en el botón de "Archivar".
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.