Formulários

Use este contrato em qualquer componente que ofereça newsletter, contato, trabalhe conosco ou outro formulário exibido na loja.

Cadastro administrativo

Antes de publicar, cadastre o formulário no Painel Administrativo em Mensagens e avisos → Forms:

1. Acesse Forms e crie o formulário.
2. Informe o destinatário ou destinatários. Para mais de um, separe os e-mails por vírgula.
3. Defina o assunto, como newsletter, contato ou trabalhe-conosco.
4. Salve antes de testar ou publicar o componente.

O assunto deve coincidir com o sufixo do campo key no Liquid:

<input type="hidden" name="key" value="{{ current_shop.subdomain }}-newsletter">

Para o assunto contato, use {{ current_shop.subdomain }}-contato.

Uso	Assunto cadastrado	key no Liquid
Newsletter	newsletter	{{ current_shop.subdomain }}-newsletter
Contato	contato	{{ current_shop.subdomain }}-contato
Trabalhe conosco	trabalhe-conosco	{{ current_shop.subdomain }}-trabalhe-conosco

Markup obrigatório

Elemento	Regra
<form data-webform="…">	Identifica o formulário.
<fieldset>	Agrupa os campos.
input[name="vnda"]	Honeypot anti-spam.
input[name="key"]	Chave com subdomínio e assunto cadastrado.
input[name="reply_to"]	Campo oculto para retorno.
input[name="email"]	E-mail do remetente.
<button type="button" class="action">	Botão de envio.
.messages[data-msg-retorno]	Área de mensagens.
[data-msg], [data-msg-success], [data-msg-error]	Mensagens de retorno.

Campos extras como name, phone e message podem ser enviados se tiverem atributo name único.

Modelo

<form class="webform" data-webform="newsletter" id="newsletter-form">
  <fieldset form="newsletter-form">
    <input type="hidden" name="key" value="{{ current_shop.subdomain }}-newsletter">
    <input id="reply_to" name="reply_to" type="hidden" value="">
    <input autocomplete="off" name="vnda" required tabindex="-1" type="text">

    <label for="newsletter-email">
      <span>E-mail</span>
      <input id="newsletter-email" name="email" required type="email">
    </label>

    <button class="action" type="button">Cadastrar</button>
  </fieldset>

  <div class="messages" data-msg-retorno>
    <p data-msg></p>
    <p data-msg-success>Obrigado! Enviado com sucesso.</p>
    <p data-msg-error>Problema ao enviar. Tente novamente.</p>
  </div>
</form>

O cadastro administrativo é pré-requisito para o formulário funcionar; não é apenas uma etapa de publicação. Use requires_external_content com type: "manual" e informe os passos no schema:

"requires_external_content": {
  "type": "manual",
  "instructions": {
    "title": "Cadastro do formulário de newsletter",
    "steps": [
      "1. Acesse [**Mensagens e avisos → Forms**]({{ADMIN_URL}}/config/mensagens-e-avisos/forms)",
      "2. Crie o formulário e informe o destinatário",
      "3. Em **Assunto**, use `newsletter` para corresponder à key `{{ current_shop.subdomain }}-newsletter`",
      "4. Salve o cadastro"
    ]
  }
}

Use sempre {{ADMIN_URL}} nos links administrativos. Não substitua esse markup por uma lógica própria de envio.

Erros frequentes

Situação	Correção
O envio não chega ao destinatário	Confira se o formulário foi cadastrado e salvo antes do teste.
Assunto e key são diferentes	Faça o sufixo de key corresponder exatamente ao assunto cadastrado.
Não há retorno visual	Inclua .messages[data-msg-retorno], [data-msg], [data-msg-success] e [data-msg-error].
O botão não envia	Use type="button" e a classe action.

Veja também Schema e Troubleshooting.