Formulários

Formulários são recursos utilizados para cadastro de contato de clientes, seja para envio de newsletters, promoções ou outros tipos de informações. Para utilizar o recurso, você deve cadastrar um formulário no Admin e então incluí-lo no front-end na vitrine da loja. Confira a seguir os passos para utilizar o recurso.

🚧 Pré-requisito

Certifique-se que a loja está com o e-mail verificado antes de prosseguir com esse tutorial.

Cadastro no Admin

O cadastro no Admin é a etapa de incluir um e-mail responsável pelo recebimento dos contatos recebidos pelo formulário, e então obter uma chave de identificação (key) para esse

Para cadastrar:

Acesse o Admin;
Clique no ícone ⚙ de Configurações no canto inferior esquerdo;
Na seção Mensagens e avisos clique em Forms;
Clique no ícone de mais + no canto superior direito;
Preencha os campos:
- Destinatário: endereço email que receberá as respostas do formulário. Você pode incluir mais de um email, separando-os com vírgula;
- Assunto: nome ou identificação do formulário;
Clique em SALVAR.
Anote a chave de identificação (key) do formulário. Ela será utilizada para inclusão na vitrine.

O formulário foi criado e o próximo passo é adicioná-lo na vitrine.

Inclusão na vitrine

Para adicionar um formulário na vitrine, você deve:

Adicionar o código de estrutura padrão;
Dinamizar o formulário no front-end.

Confira a seguir como realizar esses dois passos.

Código de estrutura padrão:

Para habilitar o envio de um webform_no _template você precisa incluir o código $('[data-webform]').on('submit', function (event). Veja o exemplo a seguir:

$('[data-webform]').on('submit', function (event) {
      const form = $('[data-webform=newsletter]');

      event.preventDefault();

      const honeyPot = $(this).find('[name="vnda"]');

      if (honeyPot.length > 0) {
        if (honeyPot.val() != '') {
          console.info('ROBOT DETECTED');
          return false;
        }
      }

Nesse exemplo, o código permite o envio de formulários no BasicTemplate para newsletter.

Se você utiliza esse BasicTemplate, saiba que os formulários de newsletter e contato já possuem a estrutura padrão por default. Lembre-se de adicionar essa estrutura quando criar novos formulários.

Para adicionar:

O <form> não deve ter action;
O <form> não deve ter method;
O <form> deve ter data-webform="assuntoDoForm". Substitua o assuntoDoForm pelo nome do seu formulário. No caso de um formulário de newsletter, utilize data-webform="newsletter";
O <button> deve ser do type="submit".

Dinamização no front-end

Com a garantia que seu _template _possui a estrutura padrão formulário, você pode dinamizá-lo no front-end da loja. Para isso, você precisa dos seguintes campos:

Campos	Preenchimento
`<input type="hidden" name="key" value="{{ current_shop.subdomain }}-newsletter">`	• `type="hidden"` • `name="key"` • `value=`: preencha com a chave criada no Admin (`key`)
`<input type="hidden" name="reply_to" id="reply_to" value="">`	• `type="hidden"` • `name="reply_to"` • `id="reply_to"` • `value=""` (deve estar vazio)
`<input name="vnda" style="display: none" type="text">`	• `input name="vnda"` • `style="display: none"` • `type="text"`

Veja a seguir os exemplo da dinamização no front-end:

Formulário de newsletter no BasicTemplate:

<form method="post" data-webform="newsletter">
        <input type="hidden" name="key" value="{{ current_shop.subdomain }}-newsletter">
        <input type="hidden" name="reply_to" id="reply_to" value="">
        <input type="hidden" name="vnda" type="text">

        <input required type="email" placeholder="Digite seu e-mail..." name="email-newsletter">

        <button type="submit" class="btn-submit">
          ENVIAR
        </button>

        <div class="msg-return" data-msg-return="">
          <div class="msg-error" data-msg-error="">
            <p>Problema ao enviar, tente novamente.</p>
          </div>
        </div>
      </form>