Built on WIX Headless

Widget Form

Colete envios de visitantes em uma coleção CMS com o elemento Form do CMS for Harmony — incluindo contatos, membros, Automations e pay-on-submit Pro via Wix Checkout.

O widget Form é um único elemento: conecte uma coleção, escolha campos e rótulos, e deixe os visitantes enviarem — incluindo uploads de imagem, vídeo e Media Gallery. Você pode dividir formulários longos em etapas, mostrar campos só quando uma condição for atendida, criar um contato Wix, registrar um membro do site e acionar Wix Automations. No Pro, você também pode cobrar no envio via Wix Checkout.

O que você pode fazer

  • AI setup — descreva campos e textos de envio em linguagem simples; veja AI setup
  • Texto, Number, URL, dropdowns, telefone (E.164 com código de discagem do país), Color (seletor nativo de cor; salva HEX), seletores Date / Date & time / Time, imagens, upload de Video e multi-upload de Media Gallery
  • Radio buttons e Checkbox (multi-seleção) em campos de texto, com opções personalizadas
  • Multi-step form — divida o formulário em páginas com Next / Back e progresso; Preview step no editor
  • Show only when — oculte um campo até que outro esteja vazio, não vazio ou coincida com valores selecionados
  • Autosave — salva enquanto a pessoa digita; membros retomam um rascunho na coleção e os demais guardam um rascunho neste navegador até enviar
  • Rótulos de envio em um único painel (substitui widgets separados Text Input / Dropdown / Submit Button / Form Dataset das versões iniciais)
  • Update displays on this page — após um envio bem-sucedido, os widgets Table, Repeater, Slideshow, Media Gallery, Calendar e Dynamic Page na mesma página que usam a mesma coleção recarregam automaticamente
  • Contacts — Create contact: cria ou atualiza um contato Wix a partir de campos mapeados do formulário
  • Members — Create member: registra um membro do site com login email e senha
  • Wix Automations — gatilho Form submitted após cada envio bem-sucedido
  • Payments (Pro) — pay-on-submit: salva o envio, abre o Wix Checkout e depois grava os detalhes do pedido de volta no envio

Configuração

Use AI setup no painel para um começo em linguagem simples e depois refine no Manual. Detalhes: AI setup.

  1. Adicione Form em Add → Elements → Installed Apps → CMS for Harmony (você pode adicioná-lo mais de uma vez).
  2. Conecte uma coleção que deve receber os envios.
  3. Escolha os campos e rótulos que os visitantes preencherão (campos Number e URL recebem tipos de entrada correspondentes).
  4. Opcionalmente ative Multi-step form em Steps e atribua campos no Field setup; configure Show only when por campo.
  5. Opcionalmente ative Update displays on this page, Create contact, Create member e/ou Enable payments (Pro) — veja abaixo.
  6. Publique e teste um envio no site ao vivo (ou na prévia). O checkout de pagamento roda no site ao vivo.

Os envios chegam à sua coleção para que você possa exibi-los depois com Table ou Repeater, se quiser. Com Update displays on this page, uma lista na mesma página é atualizada assim que o envio é concluído.

Steps

  1. Ative Multi-step form na seção Steps.
  2. Adicione etapas e defina cada Step title.
  3. Em Field setup, atribua cada campo a um Step.
  4. Use Preview step no editor para ver uma página por vez no canvas.
  5. No formulário ao vivo, visitantes usam Next / Back; o envio roda na última etapa.

Field setup

Para cada campo, configure Label, Placeholder, Required e Input type. Campos de texto admitem Radio buttons e Checkbox (multi) com Options personalizadas. Com multi-step ativo, atribua o Step. Show only when oculta o campo até que outro esteja vazio, não vazio ou Equals any of valores selecionados — Required só vale enquanto o campo está visível.

Update displays on this page

No painel do Form, ative Update displays on this page. Após um envio bem-sucedido, os widgets Table, Repeater, Slideshow, Media Gallery, Calendar e Dynamic Page na mesma página que usam a mesma coleção recarregam automaticamente — assim os visitantes veem o item novo ou atualizado sem atualizar o navegador.

Autosave

Em Submit, ative Autosave para salvar enquanto o visitante digita. Editable form e Autosave não podem ficar ativos ao mesmo tempo.

  1. Ative Autosave.
  2. Escolha um Submitted field (boolean). Use Add submitted field para criar um chamado Submitted se a coleção ainda não tiver. Esse campo não aparece no formulário.
  3. Membros precisam de Read e Update nos próprios itens (o painel oferece Fix quando essas permissões faltam).

Membros salvam um rascunho na coleção com o submitted field em false. Abrir o formulário de novo retoma esse rascunho. Submit atualiza o mesmo item e define o campo como true. Filtre listas por esse campo quando quiser ocultar rascunhos incompletos.

Visitantes que não estão logados guardam o rascunho neste navegador até enviar. O envio grava um item novo na coleção e limpa o rascunho do navegador.

O formulário mostra Saving…, Saved ou Couldn’t save. Keep editing — we’ll try again. Senhas não são armazenadas no rascunho.

Contacts

Use a seção Contacts no painel do Form para criar ou atualizar um contato Wix quando alguém envia.

  1. Ative Create contact.
  2. Mapeie Email (obrigatório) e quaisquer slots opcionais: Phone, First name, Last name, Full name, Company, Job title.
  3. Prefira campos da coleção quando também quiser salvar os valores no CMS. Use Add field (contact) para campos só do formulário que não vão para a coleção — o painel mostra uma nota curta e Add to collection se mudar de ideia.
  4. Para limpar um mapeamento opcional, use o X ao lado do dropdown. Limpar um mapeamento de Add field (contact) também remove esse campo só do formulário. Email continua obrigatório enquanto Contacts estiver ativo, então não tem controle de limpeza.
  5. Publique e envie uma entrada de teste; confirme que o contato aparece nos Contacts do seu site.

Quando Create member está ativo, Contacts permanece habilitado para login email e campos de perfil continuarem mapeados.

Members

Use a seção Members para visitantes criarem uma conta de membro do site no envio.

  1. Ative Create member (também habilita Contacts).
  2. Defina Login email (obrigatório) — mapeie um campo de e-mail da coleção ou Add field (member).
  3. Mapeie quaisquer outros slots de contato que quiser no membro/contato (mesmo mapeamento de Contacts).
  4. No formulário ao vivo, visitantes veem Password e Confirm password (rótulos/placeholders editáveis em Field setup). Senhas nunca são gravadas na coleção.
  5. Publique e teste o cadastro no site ao vivo.

Wix Automations

Cada envio bem-sucedido do Form reporta um evento Form submitted ao Wix Automations (best-effort; não bloqueia salvar o envio).

Em Automations, escolha o gatilho Form submitted do CMS for Harmony. O payload inclui submission id, collection id, submitted time, payment-pending flag, uma string JSON dos valores dos campos e — quando Contacts está mapeado — email, name, phone e contact id quando disponível.

Use para notificações por e-mail, repasse a CRM ou qualquer ação de Automations que você já usa no site.

Form payments (Pro)

Os pagamentos do Form são separados dos pagamentos de catálogo (Add to cart / Buy now nas exibições). Aqui o visitante paga um valor fixo ou informado ao enviar o formulário.

  1. Conecte uma coleção e abra a seção Payments no painel do Form.
  2. Ative Enable payments (instala o Wix Stores se necessário).
  3. Defina Item name (item de linha no checkout).
  4. Escolha Price: Fixed amount ou Visitor enters amount (adiciona um campo Amount obrigatório no formulário ao vivo).
  5. Defina a Label do botão de pagamento.
  6. Em Save to submission, use Add fields (ou mapeie manualmente) para Order ID, Total paid e Payment status — preenchidos após o checkout quando o pagamento for bem-sucedido.
  7. Publique e teste no site ao vivo.

Sem Pro, o interruptor de pagamentos fica desligado e o painel mostra um aviso de upgrade.