> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.laposta.org/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.laposta.org/_mcp/server.

# Modificar el diseño y la visualización del formulario de registro incrustado

> Configura la disposición, el ancho y la visualización (inline, pop-up o slide-in) de tu formulario de registro incrustado, y define cuándo aparece.

Con un formulario de registro incrustado, los visitantes se suscriben sin salir de tu sitio web. El formulario está directamente en tu propia página. Lo creas en Laposta, eliges tú mismo qué campos incluirá y no necesitas ni una línea de código para ello.

![Ejemplo de un formulario de registro incrustado con los campos Dirección de correo electrónico, Nombre y Apellidos y un botón Inscribirse](/_fern-files/_img/cbb05243e7db235e0cb7ee809bd655c9cacd144c97e31303440a0b53013e5f0f.webp)

Configuras el formulario con el editor de formularios. Ábrelo desde la lista correspondiente: ve a Suscriptores, haz clic en tu lista y selecciona Enriquecer → Suscribirse. Debajo de «Formulario de registro incrustado», haz clic en «Comenzar», también si quieres modificar un formulario existente. A continuación, haz clic en «Configurar» en la [página principal del formulario](/hoe-plaats-ik-het-ingebedde-aanmeldformulier).

## Trabajar en el editor

Haz clic en un elemento del formulario para editarlo. A la izquierda aparecen los ajustes, divididos en dos pestañas:

* En «Contenido» introduces los textos, eliges qué campos son visibles y seleccionas una imagen.
* En «Diseño» configuras, entre otras cosas, colores, fuentes y márgenes.

En una pantalla pequeña, los elementos suelen estar uno debajo del otro y el texto es más grande que en una pantalla grande. Por eso, en varios lugares del editor puedes cambiar entre «Escritorio» y «Móvil», para poder configurar ambas vistas por separado.

En la parte superior del editor encontrarás los botones «Deshacer» (paso atrás), «Rehacer» (paso adelante) y «Vista previa». Haz clic arriba a la derecha en «Vista previa» para ver el resultado y cambiar entre la vista normal y la móvil.

![La barra en la parte superior del editor con los botones Deshacer, Rehacer, Vista previa y Cerrar editor](/_fern-files/_img/f8b572a5503a51c52de5846335563d2d4015a5b0b72d5c981bd4cff091d04a70.webp)

## Abrir los ajustes generales

Haz clic junto al formulario, en el espacio en blanco, para abrir los ajustes generales de todo el formulario. A la izquierda aparecen las pestañas «Contenido», «Diseño» y «Visualización».

### Elegir la disposición

En la pestaña «Contenido», elige la disposición global haciendo clic en uno de los iconos. Con esto fijas la ubicación de los campos, la imagen y el botón tanto para escritorio como para móvil.

![El panel General en la pestaña Contenido con los iconos bajo Elige un diseño](/_fern-files/_img/27d74fc3b1adc978cafbbbdd3ab6297110e01531e3a64ab07a7cf72757cd1da2.webp)

### Configurar el ancho y las esquinas redondeadas

Ve a la pestaña «Diseño». En «Ancho del widget», establece el ancho en píxeles, por separado para escritorio y móvil. En «Redondeo», indica si el formulario tendrá esquinas redondeadas y cómo de redondeadas serán.

![La pestaña Diseño con Ancho del widget en 600 px y Redondeo en 10 px](/_fern-files/_img/59f97bf14f4f125d4229c2d210bebbb714d4fb4ae4006e3a71056ed0b0e88ae8.webp)

### Elegir entre en línea, ventana emergente o deslizar

En la pestaña «Visualización», elige bajo «Ubicación del formulario» cómo aparece el formulario en tu página:

* «En el lugar del código» (por defecto): muestra el formulario en línea, exactamente donde está el código javascript.
* «Ventana emergente»: coloca el formulario en el centro de la página, por encima del contenido.
* «Deslizar»: hace que el formulario se deslice hacia dentro de la página en el lugar que tú indiques.

![La pestaña Visualización con las opciones En el lugar del código, Ventana emergente y Deslizar en Ubicación del formulario](/_fern-files/_img/766bc6cf8a4a0ab033c1e41ff62da9c1e28458218c35a4cec4b09aab9c81e189.webp)

### Configurar cuándo aparece el formulario

Por defecto, el formulario aparece directamente al cargar la página. Si quieres cambiarlo, en la pestaña «Visualización» haz clic en «Añadir condición» bajo «¿Cuándo mostrar?».

![El menú desplegable bajo Añadir condición en ¿Cuándo mostrar?, con Después de cierto tiempo, Al salir de la página y Después de desplazarse](/_fern-files/_img/7fc90a600eba00fad02efabebceb733e1a3e33c498f695beb5e76048c6fb37fe.webp)

Puedes elegir entre tres momentos:

* «Después de cierto tiempo»: unos segundos después de que se cargue la página.
* «Al salir de la página»: en cuanto tu visitante sale de la página con el ratón. Hasta ese momento, el formulario es invisible.
* «Después de desplazarse»: el formulario solo aparece cuando tu visitante se ha desplazado hacia abajo un determinado porcentaje de la página.

### Configurar cuándo deja de aparecer el formulario

Por defecto, el formulario deja de mostrarse en cuanto se ha rellenado. Haz clic bajo «¿Cuándo dejar de mostrar?» en «Añadir condición» para configurar otros momentos:

* «Después de cerrar»: el formulario se ha descartado. Puedes indicar si se puede volver a mostrar después de cierto tiempo.
* «Después de mostrar»: el formulario se ha visto. Aquí también puedes indicar si se puede volver a mostrar después de cierto tiempo.
* «Después de número de veces»: el formulario se ha visto un determinado número de veces.

> **Note**
>
> Puedes combinar condiciones, tanto para mostrar como para ocultar.

### Elegir en qué páginas está el formulario

Por defecto, el formulario está activo en todas las páginas donde se encuentre el código (indicado con la ruta `/*`). En la pestaña «Visualización» puedes modificar esto bajo «¿En qué páginas de su sitio web?».

A través de «Configurar visualización de páginas» indicas dónde se puede mostrar el formulario. A través de «Configurar ocultación de páginas» indicas dónde no se debe mostrar. Introduce aquí las rutas (partes de las URL de tu sitio web). Para ello puedes utilizar un comodín: `contacto/*` representa todas las páginas que empiezan por `contacto/`.

### Mostrar u ocultar con javascript

Independientemente de los ajustes en Laposta, tú o tu desarrollador web también podéis determinar mediante javascript cuándo se abre o se cierra el formulario. Las dos funciones necesarias, incluido el código único de tu formulario, se encuentran en la pestaña «Visualización» bajo «Mostrar u ocultar con javascript».

![El bloque Mostrar u ocultar con javascript con las funciones para open y close](/_fern-files/_img/8e5977b32533e9c02df8470dade674007c1c4f022d3da60260824fb9aedcc875.webp)

Puedes leer cómo rellenar y diseñar los distintos elementos del formulario en [Texto en el formulario de registro incrustado](/inhoud-en-vormgeving-tekst), [Imagen en el formulario de registro incrustado](/invoeren-en-vormgeven-afbeelding) y [Campos en el formulario de registro incrustado](/weergave-en-vormgeving-velden).

## Artículos relacionados

#### [Modificar el texto en el formulario de registro incrustado](/inhoud-en-vormgeving-tekst)

Modifica el título, el texto, el tamaño de letra, el margen interior y el color de…

#### [Modificar el formulario de modificación](/waar-vind-ik-het-wijzigingsformulier)

Encontrarás el formulario de modificación en Suscriptores → Enriquecer → Editar. Allí…

#### [Usar y modificar el formulario de registro independiente](/hoe-pas-ik-het-zelfstandig-aanmeldformulier-aan)

Comparte tu formulario mediante un enlace de alta y modifica los campos, el texto, el…

#### [Crear tu propio formulario de registro con HTML](/kan-ik-helemaal-zelf-een-aanmeldformulier-vormgeven-optie-3)

Utiliza el HTML básico de Laposta para crear tu propio formulario de registro para tu…