CataBits

Uma das ferramentas mais comuns e mais importantes em qualquer site tradicional é um formulário de contatos. Este recurso não é apenas uma ferramenta de comunicação, mas também uma porta de entrada para estabelecer conexões valiosas com seu público-alvo. Um formulário de contatos bem projetado permite que visitantes do site entrem em contato de maneira conveniente, fornecendo um canal direto para perguntas, comentários ou solicitações de informações. Além disso, facilita a coleta de dados essenciais sobre seus usuários, auxiliando na compreensão de suas necessidades e interesses.

Ao integrar um formulário de contatos em seu site, você não só demonstra profissionalismo, mas também demonstra compromisso em oferecer um serviço de qualidade e em manter uma comunicação aberta e acessível.

Neste artigo, conhecemos o Google Sites, um serviço de criação e hospedagem de sites estáticos oferecido pelo Google onde você pode criar um pequeno site temático e publicá-lo na Internet em algumas horas, de forma gratuita e sem a necessidade de programação. Neste tutorial, vamos criar um Google Form e integrá-lo ao nosso site criado no Google Site, com algumas configurações práticas adicionais.

Criando o formulário de contatos

Estamos supondo que você já tem um site publicado na Internet pelo Google Sites, se ainda não tem, neste artigo, lhe damos os passos iniciais para criar um site sem a necessidade de programar.

• Acesse seu Google Drive, o mesmo onde o site foi criado;
• No canto superior esquerdo, clique no botão [+ Novo];
• Clique na opção "Nova pasta";
• Nomeie a nova pasta como Formulário de contatos e clique em "Criar";
  • É importante criar esta pasta porque ela receberá outros documentos relacionados ao formulário.
• Acesse a pasta que você acabou de criar com dois cliques nela;
• Novamente, no canto superior esquerdo, clique no botão [+ Novo];
• Agora, selecione e clique em "Formulários do Google";
• Vai abrir uma nova guia do navegador, com um formulário totalmente em branco…

Adicionando campos e outros recursos

Na página do formulário em branco:

• Clique em "Formulário sem título" no topo da página e nomeie o formulário como quiser, mas, de forma que seja fácil de identificar a que site pertence;
  • Por exemplo: Formulário de Contatos de MeuPortfolio
• Logo abaixo, altere o título do formulário para Faça Contato. Basta clicar nele;
• Na "Descrição do formulário", insira um texto educado e convidativo;
  • *Por exemplo: Preencha os campos abaixo para entrar em contato com a equipe do MeuPortfolio.`
• No bloco logo abaixo, já temos um campo. Clique em "Pergunta sem título" e escreva Seu nome:;
  • Não é pra escrever o seu nome, como você se chama, e sim, literalmente a frase "Seu nome:". ?
  • Não esqueça do ":" no final para garantir o respeito ao idioma. ?

Observe que o tipo de campo, ao lado do nome dele, tem o valor "Resposta curta", o que permite inserir apenas uma linha de texto, suficiente para o usuário preencher seu nome.

• No rodapé deste campo, cheque a opção "Obrigatória", isso força o usuário a preencher esse campo;
• Ao lado do bloco do campo, clique no ⊕ para adicionar um novo campo;
• Preencha o título do campo com Seu e-mail:;
• No rodapé deste campo, cheque a opção "Obrigatória";
• Ainda no rodapé, clique nos três pontos verticais ⋮ e em "Validação da resposta";
  • Aparecem novas opções dentro do campo.
• Clique em "Número" e troque para Texto, selecionando isso na lista que aparece;
• Clique em "Contém" e selecione E-mail;
• Em "Texto de erro personalizado", escreva E-mail inválido!;
  • Esta mensagem de erro será exibida quando o usuário inserir um endereço de e-mail inválido.

• Novamente, ao lado do bloco do campo, clique no ⊕ para adicionar um novo campo;
• Nomeie-o como Assunto do contato:;
• Ao lado do nome do campo, selecione o tipo de campo como Resposta curta;
• Como este campo é opcional, NÃO cheque a opção Obrigatória;
• Mais uma vez, ao lado do bloco do campo, clique no ⊕ para adicionar um novo campo;
• Nomeie o novo campo como Mensagem:;
  • Observe que o tipo de campo agora é "Parágrafo" que permite a entrada de várias linhas de texto.
• No rodapé deste campo, cheque a opção Obrigatória.

O formulário está pronto, mas, você pode querer editar, modificar ou melhorar alguma coisa. É possível ver como o formulário será visto pelos usuários, clicando "no olho", na parte superior da página. Observe que os campos obrigatórios recebem um * vermelho ao lado dos títulos deles.

Otimizando o formulário

De volta à página de edição, vamos otimizar este formulário:

• Logo acima do formulário, temos três guias: "Perguntas", "Respostas" e "Configurações". Clique no último, em "Configurações";
• Clique na seta para baixo, ao lado de "Apresentação" para expandir a seção;
• Na opção "Mensagem de confirmação", clique em "Editar";
• Escreva algo educado como:

Olá!

Seu contato foi enviado com sucesso.

Obrigado...

• Clique em "Salvar";
  • Essa mensagem será vista pelo usuário quando este enviar o formulário.
• Normalmente, não é necessário mexer em mais nada aqui;
• Clique na guia "Perguntas" no topo do formulário para retornar à edição de campos.

Melhorando o tema

Se você quiser, pode alterar as cores e as fontes do formulário de forma a se adaptar melhor ao visual do seu site. Para isso, clique na "paleta de pintura" ? que fica ao lado do olho, na parte superior. Não são muitas opções, mas, dá para o gasto.

Salvando as respostas

Quando o formulário for publicado e respondido pelos usuários, você receberá, por padrão, os envios deles na guia "Respostas", logo acima do formulário, sempre na página de edição deste.

Porém, vamos usar uma abordagem mais profissional, salvando os resultados em uma planilha do Google. Outra vantagem dessa abordagem é que podemos receber um e-mail sempre que alguém responde ao formulário:

• Clique na guia "Respostas" logo acima do formulário;
• Clique em "Link para o app Planilhas" para criar uma planilha na pasta do formulário;
• Deixe a opção "Criar uma nova planilha" checada e clique em "Criar";
• A nova planilha será criada com o mesmo nome do formulário e aberta em uma nova guia do navegador.

Para ativar as notificações por e-mail:

• Na planilha do formulário, clique em "Ferramentas" do menu principal;
• Selecione "Configurações de notificação";
• Clique em "Notificações de edições";
• Em "Definir regras de notificação", marque as opções:
  • Um usuário enviar um formulário
  • E-mail - imediatamente
• Clique em [Salvar];
• Clique em [Concluído];
• Pode fechar a aba da planilha no navegador.

Agora, sempre que alguém lhe enviar um contato pelo formulário, você será avisado pelo e-mail associado ao Google Drive e poderá acessar a planilha que está na mesma pasta que o formulário. Observe que a planilha já registra a data do contato automaticamente.

Publicando o formulário no Google Site

Se o formulário já está do jeitinho que você quer (ou pode), está no hora de publicá-lo no seu site. Siga os passos:

• Feche a guia de edição do formulário no navegador;
• Acesse seu Google Sites;
• Selecione o site que receberá o formulário criado agora pouco;
• Na página de edição do site, clique em "Páginas" na barra lateral direita;
• No final desta barra, clique no ⊕ para criar uma nova página que receberá o formulário;
  • Caso você já tenha uma página para este fim pronta, ignore este item e acesse a página pela guia "Páginas".
• Ainda na barra lateral direita, clique em "Inserir";
• Role até o final e clique na opção "Formulários";
• Na lista de formulários aberta, localize e clique no formulário de contatos que criamos antes;
• Mais abaixo, clique no botão [Inserir] que surgiu.

Já temos o formulário na página e ele já é funcional, mas antes…

Ajustes finos no design

Primeiramente, posicione o formulário horizontalmente usando o recurso das colunas do editor de páginas do Google Sites como guias.

Observe que o formulário é cortado na vertical quando vemos o preview da página. Para evitar isso, principalmente nos dispositivos de tela estreita:

• Role a página até o final;
• Clique no formulário para selecioná-lo;
• Observe que aparecem "Bolinhas azuis" nos cantos e na parte inferior do formulário;
• Clique e arraste a "Bolinha azul" de baixo, puxando-a para baixo até que veja uma parte branca;
• Puxe até que a parte branca tenha aproximadamente 5 vezes a altura do botão [Enviar];
  • Nos testes, essa altura de sobra ficou como ideal para que o formulário abra corretamente em qualquer largura de tela.

Conclusão

Se tudo deu certo, crien links no seu site apontando para a página que contém o formulário de contatos sempre que precisar e publique as alterações no site. Não esqueça de testar seu formulário e verificar se as notificações por e-mail funcionam.

Quer ainda mais dicas de Google Sites e família? Fale conosco!