Como adicionar um formulário de contato à sua loja Shopify

O atendimento ao cliente pode ser uma das peças mais desafiadoras do seu negócio, mas sem clientes satisfeitos, você não tem negócios. É por isso que é vital tornar a experiência do cliente uma de suas principais prioridades, e a maneira como seus clientes se comunicam com você faz parte dessa experiência.

Muitas empresas utilizam ferramentas de helpdesk como Intercom ou ZenDesk, mas isso pode ser mais do que você precisa agora.

Se o seu tema do Shopify ainda não tem um formulário de contato, ou você está usando uma ferramenta de terceiros, como Typeform, Google Forms ou Wufoo, ou deseja simplificar um pouco as coisas, você pode criar seu próprio formulário de contato simples diretamente no Shopify .

Para o propósito deste tutorial, presumirei que sua loja não tenha um formulário e, ao final deste tutorial, você terá algo que aceita informações do cliente e se parece com isto:

Antes de começar: faça uma cópia do seu tema

Faça login no painel do Shopify e vá para Loja Online > Temas . Encontre o seu tema ao vivo e clique no menu suspenso Ações e clique em Duplicar .

Depois de duplicar, clique no menu Ações novamente e clique em Editar código .

Vamos construir um formulário de contato!

Precisaremos de duas coisas para que nosso formulário de contato funcione: um novo arquivo de modelo para armazenar nosso código e uma nova página em nossa loja.

Criar um novo arquivo de modelo

Agora que você acessou o editor de código, olhe para o lado esquerdo da tela em sua árvore de pastas e clique e expanda Modelos . Em seguida, clique no link Adicionar um novo modelo .

Em seguida, escolha Página na primeira lista suspensa e chame-a de Contato . Em seguida, clique no botão Criar modelo .

Copie e cole nosso código

Aqui está todo o código de que precisamos para construir nosso formulário de contato.

Copie e cole o seguinte bloco de código em seu novo arquivo e clique no botão Salvar .

<div class = “page-width” >
<div class = “grid” >
<div class = “grid__item medium-up – five-sixths medium-up – push-one-duodécimo” >
<div class = “section-header text-center” >
<h1> {{page.title}} </h1>
</div>

{% se page.content.size> 0%}
<div class = “rte” >
{{ Conteúdo da página }}
</div>
{% fim se %}

<div class = “contact-form-vertical” >
{% - assign formId = 'ContactForm' -%}
{% form 'contato', id: formId%}
{% include 'form-status', form_id: formId%}

<div class = “grid grid – half-gutters” >
<div class = “grid__item medium-up – one-half” >
<rótulo para = “{{formId}} - nome” > {{'contact.form.name' | t}} </label>
<tipo de entrada = “texto” id = “{{formId}} - nome” nome = “contato [nome]” >
</div>
<div class = “grid__item medium-up – one-half” >
<rótulo para = “{{formId}} - email” > {{'contact.form.email' | t}} <span aria-hidden = “true” > * </span> </label>
<input required type = “email” id = “{{formId}} - email” name = “contact [email]” autocorrect = “off” autocapitalize = “off” aria-required = “true”
{% - se form.errors contém 'email' -%}
classe = “erro de entrada”
aria-invalid = “true”
aria-describeby = “{{formId}} - email-error”
{%- fim se -%}
>
{% - se form.errors contém 'email' -%}
<span id = “{{formId}} - email-error” class = “input-error-message” >
<span class = “visualmente oculto” > {{'general.accessibility.error' | t}} </span>
{% incluir 'ícone-erro'%}
<span> {{form.errors.translated_fields ['email'] | capitalize}} {{form.errors.messages ['email']}}. </span>
</span>
{%- fim se -%}
</div>
</div>

<label for = “{{formId}} - order” class = “hidden-label” > Número do pedido: </label>
<input type = “text” id = “{{formId}} - order” name = “contact [order]” placeholder = “# 1234” >

<rótulo para = “{{formId}} - telefone” > {{'contact.form.phone' | t}} </label>
<input type = “tel” id = “{{formId}} - phone” name = “contact [phone]” pattern = “[0-9 \ -] *” >

<rótulo para = “{{formId}} - mensagem” > {{'contact.form.message' | t}} <span aria-hidden = “true” > * </span> </label>
<textarea required rows = “10” id = “{{formId}} - message” name = “contact [body]” > {% if form.body%} {{form.body}} {% endif%} </ textarea>

<input type = “submit” class = “btn” value = “{{'contact.form.submit' | t}} ” >

{% endform%}
</div>
</div>
</div>
</div>

Fragmento de Validação

Nosso formulário tem uma validação leve que ajudará o usuário a saber se ele cometeu um erro ao preencher o formulário. Este código está em um arquivo de fragmento líquido separado denominado form-status.liquid .

Volte para dentro de seu editor de código de tema e clique e expanda Snippets . Em seguida, clique em Adicionar um novo trecho .

Nomeie-o como form-status e clique em Criar snippet .

Copie e cole o código encontrado aqui no novo snippet e clique em Salvar .

Criar uma nova página de contato

Em seguida, de volta ao administrador do Shopify, clique em Loja Online > Páginas .

Em seguida, clique no botão Adicionar página no canto superior direito da tela. Escolha um título e insira uma descrição (opcional). Em seguida, no lado inferior direito da tela, clique no menu suspenso em Sufixo do modelo e procure o novo modelo que acabamos de criar. Deve ser chamado de page.contact .

Agora, esta nova página usará o código que acabamos de colar em nosso novo arquivo de modelo. Portanto, se você fizer alterações lá, isso só se refletirá nas páginas que você selecionou para usar o modelo page.contact . Quando estiver satisfeito com o título e a descrição, clique em Salvar .

Agora, você pode visualizar a página clicando em Exibir página na parte superior.

Mas espere! O que significa todo esse código?

Vamos aprender um pouco mais sobre o código que usamos para que você possa fazer edições ou alterações por conta própria, se necessário. Se você gostaria de baixar ou marcar o código, criei um Gist aqui para que você possa copiar e colar facilmente.

O código pode parecer opressor, mas depois de olhar além de todas as instruções if, classes e outros atributos, é bastante básico.

Os principais elementos de que você precisa para que um formulário capture e envie dados adequadamente são os rótulos e campos de entrada necessários que aceitam os dados do formulário.

Dê uma olhada no código que captura o nome do cliente:

<rótulo para = “{{formId}} - nome” > {{'contact.form.name' | t}} </label>
<tipo de entrada = “texto” id = “{{formId}} - nome” nome = “contato [nome]” >

Requer um rótulo e um elemento de entrada . O rótulo tem um atributo for , que o associa (ou conecta) a um elemento de entrada correspondente que compartilha o mesmo id .

O texto entre colchetes é o que seus clientes verão na página de contato. Parece com {{'contact.form.name' | t}} porque está usando uma tag dinâmica que faz referência às configurações de idioma dentro do Admin do Shopify.

Esta área do administrador pode ser nova para você, mas é aqui que reside todo o texto editável dentro do Shopify. Algumas das outras coisas que você pode editar aqui são o título do Checkout ou o texto no botão “Pague agora”.

Para editar o rótulo “nome” do nosso formulário de contato, vá para Configurações > Idiomas da loja > Alterar idioma do tema .

Clique em Contato na navegação.

Agora você pode ver todos os campos que você tem acesso para usar dentro do nosso formulário de contato.

Enviando um e-mail de teste

Volte para o seu formulário de contato em yourwebsite.com/pages/contact-us e tente enviar o formulário. Se você for bem-sucedido, deverá ver algo assim na tela.

Então você deve receber um e-mail parecido com este:

Bônus

Agora você construiu com sucesso um formulário de contato nativo para sua loja, que ainda tem um campo extra para o número do pedido! Ao coletar isso antecipadamente, você economiza o incômodo e o tempo de ter que solicitá-lo mais tarde. Isso é especialmente valioso para qualquer loja com clientes recorrentes que tenham muitos pedidos e que possam estar se referindo a mais de um.

Conclusão

Espero que você tenha achado este tutorial valioso. Eu costumava usar uma daquelas ferramentas de terceiros de que falei no início para coletar essas informações e, embora sejam ótimas, não estão integradas à sua vitrine e custam dinheiro!