Adicionar um Formulário de Contato

Visão Geral

Use o widget Formulário de Contato para adicionar um formulário web completo para o seu site. O formulário de contato permite proporcionar aos visitantes uma variedade de áreas de entrada; especificamente texto, menu suspensos, botões de opção, caixas de seleção, data, hora, e-mail e número de telefone. Você pode usar o formulário para inscrição em boletins, perguntas de clientes ou simplesmente para obter feedback dos visitantes do seu site.

Guia

Configuração do Formulário de Contato 

1. Adicione o widget de formulário de contato a seu site responsivo. Para mais informações sobre como adicionar widgets a seu site, consulte Adicionar Widgets. Quando o widget for colocado, o Editor de Conteúdo será exibido.

2. Decida quais informações você deseja obter de seus visitantes e, em seguida, modifique os campos existentes clicando no nome do campo.

3. Adicione novos campos clicando no botão “Adicionar campo”.

contactform1_en-US.png

4. Clique na guia Envio. Na seção Destinatários do envio, defina o endereço de e-mail e o assunto para receber as respostas do formulário.contactform2_en-US.png

5. Na seção Ações de envio, defina as mensagens de confirmação e erro a serem exibidas quando os visitantes enviarem o formulário.contactform3_en-US.png

6. Na seção Acompanhamento, adicione o código de acompanhamento a seu formulário. Se você tiver o AdWords ou qualquer outro código de conversão, pode colá-lo aqui.contactform4_en-US.png

Integrações

Você pode aumentar o alcance de seu formulário de contato, integrando-o com as planilhas do Google, Mailchimp, Constant Contact ou um aplicativo de terceiros usando Webhooks.

Integração com o Google Sheets (Planilhas)

Os dados de envio de formulário de contato podem ser adicionados instantaneamente a uma planilha noGoogle Sheets. Todos os campos de contato no formulário serão preenchidos na planilha, incluindo um horário de quando o formulário foi enviado.

Passos

Clique na guia Integração na área de configurações gerais do formulário de contato.
contactform5_en-US.png

Expanda a opção Google Sheets e clique em ENTRAR COM GOOGLE.

contactform6_en-US.png

Clique em Permitir para conceder permissões de conexão a sua conta do Google. Se o seu computador estiver conectado a várias contas do Google, escolha a que pretende vincular com esse formulário.

contactform7_en-US.png

Escolha se você deseja adicionar dados a uma planilha existente ou a uma nova planilha.

contactform8_en-US.png

Selecione a planilha para a qual deseja enviar os dados do formulário. Você pode selecionar a planilha de uma lista ou usar a barra de pesquisa para encontrar uma planilha específica.

contactform9_en-US.png

Considerações Adicionais

  • Se você tiver vários formulários no site, poderá conectar cada um deles a uma planilha diferente, incluindo planilhas em diferentes contas do Google.
  • Você também pode conectar alguns formulários a uma mesma planilha, neste caso, certifique-se de que os campos e ordem no formulário sejam idênticos para caber a informação enviada.
  • Enviar dados de formulário a uma planilha do Google não impede que você baixe os dados como um arquivo CSV ou que receba e-mails de envio de formulário.

Integração com MailChimp

MailChimp é uma ótima ferramenta para distribuição de campanhas de e-mail, newsletters entre outras. Ao usar a integração de novos formulários, os proprietários de sites podem gerenciar listas de contatos de clientes em potencial (visitantes do site) coletando os endereços de e-mail, que são enviados ao formulário e enviados automaticamente para o MailChimp.

Você deve ter uma conta MailChimp. Depois de ter uma conta, crie uma lista de mailing em sua conta MailChimp onde os detalhes do contato serão coletados.

Passos

Clique na guia Integração na área de configurações gerais do formulário de contato.

contactform10_en-US.png

Expanda a opção MailChimp e escolha CONECTAR-SE AO MAILCHIMP.

contactform11_en-US.png

Faça login com suas credenciais do MailChimp.

contactform12_en-US.png

Selecione sua lista de contatos do MailChimp no menu suspenso.

contactform13_en-US.png

Configure seus campos de formulário. Além do endereço de e-mail, o Criador de Sites pode enviar automaticamente os campos de nome e sobrenome para o MailChimp. Você deve configurar os campos de e-mail/ nome/ sobrenome dentro do formulário.

contactform14_en-US.png

Integração com o Constant Contact

Esta é uma integração semelhante ao MailChimp, mas permite que os proprietários do site criem listas de discussão em sua conta Constant Contact.

Você deve ter uma conta Constant Contact. Quando tiver uma conta, crie uma lista de endereços na sua conta Constant Contact para onde os dados de contato serão coletados.

Passos

Clique na guia Integração na área de configurações gerais do formulário de contato.

contactform15_en-US.png

Expanda a opção Constant Contact e escolha CONECTAR-SE AO CONSTANT CONTACT.

contactform16_en-US.png

Faça login com suas credenciais do Constant Contact.

contactform17_en-US.png

Selecione sua lista do Constant Contact no menu suspenso.

contactform18_en-US.png

Configure seus campos de formulário. Além do endereço de e-mail, o Criador de Sites pode enviar automaticamente o nome, sobrenome e número de telefone para o Constant Contact. O usuário deve configurar os campos de e-mail/ nome/ sobrenome no formulário de contato. O endereço de e-mail e a mensagem de texto são adicionados por padrão.

contactform19_en-US.png

Integração com Webhooks

Vários serviços on-line e de nuvem oferecem integrações por um caminho chamados WebhooksWebhooks envia notificações a endereços web chamados URL de endpoint. Você pode conectar o formulário de contato para enviar um evento quando o formulário de contato for enviado.

Para conectar o formulário de contato a outro serviço webhooks, usando webhooks, você precisa criar um URL de endpoint personalizado com o serviço desejado e colá-lo no campo de integração do Webhooks no formulário de contato. Depois de adicionar um URL de webhook URL, o formulário de contato  enviará uma solicitação POST para o endpoint com os dados no corpo no formato JSON, quando o formulário de contato for enviado ao site. Um exemplo de dados JSON que serão enviados:

{"Data de Envio":"06/02/2016 10:23:54","Título do Formulário":"Contate-nos","Nome":"João da Silva","E-mail":"teste@exemplo.com","Fone":"(555).555.1212","Mensagem":"Webhook Envio de Formulário!"}

Observação: “Data de envio” e “Título do Formulário” serão sempre fornecidos, os outros campos (field_name : valor) estão baseados nos campos que forem configurados no formulário.

Criação de URL de Endpoint

Os endpoints são configurados nos serviços de Terceiros (por exemplo, Zapier ou Slack) ou outro provedor que você controle. Esses endpoints são especificamente configurados para receber notificações do Webhook.

contactform20_en-US.png

Ideias de Integração

Zapier - Conecte dados de formulário de contato para Zapier para possibilidades ilimitadas. Conecte-se virtualmente com qualquer serviço na nuvem incluindo CRMs como Salesforce, Sugar CRM, Zoho entre outros.

Slack - Mensagens APP robustas, conecte-se para receber notificações assim que os dados do formulário for enviado.

Custom Integration - Crie seus próprios Webhooks personalizados para integração com o formulário de contato. Por exemplo, salve envios em um banco de dados ou conecte-se com aplicativos personalizados ou serviços de terceiros.

Exemplo de configuração de Webhooks / URL de Endpoint em Slack

No aplicativo Slack, abra o menu suspenso da conta principal e, em seguida, clique em Aplicativos e Integrações.

contactform21_en-US.png

O site do Slack será exibido. No canto superior direito, clique no botão Build.

contactform22_en-US.png

Clique em Make a Custom Integration (fazer uma integração personalizada).

contactform23_en-US.png

Selecione Incoming Webhooks (webhooks recebidos).

contactform24_en-US.png

Selecione um canal ou crie um novo canal onde suas mensagens serão postadas.

contactform25_en-US.png

Copie o URL do Webhooks.

contactform26_en-US.png

Defina as configurações e opções de seu link e, em seguida, clique em Salvar Configurações.

contactform27_en-US.png

Então volte e cole o o URL de Webhooks no campo Webhooks. Clique em Concluir para completar a configuração.

contactform28_en-US.png

Visualize seu site e envie o formulário de contato para testar a integração.

contactform28.5_en-US.png

Se você conseguir ver a mensagem no canal selecionado, parabéns, está tudo pronto! Agora você receberá uma mensagem no Slack toda vez que seu formulário for enviado.

contactform29_en-US.png

 

Design

Abra o Editor de Design clicando na guia Design no canto superior esquerdo, ou clicando com o botão direito no widget e selecionando ‘Editar Design’ para mudar o layout dos botões, itens, quadro e espaçamento. 

Layout

Clique na guia Layout, clique no ícone de Layout para escolher um projeto de layout diferente para o formulário de contato. Altere o alinhamento do formulário clicando à esquerda ou à direita, dependendo de como você deseja alinhar os espaços de campo.

contactform30_en-US.png

Item

Clique na guia Item para fazer edições de estilo de campo e texto de campo, bem como o estilo de botão e texto do botão. Você pode fazer alterações no design dos campos e botão, como cor de plano de fundo e estilos de borda, e fazer alterações no texto do campo e texto do botão, bem como tamanho, fonte, alinhamento, e muito mais. Reverta para o estilo geral, clicando no botão “Reverter para design geral”.

contactform31_en-US.png

Frame

Clique na guia Frame para fazer edições no estilo do frame. Você pode mudar o plano de fundo, adicionando uma cor, imagem ou borda e personalizar o tipo de letra no título do formulário.

contactform32_en-US.png

Espaçamento 

Clique na guia Espaçamento para fazer edições para o preenchimento e margens do formulário de contato. Obtenha mais informações sobre espaçamento, aqui.

contactform33_en-US.png

Anexar Arquivos

Arquivos podem ser anexados ao formulário de contato. Isso pode ser feito pela criação de um campo para anexar arquivo ao formulário de contato. Um link será fornecido aos visitantes para carregarem seus arquivos por meio do formulário de contato.

Para adicionar esta opção a seu formulário:

  1. Adicione um novo campo em qualquer formulário de contato.
  2. Selecione o anexo de arquivo a partir do menu suspenso. Você pode editar o texto do espaço reservado para alterar o nome deste campo.
  3. Um link para carregar arquivos será adicionado a seu formulário.

Considerações

Formulários de contato são uma ótima ferramenta para obter informações valiosas de visitantes e clientes. Certifique-se de inserir seu endereço de e-mail no passo de configurações de Envio para reter uma cópia das informações enviadas.

Recursos

  • Para mais informações sobre como editar widgets, consulte Edição de Widgets.
  • Para mais informações sobre como editar o design e estilo de widgets, consulte Design do Widget.