Chapters
- Creador de formularios de registro: diseña formularios
- Crea y publica páginas de destino
- Crear e insertar formularios de registro
- Crear y mostrar formularios emergentes
- Crea y coloca formularios Slide-in
Contents
the email tool that makes email marketing simple
Creador de formularios de registro: diseña formularios
Published: · Last updated: · By Marcus Biel
In brief
Aprende a usar el creador visual de formularios de Maildroppa para elegir plantillas, organizar contenido, asignar etiquetas y conectar flujos.
El Creador de formularios de registro es el editor visual para todos los formularios de registro y las páginas de destino de Maildroppa.
Puedes usarlo para organizar diseños, añadir texto e imágenes, configurar campos de suscriptor, cambiar colores y fuentes, asignar etiquetas y decidir qué ocurre después de que alguien envía el formulario. El lienzo muestra el resultado mientras trabajas, por lo que no necesitas escribir código para diseñar una experiencia de registro completa.
Maildroppa utiliza el mismo creador para cuatro tipos de formularios:
- Las páginas de destino son páginas independientes completas que publicas y compartes mediante un enlace.
- Los formularios incrustados se colocan directamente dentro de una página de tu sitio web.
- Las ventanas emergentes aparecen sobre tu sitio web y también pueden abrirse desde un elemento de la página.
- Los formularios deslizables aparecen en un borde o una posición seleccionados de la ventana del navegador.
Esta guía explica todas las funciones compartidas por estos tipos de formularios. Las guías enlazadas explican únicamente los ajustes y pasos exclusivos de cada tipo.
Abrir el Creador de formularios de registro
Abre «Signup Forms» en Maildroppa. Después, puedes hacer clic en «Create Form» para crear una nueva página de destino, formulario incrustado, ventana emergente o formulario deslizable.
Para continuar trabajando en un formulario existente, haz clic en su nombre o selecciona «Edit Form» en el menú de acciones de tres puntos de la Vista general de formularios de registro.
Asigna al formulario un nombre interno claro. Nombres como «Boletín de la página de inicio», «Ventana emergente del seminario web» o «Recurso descargable de verano» son más fáciles de reconocer después que nombres genéricos como «Formulario 1». El nombre del formulario te ayuda a gestionarlo en Maildroppa y no se muestra automáticamente a los visitantes.
Entender el creador
El creador está dividido en cuatro áreas principales.
La barra superior contiene el nombre del formulario y las acciones principales. Aquí puedes volver a la vista general, previsualizar tu trabajo y guardarlo. Las páginas de destino también muestran en esta barra los controles de borrador y publicación.
La barra lateral izquierda contiene «Layout», «Content» y «Layers». Úsala para crear la estructura, añadir elementos nuevos y gestionar todo lo que ya está colocado en el lienzo.
El lienzo es el área de trabajo central. Muestra la página o el formulario actual. Haz clic en un elemento para seleccionarlo. También puedes arrastrar elementos a otra ubicación o añadir elementos nuevos desde la barra lateral izquierda.
La barra lateral derecha contiene «Settings» y «Page settings». «Settings» modifica el elemento seleccionado. «Page settings» modifica el fondo general y los valores de diseño predeterminados.
En pantallas más pequeñas, las barras laterales se abren como paneles mediante los botones «Content» y «Settings». Las funciones disponibles siguen siendo las mismas.
Empezar con una plantilla
Al crear un formulario, el creador ofrece diseños iniciales para el tipo de formulario seleccionado. Puedes comenzar con un diseño en blanco, usar el formulario estándar o elegir una plantilla prediseñada.
Las plantillas proporcionan una estructura, colores, tipografía y contenido de ejemplo iniciales. No limitan lo que puedes cambiar después. Tras seleccionar una plantilla, todos los elementos se pueden editar, mover, duplicar, rediseñar o eliminar.
Cada tipo de formulario tiene plantillas adaptadas a su finalidad. Por ejemplo, las páginas de destino incluyen diseños completos de páginas para boletines, recursos descargables, seminarios web y listas de espera. Los formularios incrustados, las ventanas emergentes y los formularios deslizables tienen sus propios diseños iniciales compactos.
Si no sabes qué plantilla elegir, selecciona la cuya estructura se acerque más a tu objetivo. Cambiar el texto, los colores y las imágenes suele ser más rápido que crear la misma estructura desde un lienzo en blanco.
Crear el diseño
Abre «Layout» en la barra lateral izquierda para añadir una nueva fila de celdas. Los diseños disponibles incluyen:
- Una celda
- Dos, tres o cuatro celdas iguales
- Dos celdas con una proporción de 2:1
- Dos celdas con una proporción de 1:2
Haz clic en un diseño para añadirlo en la posición de inserción actual o arrástralo al lienzo. Después puedes colocar contenido dentro de cada celda.
Selecciona un cuadro o una columna para ajustar su tamaño, espaciado, alineación, fondo, borde y relleno en la barra lateral derecha. En los diseños de varias columnas, también puedes cambiar el ancho relativo de las columnas.
Usa los diseños para crear un orden de lectura claro. Una sola columna funciona bien para formularios de registro compactos. Un diseño de dos columnas es útil cuando quieres mostrar junto al formulario de registro una imagen, una lista de ventajas o información sobre un evento.
Añadir contenido
Abre «Content» en la barra lateral izquierda para añadir bloques de contenido individuales. Puedes hacer clic en un bloque para insertarlo o arrastrarlo a la posición deseada del lienzo.
El creador ofrece los siguientes bloques de contenido:
Signup form — Contiene los campos de suscriptor y el botón de envío. Un diseño necesita un bloque de formulario de registro antes de poder guardarse como formulario operativo. Una vez añadido el bloque, deja de ofrecerse como bloque de contenido adicional.
Text — Añade títulos, párrafos u otro texto con formato.
Image — Añade una imagen desde una URL, una carga o la biblioteca multimedia de Maildroppa. Puedes proporcionar texto alternativo, añadir un enlace y controlar las dimensiones, la proporción, el recorte, el punto focal, la rotación y el volteo.
Video — Añade un vídeo de YouTube o Vimeo, una URL de inserción o un archivo de vídeo directo. También puedes configurar una imagen de vista previa y la apariencia del botón de reproducción.
List — Añade una lista con viñetas o numerada. Edita las entradas y controla el color del marcador, el espaciado, la tipografía y la alineación.
Button — Añade un botón con enlace y texto, URL, tamaño, ancho, colores, borde, tipografía y alineación configurables.
Social links — Añade iconos enlazados para servicios como Facebook, Instagram, LinkedIn, TikTok, YouTube o tu sitio web.
Subscriber counter — Muestra el número actual de suscriptores confirmados. Puedes añadir un desplazamiento, cambiar la etiqueta y definir el estilo del número y el texto.
Spacer — Añade espacio vacío controlado. El espaciado para ordenadores y móviles se puede configurar por separado.
Divider — Añade una línea horizontal con color, grosor, ancho, estilo, alineación y espaciado configurables.
Las páginas de destino también ofrecen secciones reutilizables completas. Se explican en la guía de páginas de destino.
Seleccionar y organizar elementos
Haz clic en un elemento del lienzo para seleccionarlo. Sus ajustes aparecen en la barra lateral derecha.
Los controles del elemento seleccionado o situados junto a él te permiten moverlo, duplicarlo o eliminarlo. También puedes arrastrar un elemento a otra celda o posición. Un indicador de colocación muestra dónde se insertará.
Abre «Layers» cuando la página contenga muchos cuadros, columnas y bloques de contenido anidados. El panel Layers muestra toda la estructura en una lista. Desde allí puedes:
- Seleccionar un elemento
- Cambiarle el nombre para identificarlo más fácilmente
- Moverlo hacia arriba o hacia abajo
- Arrastrarlo a otra posición
- Bloquearlo o desbloquearlo
- Duplicarlo
- Eliminarlo
El bloqueo resulta útil cuando no quieres mover accidentalmente un fondo, una imagen o una sección terminados. Desbloquea la capa cuando quieras volver a editarla o cambiarla de posición.
Usa «Undo» y «Redo» en la barra de herramientas del creador para retroceder o avanzar por los cambios de diseño recientes.
Editar texto
Haz clic dentro de un elemento de texto para editar el contenido directamente en el lienzo. La barra de herramientas de texto ofrece estilos de párrafo y título, además de opciones de formato habituales.
Según el texto seleccionado, puedes usar negrita, cursiva, subrayado, tachado, subíndice, superíndice, alineación, listas con viñetas o numeradas, enlaces y emojis. Los ajustes del texto seleccionado también te permiten modificar la tipografía y los colores sin cambiar los demás elementos de texto.
Usa los ajustes de tipografía globales de «Page settings» cuando todos los títulos, textos del cuerpo, enlaces o botones deban compartir un estilo coherente. Usa los ajustes del elemento seleccionado cuando solo quieras que un bloque tenga un aspecto diferente.
Configurar el formulario de registro
Selecciona el bloque de formulario de registro en el lienzo para abrir sus ajustes. Las secciones disponibles abarcan la barra de progreso, el contador de suscriptores, los campos, las etiquetas ocultas, el contenedor del formulario, los campos de entrada y el botón de envío.
Campos de suscriptor
La dirección de correo electrónico es el campo central de un formulario de registro. También puedes añadir campos de suscriptor que existan en tu cuenta de Maildroppa.
Para cada campo, puedes cambiar la etiqueta y el texto de marcador, decidir si es obligatorio y elegir si se muestra la etiqueta del campo. Puedes reordenar los campos arrastrándolos o utilizando los controles de movimiento.
Solicita únicamente la información que realmente necesites. Los formularios más breves se completan más rápido, mientras que los campos adicionales son útiles cuando la información se utilizará para segmentación o personalización.
Etiquetas ocultas
Las etiquetas ocultas no se muestran a los visitantes. Cuando alguien se registra mediante el formulario, Maildroppa asigna automáticamente las etiquetas seleccionadas a ese suscriptor.
Esto resulta útil para identificar el origen o el interés detrás de un registro. Por ejemplo, un formulario para un seminario web puede aplicar la etiqueta «Seminario web», mientras que un formulario de recurso descargable puede aplicar una etiqueta relacionada con el tema descargado.
Barra de progreso
La barra de progreso se puede desactivar o mostrar como porcentaje o indicador de dos pasos.
Para un indicador porcentual, puedes cambiar el texto, los colores, el tamaño de fuente, el grosor y la alineación. Para un indicador de dos pasos, puedes editar las etiquetas de ambos pasos y elegir colores activos e inactivos.
Un indicador de progreso puede ayudar a explicar que enviar el formulario es el primer paso y confirmar el correo electrónico de Double Opt-in es el segundo.
Contador de suscriptores dentro del formulario
El formulario de registro puede mostrar el número actual de suscriptores confirmados antes o después del botón de envío.
Puedes añadir un desplazamiento, escribir una etiqueta, elegir la posición y ajustar la tipografía y la alineación. El desplazamiento se suma al número de suscriptores confirmados que muestra Maildroppa.
Este contador del formulario es diferente del bloque de contenido independiente «Subscriber counter». Usa el ajuste del formulario cuando el número deba estar directamente relacionado con el área de envío. Usa el bloque de contenido cuando el contador deba aparecer en otro lugar del diseño.
Diseño del formulario, los campos y el botón
Los ajustes de «Signup Form Block» controlan el contenedor alrededor de los campos, incluidos su fondo, borde, radio de las esquinas y espaciado.
Los ajustes de entrada controlan los fondos de los campos, las etiquetas, el texto, los marcadores, los bordes y el espaciado. El botón de envío tiene ajustes independientes para su texto, tipografía, colores, borde, dimensiones y alineación.
Puedes hacer clic directamente en la barra de progreso o en el botón de envío del lienzo para abrir inmediatamente los ajustes de esa parte.
Cambiar el aspecto general
Abre «Page settings» en la barra lateral derecha para cambiar el diseño general. En los formularios incrustados, las ventanas emergentes y los formularios deslizables, estos ajustes se aplican al lienzo del formulario y no a una página alojada completa.
Puedes configurar el fondo principal, la imagen de fondo, el ancho máximo y el espaciado para móviles. Los ajustes de apariencia definen valores predeterminados para:
- Fuente del cuerpo y color del texto
- Color de los enlaces, subrayado y color al pasar el cursor
- Fuente, color, grosor, tamaño y altura de línea de los títulos
- Botones
- Cuadros, bordes, radios de las esquinas, espacios y relleno
- Relleno de página para móviles y el punto en el que las columnas se apilan
Estos valores predeterminados mantienen la coherencia del diseño. Los bloques individuales pueden sobrescribirlos cuando sea necesario.
Conectar un flujo de registro
Cada formulario está conectado a un flujo de registro. El flujo de registro controla el recorrido del suscriptor después de enviar el formulario:
- Lo que el visitante ve inmediatamente después de enviar el formulario
- Qué correo electrónico de Double Opt-in se envía
- Qué ocurre después de que el suscriptor confirma su dirección de correo electrónico
Abre el control del flujo de registro en el encabezado del creador para ver el flujo asignado actualmente. Puedes seleccionar otro flujo existente, editar el flujo seleccionado o crear uno nuevo.
Un flujo de registro puede ser utilizado por varios formularios. Si editas un flujo compartido, el cambio afecta a todos los formularios que lo utilizan. Por eso, Maildroppa te permite elegir entre editar el flujo compartido o crear una copia independiente para el formulario actual.
Previsualizar y guardar
Haz clic en «Preview» para comprobar el diseño completo y la experiencia de registro antes de hacerlo público. La vista previa resulta útil para comprobar textos largos, proporciones de las imágenes, orden de los campos, etiquetas de los botones y el equilibrio general del formulario.
En los formularios incrustados, las ventanas emergentes y los formularios deslizables, haz clic en «Save changes» cuando estés listo para guardar la versión actual.
Las páginas de destino utilizan controles de borrador y publicación en la barra superior. Se pueden guardar sin publicarse, y los cambios realizados en una página ya publicada permanecen sin publicar hasta que los publiques. El flujo de trabajo completo se explica en Crear y publicar una página de destino.
Después de guardar, vuelve a la Vista general de formularios de registro para activar e incrustar un formulario en un sitio web o gestionar una página de destino publicada.
Continuar con tu tipo de formulario
El trabajo de diseño común ya está completo. Continúa con la guía del formulario que estás creando:
Ready to Send Better Emails?
Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.
No credit card required. No time limit.