Formulários, botões e widgets

Módulo 4: Páginas, aspeto e funcionalidades · Tempo de leitura: 8 minutos

Objetivo de aprendizagem: No final desta lição, saberá configurar o formulário de contacto (destinatário, confirmação, página de agradecimento, controlo de spam, newsletter e método de envio), colocar botões flutuantes de WhatsApp e de contacto e incorporar um widget de outro serviço. Saberá também quando faz sentido usar Código próprio e HTML próprio.

Conceitos chave: formulário de contacto, destinatário, e-mail de confirmação, página de agradecimento, captcha, dupla confirmação de subscrição, método de envio, botão flutuante, widget, código de incorporação, consentimento, Código próprio, HTML próprio

O formulário de contacto: dois lugares

Um formulário no seu site é composto por duas partes. O formulário propriamente dito, com os campos que o visitante preenche, fica numa página. Coloca-o com a secção Contacto (através de Secções ou Adicionar secção) ou através do chat. O que acontece quando alguém clica em enviar é configurado em Definições > Formulários. Esse painel é sempre configurado por si; o chat não o faz.

O formulário tem sempre os campos nome, e-mail e mensagem. Através do chat pode acrescentar campos extra, no máximo oito: um campo de texto, uma lista de opções (por exemplo "Interior ou exterior?"), e-mail, telefone, um campo de texto longo, uma data ou um número. Não existe um campo para enviar um ficheiro ou uma fotografia. Se a Schildersbedrijf Example quiser receber fotografias do trabalho, coloca no texto de agradecimento: "Pode enviar-nos fotografias para o nosso endereço de e-mail."

Importante: no site gratuito sem plano, o formulário está visível mas desativado (a cinzento) e não envia e-mails. Os formulários só enviam realmente quando o seu site está num plano AI Builder. Pode, no entanto, deixar já preparadas as definições abaixo; passam a ser usadas de imediato.

Definições > Formulários

O painel tem cinco blocos.

Receber mensagens. Em Enviar mensagens para indica o endereço de e-mail para onde vão os formulários preenchidos. Se deixar o campo vazio, as mensagens vão para o endereço de e-mail da sua conta na WebOké. Preencha-o de forma consciente. Em Assunto do e-mail escolhe o assunto (vazio: "Nova mensagem através do seu website"). Em Após o envio escolhe Mostrar um agradecimento com o seu próprio texto, ou Reencaminhar para uma página: uma página de agradecimento que cria e deixa fora do menu (lição 4.1). Assim poderá medir mais tarde quantas vezes o formulário é enviado.

Enviar através de. A forma como o e-mail é enviado. Servidor da WebOké funciona de imediato, com noreply@weboke.site como remetente. O seu próprio endereço de e-mail (SMTP) é a opção recomendada: o e-mail sai do seu próprio domínio e vai parar menos vezes ao spam. Com Configurar por mim, o construtor cria esse endereço no seu domínio. Na opção do seu próprio endereço de e-mail também pode escolher um serviço de e-mail, como Postmark, Brevo, Mailgun ou SendGrid. Na lição 5.3 explica-se porque é que o remetente faz tanta diferença.

Confirmação ao visitante. Ative Enviar uma cópia ao visitante e o visitante recebe um e-mail de confirmação. Muitas vezes, é a primeira mensagem que alguém recebe de si. Escolhe o assunto, O seu texto (com {naam} para o nome do visitante), a Assinatura e se a mensagem preenchida segue em anexo ao texto. O construtor coloca o seu texto no estilo do seu site, com o seu logótipo. Com Deixar a IA escrever este texto recebe uma proposta.

Travar o spam. Todos os formulários têm sempre uma verificação invisível: um campo oculto e um limite de tempo. Isto trava a maior parte do spam sem que os visitantes se apercebam. Se mesmo assim receber muito spam, escolha uma verificação extra, um captcha: Cloudflare Turnstile ou hCaptcha. Para isso cria uma conta gratuita nesse serviço e preenche a Site key e a Secret key. Ative um captcha apenas quando for necessário: cada passo extra afasta visitantes.

Newsletter. Pode colocar no formulário uma caixa de seleção com a qual os visitantes subscrevem a sua newsletter no Mailchimp, Laposta, Brevo ou MailerLite. Só é adicionado quem marcar a caixa por iniciativa própria. Sempre com dupla confirmação de subscrição: o visitante confirma primeiro através de um e-mail. No Laposta e no MailerLite ativa isso por si nesse serviço; o construtor indica-lhe onde. Sem dupla confirmação, qualquer pessoa pode colocar endereços alheios na sua lista.

Além disso: um visitante pode enviar no máximo 5 mensagens por hora. Se tiver uma política de privacidade, aparece uma ligação para ela por baixo do formulário. Um formulário recolhe dados pessoais; o que precisa de tratar para isso está na lição 7.1.

Armadilha: teste o formulário por si após cada alteração, a partir de um endereço diferente do endereço de receção. Verifique também a pasta de spam e confirme se a confirmação chega ao "visitante".

Botões flutuantes

Em Definições > Botões coloca botões que ficam sempre visíveis no fundo do ecrã em todas as páginas, à direita ou à esquerda (Canto: Canto inferior direito ou Canto inferior esquerdo).

• Número de WhatsApp: em formato internacional, com o indicativo do país (por exemplo +351 para um número português ou +31 para um número neerlandês) e sem o 0 inicial, se existir. Se deixar o campo vazio, não há botão de WhatsApp. Pode usar uma Mensagem pré-preenchida, por exemplo "Gostaria de pedir um orçamento para trabalhos de pintura." O botão abre uma conversa com o seu número.
• Botão de contacto flutuante: abre o seu formulário de contacto numa janela. A mensagem chega ao mesmo endereço que o seu formulário. Escolhe o Texto do botão.

Na pré-visualização, os botões aparecem um pouco mais acima do que no seu site real, para não ficarem tapados pelo botão de ajuda do construtor.

Atenção: um botão de WhatsApp promete uma resposta rápida. Se só lê o WhatsApp à noite, prefira o botão de contacto.

Widgets de outros serviços

Um widget é uma parte de outro serviço na sua página: um vídeo do YouTube, um mapa do Google Maps, uma agenda de marcações do Calendly, o seu Instagram, uma playlist do Spotify. Em muitos serviços basta a ligação; o próprio construtor cria o leitor ou o formulário. Exemplos: YouTube, Vimeo, Spotify, Calendly, Google Maps (basta a morada), Google Calendar, Instagram e TikTok (basta o seu @nome) e Google Forms. Noutros serviços, como Salonized, Trustpilot ou Bandcamp, cola o código de incorporação: o pequeno código que esse serviço lhe fornece para colocar num website.

Faz-se assim: diga-o no chat juntamente com a ligação ("coloque o nosso mapa de localização por baixo do bloco de contacto, morada Rua Principal 1"), cole o código no chat ou escolha em Secções a secção Widget. O construtor reconhece o serviço, propõe a altura e o título e avisa se algo não vai funcionar. Se deixar a IA colocá-lo, trata-se de um pedido e gasta edições; vê antecipadamente quantas. Um widget já colocado altera-se com Alterar código no bloco da pré-visualização.

Três coisas a saber:

1. Um widget só carrega após consentimento. Os serviços de terceiros colocam frequentemente cookies ou seguem os visitantes. Com o banner de cookies ativo, um widget só carrega quando o visitante dá consentimento para esse tipo de cookies. O serviço aparece automaticamente no seu banner de cookies em "O que está ativo no seu site neste momento". Depois, verifique também a sua política de privacidade (lições 7.1 e 7.2).
2. O Google Calendar tem de ser público. Ninguém mais consegue ver um calendário privado. No Google Calendar, torne público apenas um calendário separado com o que os visitantes podem ver, nunca o seu calendário pessoal.
3. Código inseguro não entra. A IA não coloca no seu site código que possa reencaminhar dados de visitantes, que esconda o que faz ou que carregue algo de um website desconhecido. Explica-lhe porquê.

Código próprio e HTML próprio, em linhas gerais

Para utilizadores avançados existem dois lugares.

Código próprio encontra-se no fundo de Definições > Integrações: código que tem de estar em todas as páginas, No head de todas as páginas ou No fundo de todas as páginas. Por exemplo, o script de carregamento de um serviço de chat ou de um widget de avaliações. O construtor não verifica esse código ("Não verificamos este código"). Os serviços conhecidos são bloqueados pelo banner de cookies até haver consentimento. Marque Este código é necessário apenas para código que não segue visitantes, porque nesse caso carrega de imediato. Na pré-visualização do construtor, o código próprio não é executado; no seu site real, sim. No site gratuito, o código próprio não funciona. Para um ID de medição como o Google Analytics não usa Código próprio, mas sim o campo próprio em Integrações (lição 7.2).

HTML próprio é uma secção em Secções. Cola o seu próprio HTML e, se quiser, CSS, e altera-o mais tarde com Editar HTML. As cores e os tipos de letra seguem a sua identidade visual. Scripts, iframes e formulários não funcionam aqui; para isso usa um widget.

Use ambos apenas quando não houver alternativa: código de terceiros é um risco para a velocidade, a segurança e a privacidade.

No construtor: como fazer

1. Coloque a secção Contacto com formulário na sua página de contacto.
2. Abra Definições > Formulários. Preencha Enviar mensagens para.
3. Em Enviar através de, escolha o seu próprio endereço de e-mail, ou deixe o servidor da WebOké até o seu domínio estar pronto (lição 5.3).
4. Ative Enviar uma cópia ao visitante e escreva o seu próprio texto.
5. Em Após o envio, escolha um agradecimento ou uma página de agradecimento.
6. Se necessário, coloque em Definições > Botões um botão de WhatsApp ou de contacto.
7. Coloque o seu site online e envie uma mensagem de teste.

Resumo

• O formulário fica numa página; o que acontece com ele configura-se em Definições > Formulários.
• Preencha Enviar mensagens para de forma consciente; de preferência, escolha o seu próprio endereço de e-mail como remetente.
• No site gratuito, o formulário não envia e-mails; enviar um ficheiro nunca é possível.
• Os botões flutuantes de WhatsApp e de contacto encontram-se em Definições > Botões.
• Os widgets só carregam após consentimento; Código próprio e HTML próprio destinam-se a utilizadores avançados.

Questionário

Exercício

Exercício D4.3: O seu formulário de contacto e um widget. Configure o seu formulário por completo e coloque um widget que acrescente realmente algo.

Lista de verificação:

• [ ] secção Contacto com formulário na sua página de contacto;
• [ ] Enviar mensagens para preenchido com um endereço que lê todos os dias;
• [ ] método de envio escolhido e percebido o porquê;
• [ ] confirmação ao visitante com o seu próprio texto;
• [ ] agradecimento ou página de agradecimento configurado;
• [ ] um widget colocado (por exemplo, um mapa ou uma agenda de marcações) e verificado que aparece no banner de cookies;
• [ ] site online e mensagem de teste enviada (apenas com um plano; no site gratuito verifica as definições).

Perguntas:

1. Em que endereço chegam as mensagens do seu formulário e através de que método de envio?
2. Que widget escolheu, o que acrescenta para o seu visitante e o que vê um visitante que não dá consentimento?
3. A sua mensagem de teste chegou? E a confirmação chegou ao "visitante", ou foi parar ao spam?

Depois de clicar em "concluído", vê um exemplo de resposta: a Schildersbedrijf Example envia as mensagens para info@example.com através do seu próprio endereço de e-mail no domínio; o widget é um mapa do Google Maps com a morada, que só carrega após consentimento e, caso contrário, mostra uma área com um botão para dar consentimento; a mensagem de teste chegou, a confirmação também, e não no spam.

Para saber mais

• Um formulário de contacto no seu website: enviar os campos por e-mail e evitar spam
• Curso gratuito E-mail em ordem: configurar e garantir uma boa entrega 7.3: Email a partir do seu site e formulários
• Curso gratuito E-mail em ordem: configurar e garantir uma boa entrega 7.2: Consentimento, cancelamento de subscrição e uma lista limpa
• Utilizar o clique para conversar (Central de Ajuda do WhatsApp): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Ajuda do Google Calendar, em inglês): https://support.google.com/calendar/answer/37083