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:

1. Acesse o Admin;
2. Clique no ícone ⚙ de Configurações no canto inferior esquerdo;
3. Na seção Mensagens e avisos clique em Forms;
4. Clique no ícone de mais + no canto superior direito;
5. 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;
6. Clique em SALVAR.
7. 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:

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>