Built on WIX Headless

Widget Form

Recoge envíos de visitantes en una colección CMS con el elemento Form de CMS for Harmony — incluidos contactos, miembros, Automations y pay-on-submit Pro vía Wix Checkout.

El widget Form es un solo elemento: conecta una colección, elige campos y etiquetas, y deja que los visitantes envíen — incluidas subidas de imagen, vídeo y Media Gallery. Puedes dividir formularios largos en pasos, mostrar campos solo cuando se cumple una condición, crear un contacto Wix, registrar un miembro del sitio y activar Wix Automations. En Pro, también puedes cobrar al enviar vía Wix Checkout.

Qué puedes hacer

  • AI setup — describe campos y textos de envío en lenguaje natural; consulta AI setup
  • Texto, Number, URL, desplegables, teléfono (E.164 con código de país), Color (selector nativo de color; guarda HEX), selectores Date / Date & time / Time, imágenes, subida de Video y multi-subida a Media Gallery
  • Radio buttons y Checkbox (multi-selección) en campos de texto, con opciones personalizadas
  • Multi-step form — divide el formulario en páginas con Next / Back y progreso; Preview step en el editor
  • Show only when — oculta un campo hasta que otro esté vacío, no vacío o coincida con valores seleccionados
  • Autosave — guarda mientras se escribe; los miembros reanudan un borrador en la colección y el resto guarda un borrador en este navegador hasta enviar
  • Etiquetas de envío en un solo panel (sustituye los widgets separados Text Input / Dropdown / Submit Button / Form Dataset de versiones tempranas)
  • Update displays on this page — tras un envío correcto, los widgets Table, Repeater, Slideshow, Media Gallery, Calendar y Dynamic Page de la misma página que usan la misma colección se recargan automáticamente
  • Contacts — Create contact: crea o actualiza un contacto Wix desde campos mapeados del formulario
  • Members — Create member: registra un miembro del sitio con login email y contraseña
  • Wix Automations — disparador Form submitted tras cada envío correcto
  • Payments (Pro) — pay-on-submit: guarda el envío, abre Wix Checkout y luego escribe los datos del pedido de vuelta en el envío

Configuración

Usa AI setup en el panel para un inicio en lenguaje natural y luego afina en Manual. Detalles: AI setup.

  1. Añade Form desde Add → Elements → Installed Apps → CMS for Harmony (puedes añadirlo más de una vez).
  2. Conecta una colección que deba recibir los envíos.
  3. Elige los campos y etiquetas que rellenarán los visitantes (los campos Number y URL obtienen tipos de entrada que coinciden).
  4. Opcionalmente activa Multi-step form en Steps y asigna campos en Field setup; configura Show only when por campo.
  5. Opcionalmente activa Update displays on this page, Create contact, Create member y/o Enable payments (Pro) — ver más abajo.
  6. Publica y prueba un envío en el sitio en vivo (o en vista previa). El checkout de pago se ejecuta en el sitio en vivo.

Los envíos llegan a tu colección para que puedas mostrarlos después con Table o Repeater si quieres. Con Update displays on this page, una lista en la misma página se actualiza en cuanto el envío se completa.

Steps

  1. Activa Multi-step form en la sección Steps.
  2. Añade pasos y define cada Step title.
  3. En Field setup, asigna cada campo a un Step.
  4. Usa Preview step en el editor para ver una página a la vez en el canvas.
  5. En el formulario en vivo, los visitantes usan Next / Back; el envío se ejecuta en el último paso.

Field setup

Para cada campo, configura Label, Placeholder, Required e Input type. Los campos de texto admiten Radio buttons y Checkbox (multi) con Options personalizadas. Con multi-step activo, asigna el Step. Show only when oculta el campo hasta que otro campo esté vacío, no vacío o Equals any of valores seleccionados — Required solo aplica mientras el campo se muestra.

Update displays on this page

En el panel de Form, activa Update displays on this page. Tras un envío correcto, los widgets Table, Repeater, Slideshow, Media Gallery, Calendar y Dynamic Page de la misma página que usan la misma colección se recargan automáticamente — así los visitantes ven el ítem nuevo o actualizado sin refrescar el navegador.

Autosave

En Submit, activa Autosave para guardar mientras el visitante escribe. Editable form y Autosave no pueden estar activos a la vez.

  1. Activa Autosave.
  2. Elige un Submitted field (boolean). Usa Add submitted field para crear uno llamado Submitted si la colección no lo tiene. Ese campo no aparece en el formulario.
  3. Los miembros necesitan Read y Update sobre sus propios ítems (el panel ofrece Fix si faltan esos permisos).

Los miembros guardan un borrador en la colección con el submitted field en false. Al volver a abrir el formulario, se reanuda ese borrador. Submit actualiza el mismo ítem y pone el campo en true. Filtra las listas por ese campo si quieres ocultar borradores sin terminar.

Los visitantes que no han iniciado sesión guardan el borrador en este navegador hasta que envían. El envío crea un ítem nuevo en la colección y borra el borrador del navegador.

El formulario muestra Saving…, Saved o Couldn’t save. Keep editing — we’ll try again. Las contraseñas no se guardan en el borrador.

Contacts

Usa la sección Contacts del panel de Form para crear o actualizar un contacto Wix cuando alguien envía.

  1. Activa Create contact.
  2. Mapea Email (obligatorio) y cualquier espacio opcional: Phone, First name, Last name, Full name, Company, Job title.
  3. Prefiere campos de colección cuando también quieras guardar los valores en CMS. Usa Add field (contact) para campos solo del formulario que no se guardan en la colección — el panel muestra una nota breve y Add to collection si cambias de idea.
  4. Para borrar un mapeo opcional, usa la X junto al desplegable. Borrar un mapeo de Add field (contact) también quita ese campo solo del formulario. Email sigue siendo obligatorio mientras Contacts esté activo, así que no tiene control de borrado.
  5. Publica y envía una entrada de prueba; confirma que el contacto aparece en los Contacts de tu sitio.

Cuando Create member está activo, Contacts permanece habilitado para que login email y los campos de perfil sigan mapeados.

Members

Usa la sección Members para que los visitantes creen una cuenta de miembro del sitio al enviar.

  1. Activa Create member (también habilita Contacts).
  2. Configura Login email (obligatorio) — mapea un campo de email de la colección o Add field (member).
  3. Mapea cualquier otro espacio de contacto que quieras en el miembro/contacto (el mismo mapeo de Contacts).
  4. En el formulario en vivo, los visitantes ven Password y Confirm password (etiquetas/placeholders editables en Field setup). Las contraseñas nunca se escriben en la colección.
  5. Publica y prueba el registro en el sitio en vivo.

Wix Automations

Cada envío correcto del Form reporta un evento Form submitted a Wix Automations (best-effort; no bloquea el guardado del envío).

En Automations, elige el disparador Form submitted de CMS for Harmony. El payload incluye submission id, collection id, submitted time, payment-pending flag, una cadena JSON de valores de campo y — cuando Contacts está mapeado — email, name, phone y contact id cuando esté disponible.

Úsalo para notificaciones por email, traspasos a CRM o cualquier acción de Automations que ya uses en el sitio.

Form payments (Pro)

Los pagos del Form son independientes de los pagos de catálogo (Add to cart / Buy now en visualizaciones). Aquí el visitante paga un importe fijo o introducido al enviar el formulario.

  1. Conecta una colección y abre la sección Payments en el panel de Form.
  2. Activa Enable payments (instala Wix Stores si hace falta).
  3. Configura Item name (línea de ítem en el checkout).
  4. Elige Price: Fixed amount o Visitor enters amount (añade un campo Amount obligatorio en el formulario en vivo).
  5. Configura la Label del botón de pago.
  6. En Save to submission, usa Add fields (o mapea manualmente) para Order ID, Total paid y Payment status — se rellenan tras el checkout cuando el pago se completa.
  7. Publica y prueba en el sitio en vivo.

Sin Pro, el interruptor de pagos permanece desactivado y el panel muestra un aviso de actualización.