Crea tu primer formulario

Este tutorial crea un formulario de contacto con un nombre, una dirección de correo electrónico, un mensaje, una confirmación explícita y opcional de la privacidad y un botón de envío. Después añade el formulario activo a una página con el maquetador de páginas de POM.

Antes de empezar

Confirma que un administrador ha habilitado Settings → POM Theme → Forms → General → Enable forms system.

Decide dónde deben enviarse los mensajes de contacto. Si dejas una ruta del formulario sin su propio destinatario, POM Forms puede usar los destinatarios administradores predeterminados de todo el sitio.

1. Crea el formulario

1. En WordPress, ve a Forms → Add New.
2. Introduce un título descriptivo, como «Contacto general».
3. Mantén el formulario sin publicar mientras lo construyes y lo pruebas.
4. Abre la pestaña Builder.

El constructor de formularios usa esta jerarquía:

Step
└── Row
    └── Column
        └── Field

2. Añade los campos

Añade estos campos en orden:

1. Text — etiquétalo como «Nombre» y márcalo como obligatorio.
2. Email — etiquétalo como «Dirección de correo electrónico» y márcalo como obligatorio.
3. Textarea — etiquétalo como «Mensaje» y márcalo como obligatorio.
4. Checkbox — úsalo para una confirmación de privacidad obligatoria solo cuando el flujo de trabajo requiera un consentimiento afirmativo.
5. Submit Button — establece una etiqueta clara, como «Enviar mensaje».

Cada campo tiene un nombre legible por máquina. Mantén los nombres cortos, descriptivos y estables, por ejemplo name, email y message. Las etiquetas de combinación de las notificaciones y las automatizaciones pueden depender de estos nombres.

3. Organiza el diseño

Para un primer formulario, usa una columna por fila. Es fácil de leer y funciona bien en móvil.

Para colocar dos campos cortos uno al lado del otro más adelante:

1. añade o selecciona una fila;
2. crea dos columnas;
3. establece anchos adaptables adecuados;
4. mueve un campo a cada columna;
5. confirma que se apilan en un orden lógico en móvil.

Consulta Campos, diseño y lógica condicional.

4. Configura la notificación al administrador

1. Abre Notifications.
2. Añade o edita una ruta de administrador.
3. Introduce la dirección del destinatario o, intencionadamente, usa la alternativa de todo el sitio.
4. Establece un asunto útil, como «Nuevo contacto de {{field:name}}».
5. Usa el selector de etiquetas de combinación del formulario para insertar los valores enviados.
6. Establece Reply-To en el campo Email enviado si las respuestas deben llegar al visitante.
7. Incluye los datos enviados del formulario.

No uses una dirección proporcionada por el visitante como dirección From. Usa una dirección autorizada para el sitio y coloca la dirección del visitante en Reply-To.

5. Configura los mensajes y la privacidad

Abre Messages/Behavior y revisa:

• el mensaje de éxito;
• los mensajes de campos obligatorios y de validación;
• la cláusula de privacidad;
• qué ocurre después de un envío correcto;
• la carga y la protección contra envíos duplicados.

Mantén el mensaje de éxito específico. Indica al visitante si el mensaje se ha recibido y qué esperar a continuación.

6. Decide si almacenar los envíos

Abre Storage/Advanced. Elige si este formulario debe heredar los valores predeterminados de almacenamiento y retención de todo el sitio o anularlos.

La entrega por correo electrónico y el almacenamiento de envíos sirven para propósitos distintos. Si un envío debe poder recuperarse en WordPress, habilita el almacenamiento y elige un periodo de retención apropiado. Consulta Notificaciones, envíos y retención.

7. Guarda, publica y prueba

1. Elige Save.
2. Habilita Publish para que el formulario pase a estar Active y disponible para el maquetador de páginas.
3. Crea una página temporal o abre la página que debe contener el formulario.
4. Envía una prueba realista sin haber iniciado sesión.
5. Confirma el mensaje de éxito, la entrega de la notificación y la entrada almacenada cuando el almacenamiento esté habilitado.

Añade el formulario a una página

1. Edita la página de destino con el maquetador visual de POM.
2. Añade el elemento POM Form.
3. Selecciona el formulario activo.
4. Guarda el elemento y actualiza la página.
5. Abre la página pública y envía otra prueba.

Para contenido con shortcode sin procesar, usa el ID del formulario:

[web_form id="123"]

Sustituye 123 por el ID real del formulario. En Gutenberg, inserta POM Form y usa Choose form en su barra de herramientas o Form → Active form en la barra lateral. El bloque muestra el mismo formulario compartido sin duplicar sus campos ni sus ajustes de entrega. Consulta Mostrar un formulario compartido en Gutenberg para conocer los controles de vista previa y la verificación.

Solución de problemas

Si el formulario no aparece en el maquetador de páginas, confirma que está Active. Si el correo no llega, verifica la ruta de notificación y la entrega de correo del sitio antes de cambiar el diseño de los campos. Consulta Solución de problemas de formularios.