Formulários

Como utilizar formulários nas páginas da vitrine.

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:

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:

CamposPreenchimento
<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="";
Note que o campo 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:

<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>