Crear e insertar formularios de registro

Published: 16 de julio de 2026 · Last updated: 21 de julio de 2026 · By Marcus Biel

Un formulario insertado se coloca directamente dentro de una página existente de tu sitio web. Sigue formando parte del contenido que lo rodea en lugar de aparecer encima de este.

Los formularios insertados funcionan bien en artículos de blog, páginas de destino de tu propio sitio web, secciones de boletines, barras laterales y pies de página. El lugar donde añadas el código del formulario determina dónde aparecerá.

Esta guía explica los pasos específicos de los formularios insertados. Las funciones habituales de edición visual se explican en la guía principal del creador de formularios de registro.

Crear un formulario insertado

Abre «Signup Forms», haz clic en «Create Form» y selecciona «Embedded Form». Introduce un nombre interno claro y continúa al creador.

También puedes editar un formulario existente haciendo clic en su nombre en la vista general de formularios de registro.

El nombre interno no se muestra automáticamente a los visitantes. Nombra el formulario según su ubicación o propósito, por ejemplo «Boletín de la página de inicio», «Pie del blog» o «Actualizaciones de productos».

Elegir un diseño inicial

Los formularios insertados ofrecen un formulario en blanco, un formulario estándar y cuatro plantillas diseñadas:

• Nota serena
• Franja de cupón
• Editorial oscuro
• Azul minimalista

Elige el diseño que mejor coincida con el espacio y el tono del sitio web donde aparecerá el formulario. Todos los diseños iniciales pueden modificarse por completo después de seleccionarlos.

Diseñar el formulario insertado

Usa «Layout» y «Content» para organizar el formulario. Un formulario insertado puede contener el formulario de registro junto con texto de apoyo, imágenes, listas, botones, enlaces sociales, un contador de suscriptores, espaciadores o separadores.

Para una barra lateral o un pie de página estrechos, un diseño de una sola columna suele ser el más fácil de leer. En una sección de página más amplia, un diseño de dos columnas puede colocar una explicación breve o una imagen junto a los campos.

Selecciona el bloque del formulario de registro para elegir los campos de suscriptor, los campos obligatorios, las etiquetas, las etiquetas ocultas, un indicador de progreso y un contador de suscriptores opcional. Después puedes aplicar estilos por separado al contenedor del formulario, los campos y el botón de envío.

Abre «Page settings» para cambiar el fondo y las opciones de diseño generales del lienzo del formulario insertado. Ten en cuenta el sitio web que lo rodea. Un fondo transparente o sencillo suele integrarse de forma más natural, mientras que un fondo contrastante ayuda a destacar la oferta de registro.

Las instrucciones completas sobre diseños, contenido, capas, campos, etiquetas, tipografía y apariencia se encuentran en Usar el creador de formularios de registro.

Conectar el flujo de registro

Usa el control del flujo de registro en el encabezado del creador para revisar qué sucede después del envío, qué correo electrónico de doble confirmación se envía y qué ve el visitante después de confirmar.

Puedes seleccionar un flujo existente, editar el flujo asignado o crear uno nuevo. Si el flujo seleccionado se comparte con otros formularios, recuerda que editarlo también puede afectar a esos formularios.

Previsualizar y guardar

Haz clic en «Preview» para revisar el formulario completo antes de colocarlo en tu sitio web. Comprueba el orden de los campos, las etiquetas, el espacio para errores, el texto del botón y la cantidad de contenido de apoyo.

Haz clic en «Save changes» para guardar la versión actual. Vuelve a la vista general de formularios de registro cuando estés listo para insertarlo.

Activar el formulario

El formulario insertado debe estar activo antes de poder usar su código público.

Si el formulario está inactivo, abre su menú de acciones de tres puntos en la vista general de formularios de registro y selecciona «Activate». Un formulario activo muestra la acción «Show Code Snippet».

Desactiva el formulario cuando ya no deba estar disponible en tu sitio web. La desactivación lo deja fuera de línea sin eliminar su diseño ni los datos de informes anteriores.

Copiar el código JavaScript

Haz clic en «Show Code Snippet» y abre la pestaña «JavaScript». Maildroppa proporciona un script breve que contiene el ID único del formulario.

El código sigue esta estructura:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Copia el código completo sin cambiar la dirección del script ni el ID del formulario.

La opción JavaScript carga el formulario guardado actual mediante el sistema de formularios de Maildroppa. Cuando más adelante edites y guardes el mismo formulario en Maildroppa, el fragmento existente seguirá haciendo referencia a ese ID de formulario. No necesitas crear un formulario nuevo simplemente para cambiar su texto o diseño.

Añadir el formulario a tu sitio web

Pega el script en la ubicación de la página donde deba aparecer el formulario insertado.

Los pasos exactos dependen del sistema de tu sitio web. En un creador de páginas o sistema de gestión de contenidos, utiliza un bloque que acepte HTML personalizado o código de script. En un sitio web personalizado, añade el script a la plantilla o al marcado de página correspondiente.

Algunos editores de sitios web eliminan las etiquetas de script por motivos de seguridad. Si el formulario no aparece después de publicar la página, comprueba primero si el editor conservó el script completo de Maildroppa. Es posible que debas utilizar el área específica de código personalizado del sistema o pedir ayuda a la persona que gestiona el sitio web.

No pegues varias veces el mismo fragmento de formulario insertado en una página, a menos que quieras intencionadamente mostrar el mismo formulario en varias ubicaciones y hayas probado esa configuración.

Usar la pestaña HTML

La pestaña «HTML» proporciona el marcado generado del formulario. Esta opción está pensada para implementaciones personalizadas en las que quieras trabajar directamente con el HTML renderizado.

Copia el marcado completo si eliges este método. Como una integración de HTML personalizado puede verse afectada por los estilos y la implementación de tu sitio web, prueba cuidadosamente sus campos, validación, envío y flujo de confirmación.

Para el formulario normal gestionado por Maildroppa, el fragmento de JavaScript es la integración más breve y carga la configuración pública actual del formulario mediante su ID.

Probar el formulario insertado

Publica o previsualiza la página del sitio web que contiene el código. Después, prueba el formulario como lo haría un visitante:

1. Comprueba que el formulario aparezca en la posición correcta.
2. Visualiza la página en una pantalla ancha y en una estrecha.
3. Completa todos los campos obligatorios.
4. Envía el formulario y revisa la respuesta.
5. Abre el correo electrónico de doble confirmación.
6. Confirma la dirección y revisa la respuesta final.
7. Verifica que el suscriptor y las etiquetas ocultas aparezcan correctamente en Maildroppa.

Si el formulario es más ancho que el contenedor de su sitio web, ajusta en el creador el ancho del formulario, el diseño de columnas, el relleno o las opciones de apilado móvil. Evita solucionar los problemas de diseño modificando el código generado de Maildroppa.

Actualizar un formulario insertado

Abre el mismo formulario en Maildroppa, realiza los cambios, previsualízalos y haz clic en «Save changes». El fragmento de JavaScript de tu sitio web seguirá utilizando el mismo ID de formulario y cargará la configuración pública guardada.

Si el formulario debe retirarse temporalmente, desactívalo desde la vista general de formularios de registro. Si ya no lo necesitas, elimina también el fragmento del sitio web para que la página no contenga código sin utilizar.