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. Add the contact form widget onto your responsive website. To learn more about adding widgets to your website, see Adding Widgets. Once the widget has been placed, the Content Editor will appear.

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. Click the Submission tab. In the Submission recipients section, set the email address and subject for receiving form responses. contactform2_en-US.png

5. In the Submission actions section, set the confirmation and error messages to display when visitors submit the form. Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the message boxes.

contactform3_en-US.png

6. In the Tracking section, add a tracking code to your form. If you have AdWords or any other conversion code, you can paste this code here.contactform4_en-US.png

Setting up your GDPR-Friendly Contact Form

To obtain consent from your visitors upon contact form submission, simply add a new field to your contact form following the instructions above and pick either the Opt-in or Free text option.

Add Opt-in field

Adding the Opt-in field will add a checkbox confirming your visitor’s consent to share form responses. This field will be required to submit the form response.

gdpr_friendly_contact_form1-en_us.png

The default text is “By checking, I agree to share my form responses” but you can replace this with custom text if you like.

Add free text field

You may choose to add a different notification using free text. In this case, the field will simply appear as a notification below the fields of your contact form.gdpr_friendly_contact_form2-en_us.png

Please note: There is no default GDPR or privacy-related placeholder text in the free text field, as this is a multi-purpose field, so you need to place your custom text.

Delete form responses

To delete responses received via a contact form, please go to the site dashboard, click the hamburger icon next to the site where the form appeared and select Form Responses.

gdpr_friendly_contact_form3-en_us.png

Alternatively, you can open the Manage Form Responses field in the Content tab of your left-side editor menu.

gdpr_friendly_contact_form4-en_us.png

The Form Responses page that opens allows you to remove any response to any form on that site. You can search for relevant responses in the Search visitor info search box. Make sure you search for the exact name, phrase or characters.

gdpr_friendly_contact_form5-en_us.png

Clicking on the relevant form tab opens a table which includes:

  • the date of the form response submission
  • the input from each of the form fields
  • the option to delete the form response

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

Click the Integrations tab in the contact form’s general settings area.
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

Open the Design Editor by clicking the design tab on the top left corner or by right-clicking the widget and selecting 'Edit Design' to change the button layout, items, frame and spacing. 

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

Click the Frame tab to make edits to the frame style. You can change the background by adding a color or image, change the text style of the submission notification, add a border and customize the font in the form title.

contactform32_en-US.png

Espaçamento 

Click the Spacing tab to make edits to the padding and margins of the contact form. Learn more about spacing here.

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