# Crear un formulario

> Usa el editor de formularios para añadir pasos, texto, imágenes, botones y campos, dar estilo al formulario, previsualizarlo en cada dispositivo y publicarlo cuando supere las comprobaciones.

El editor de formularios es un editor a pantalla completa en el que diseñas lo que ven los visitantes: uno o varios pasos de formulario, un paso de confirmación, todos los bloques que contienen y los estilos del formulario. Esta página recorre cada parte del editor y las comprobaciones que debe superar un formulario antes de que puedas publicarlo.

## Antes de empezar

- Formularios está en acceso anticipado. Consulta [Formularios](/es/docs/forms/) si no está disponible en tu espacio de trabajo.
- Crea el formulario en **Email Marketing → Forms** con **Create form**, indicando un **Name** y un **Type**.

## Abrir el editor

En la página del formulario, selecciona **Edit form**. El editor se abre sobre el panel:

- **Cabecera:** el nombre del formulario (selecciónalo para cambiarlo), el distintivo **Draft** o **Live**, un indicador **Unsaved** cuando tienes cambios, **Undo** y **Redo**, un botón por cada paso, **Add step**, **Publish**, **Save** y el botón de cerrar.
- **Lienzo:** una vista previa en directo del paso seleccionado. Cambia entre **Desktop**, **Mobile** y **Both**, comprueba el tamaño del formulario, haz zoom con **Scale** y selecciona **Reset canvas** para volver a centrarlo.
- **Panel lateral:** las pestañas **Content** y **Styles**, y **Alerts & checks** en la parte inferior.

Selecciona **Save** para guardar los cambios. Al guardar un formulario publicado, también se actualiza en tu web.

## Pasos

Un formulario nuevo tiene dos pasos: **Step 1**, con un texto «Join our list», un campo **Email** y un botón **Subscribe**, y un paso **Success** que dice «Thanks for subscribing!».

- **Los pasos de formulario** contienen los campos que rellenan los visitantes. Selecciona **Add step** (el botón con el signo más de la cabecera) para añadir otro paso de formulario. Los pasos nuevos se colocan antes del paso de confirmación.
- **El paso de confirmación** se muestra después de que el visitante envíe el formulario. Úsalo para dar las gracias, enlazar a otra página u ofrecer un código de descuento.
- **Pasa de un paso a otro** con botones. Un botón **Next step** valida el paso actual y muestra el siguiente. Un botón **Submit** valida el paso, envía la respuesta y muestra el paso de confirmación.

Selecciona el botón de un paso en la cabecera para editarlo en el lienzo.

## Añadir bloques

En la pestaña **Content**, selecciona un bloque para añadirlo al paso actual. Para insertar un bloque en un lugar concreto, pasa el cursor por encima del lienzo entre dos bloques y selecciona el botón con el signo más. Arrastra los bloques para reordenarlos y selecciona un bloque para editar sus ajustes. **Delete** está en la parte superior de los ajustes de cada bloque.

| Grupo | Bloque | Úsalo para |
| --- | --- | --- |
| **Elements** | **Text** | Títulos y párrafos, con negrita, cursiva, enlaces y emojis. |
| | **Button** | Enviar el formulario, pasar al siguiente paso, cerrar el formulario o abrir un enlace. |
| | **Image** | Un logotipo, una foto de producto o una imagen de banner, opcionalmente con enlace. |
| **Inputs** | **Email** | La dirección de email del visitante. Se comprueba que tenga un formato válido. |
| | **Text input** | Cualquier texto corto, como un nombre o una empresa. |
| | **Phone** | Un número de teléfono. Se comprueba que tenga un formato válido. |
| | **Radio** | Una opción de una lista. |
| | **Checkbox** | Varias opciones de una lista, o una única casilla de consentimiento. |
| | **Date** | Una fecha, en el formato que elijas. |
| | **Dropdown** | Una opción de una lista, en un menú compacto. |

### Ajustes de los bloques

**Text**

- El contenido, que se edita directamente en el lienzo.
- **Typography:** **Alignment**, **Font size**, **Weight**, **Color** y **Link color**.

**Button**

- **Label** y **Action**: **Submit**, **Next step**, **Close** o **Go to URL**. **Go to URL** necesita además una **URL**.
- **Button style:** **Width** (automático o completo), **Alignment**, **Background**, **Text**, **Hover** y **Border radius**.

**Image**

- **Image URL**, **Alt text** y una **Link URL** opcional.
- **Layout:** **Width (%)**, **Alignment** y **Object fit**.

**Email, Text input, Phone y Date**

- **Property name:** la clave con la que se guarda el valor en cada respuesta, por ejemplo `email` o `company`. Debe ser única en el formulario.
- **Label**, **Placeholder** (o **Date format** para las fechas: `MM/DD/YYYY`, `DD/MM/YYYY` o `YYYY-MM-DD`) y **Help text**.
- **Required**, con un **Required message** opcional, y un **Invalid message** que se muestra cuando una dirección de email o un número de teléfono no parecen válidos. Los números de teléfono son más fáciles de validar en formato internacional, como `+15551234567`.

**Radio, Checkbox y Dropdown**

- **Property name**, **Label** y **Help text**.
- **Required**, con un **Required message** opcional.
- **Layout:** vertical u horizontal.
- **Options**, una por línea con el formato `label|value`, por ejemplo `Weekly digest|weekly`.

**Todos los bloques**

- **Spacing:** **Margin top** y **Margin bottom**.
- **Visibility:** **Show on** **Desktop & mobile**, **Desktop only** o **Mobile only**. Los bloques ocultos siguen en el formulario y solo se excluyen de la vista previa y del dispositivo correspondientes.

## Dar estilo al formulario

La pestaña **Styles** controla todo el formulario:

| Sección | Ajustes |
| --- | --- |
| **Form type** | **Type**. Para los flyouts, **Flyout side** (**Bottom right**, **Bottom left** o **Bottom**). Para los banners, **Banner position** (**Top** o **Bottom**). |
| **Size** | **Width (px)** y **Min height (px)**. Deja la altura en 0 para que sea automática. |
| **Overlay** | **Overlay color** y **Opacity** detrás de los pop-ups, los flyouts y los formularios de página completa. |
| **Form background** | **Fill**, **Border color**, **Border width**, **Border radius**, **Padding** y **Shadow**. |
| **Side image** | Una imagen a la izquierda (**Left**) o a la derecha (**Right**) del formulario, con **Image URL**, **Alt text** y **Size**. |
| **Background image** | Una imagen detrás del formulario, con **Image URL** y **Fit** (**Cover** o **Contain**). |
| **Fonts** | **Font family** (**Inter**, **Georgia**, **Mono** o **System**), **Heading color** y **Body color**. |
| **Input field styles** | Los colores de **Background**, **Border**, **Border radius**, **Text**, **Placeholder** y **Label**. |
| **Button styles** | **Fill**, **Text**, **Hover**, **Border radius** y **Style** (**Solid** u **Outline**). Cada botón puede sobrescribir estos valores. |
| **Close icon** | **Color**, **Size** y **Style** (**X** o **Circle X**) del botón de cerrar. No se muestra en los formularios integrados. |

## Vista previa

Usa **Desktop**, **Mobile** o **Both** encima del lienzo para comprobar el diseño en cada tamaño de pantalla, incluidos los bloques que has ocultado en un dispositivo. **Undo** y **Redo** recorren tus cambios recientes.

## Comprobar y publicar

**Alerts & checks**, en la parte inferior del panel lateral, enumera los problemas del formulario. Un número en rojo indica cuántos errores hay.

| Nivel | Comprobación |
| --- | --- |
| Error | «Add at least one form step before publishing.» |
| Error | «Add a success step before publishing.» |
| Aviso | Un paso de formulario no tiene bloques de contenido. |
| Aviso | Hay más de un campo de email. Usa un único campo de email siempre que puedas. |
| Aviso | Ningún paso de formulario tiene un botón de envío o de siguiente paso. |
| Aviso | Un botón **Go to URL** no tiene URL. |

Los errores impiden publicar. Los avisos no, pero corrígelos para que los visitantes puedan completar el formulario.

Cuando el formulario supere las comprobaciones, selecciona **Publish** en la cabecera del editor. Emailit guarda el formulario, lo publica y cierra el editor. También puedes publicarlo o despublicarlo desde la página del formulario. A continuación, [instala el script](/es/docs/forms/install/) en tu web si todavía no lo has hecho.

## Ver también

  - [Insertar formularios](/es/docs/forms/install/): Muestra tus formularios publicados en tu web.
  - [Formularios](/es/docs/forms/): Tipos de formulario, estados y respuestas.

---
Fuente: https://emailit.com/es/docs/forms/build/