Adicione um formulário de contato ao seu site de portfólio

Pergunte as quatro coisas de que você precisa antes de uma primeira conversa: qual é o projeto, uma faixa de orçamento, quando começa e um link para você olhar. Envie o formulário ao Ikiform a partir do seu portfólio estático, para que cada pedido caia na sua caixa de entrada com o Reply indo para o cliente. Preencha o tipo de projeto a partir do case que o visitante estava vendo, para saber o que o convenceu.

O que muda num formulário de portfólio

Num portfólio, o formulário de contato é o funil de vendas. Um formulário só com nome, e-mail e mensagem traz mensagens que você precisa responder com perguntas: qual é o orçamento, quando quer começar, já tem um site. Perguntar isso de cara poupa uma troca de e-mails, e as respostas mostram quais pedidos responder primeiro.

Portfólios também costumam ficar em hospedagem estática gratuita, gerados uma vez e deixados de lado por meses. O formulário precisa continuar funcionando sem um servidor para atualizar e sem você ficar olhando um painel.

Deixe de fora telefone e tamanho da empresa. Cada campo obrigatório a mais custa pedidos, e você descobre as duas coisas na primeira conversa.

O formulário

HTML simples, então funciona num portfólio escrito à mão, num tema Jekyll ou Hugo ou num template Astro. O script no final preenche o tipo de projeto a partir do link que trouxe o visitante e registra que página era:

<form id="enquiry" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" maxlength="120" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="project">What do you need?</label>
  <select id="project" name="project" required>
    <option value="website">A website</option>
    <option value="branding">Branding</option>
    <option value="product">Product design</option>
    <option value="other">Something else</option>
  </select>

  <fieldset>
    <legend>Budget</legend>
    <label><input type="radio" name="budget" value="under_5k" required /> Under $5k</label>
    <label><input type="radio" name="budget" value="5k_15k" /> $5k to $15k</label>
    <label><input type="radio" name="budget" value="over_15k" /> Over $15k</label>
    <label><input type="radio" name="budget" value="unsure" /> Not sure yet</label>
  </fieldset>

  <label for="start">When would you like to start?</label>
  <select id="start" name="start">
    <option value="now">This month</option>
    <option value="soon">In 1 to 3 months</option>
    <option value="later">Later, still planning</option>
  </select>

  <label for="link">Your current site or a brief</label>
  <input id="link" name="link" type="url" placeholder="https://" />

  <label for="message">Tell me about the project</label>
  <textarea id="message" name="message" rows="6" minlength="30" required></textarea>

  <input type="hidden" name="seen" value="" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send enquiry</button>
</form>

<script>
  const params = new URLSearchParams(location.search);
  const enquiry = document.querySelector("#enquiry");
  const project = params.get("project");
  if (project && enquiry.project.querySelector(`option[value="${CSS.escape(project)}"]`)) {
    enquiry.project.value = project;
  }
  enquiry.seen.value = params.get("from") ?? document.referrer;
</script>

Em cada case, crie um link para o formulário com o tipo de projeto e o nome da página:

<a href="/contact.html?project=branding&from=case-study-northwind">Start a branding project</a>

• O script só seleciona um valor de projeto que exista na lista, então um link editado à mão não consegue adicionar valores novos.
• seen guarda o nome do case, ou o referrer quando não houver um. Depois de alguns meses, o CSV mostra qual trabalho traz quais pedidos.
• Mantenha email como nome do campo. Os e-mails de notificação o definem como reply-to, então você responde pela sua própria caixa de entrada.
• Para um portfólio feito com framework, o guia principal tem o mesmo padrão de formulário em Next.js, Astro, SvelteKit, Nuxt, React e Vue. Geradores de sites estáticos têm páginas de configuração próprias, como Jekyll e Hugo.

Responda primeiro aos pedidos certos

O Ikiform envia todos os pedidos do mesmo jeito; o filtro por orçamento acontece na ferramenta que recebe o webhook. No Zapier ou no n8n, adicione um filtro em budget antes do passo da mensagem. Para chegar direto ao seu celular, siga o guia do Telegram ou do Slack.

O Ikiform não envia e-mail para quem preenche o formulário. Os e-mails de notificação vão só para você e sua equipe, então não há resposta automática, e-mail de confirmação nem double opt-in. Envie esses e-mails pela sua ferramenta de e-mail, disparados por um webhook. Num portfólio, uma página de agradecimento curta que diz quando você vai responder faz quase tudo o que uma resposta automática faria.

Uma página de agradecimento que marca a conversa

Defina Redirect after submit com uma página de agradecimento sua. Num portfólio, ela pode fazer mais do que agradecer: coloque o link da sua página de agendamento para quem quer conversar agora e diga quando você responde a todos os outros. Adicione dois ou três cases que a pessoa ainda não viu; ela ainda está decidindo.

Mantenha a página fora dos resultados de busca com uma meta tag noindex, e não conte as visitas a ela como conversão no analytics sem conferir também o painel, porque o spam recebe o mesmo redirecionamento que um pedido real.

Spam em portfólios

Portfólios recebem um tipo particular de spam: ofertas de SEO, propostas de guest post e templates de "redesenhe seu site". A pontuação do Ikiform soma +2 para frases de spam conhecidas, +3 para um link no campo de nome e +2 para três ou mais links; com 5, uma mensagem é armazenada como spam e não envia e-mail.

Um cliente raramente manda dois pedidos em dez minutos, então defina o limite de taxa como Strict, 2 a cada 10 minutos por visitante. Adicione seu domínio em Allowed domains e confira o filtro Spam de vez em quando nas primeiras semanas: um pedido real com três links para trabalhos anteriores pode pontuar alto.

Confira se funciona

1. Em Allowed domains do formulário, adicione o domínio do seu site, mais localhost enquanto desenvolve. Deixe vazio para aceitar envios de qualquer lugar.
2. Abra contact.html?project=branding&from=test e confira se Branding está selecionado.
3. Envie um pedido. Em Submissions, seen deve mostrar test.
4. Remova o minlength do textarea nas ferramentas de desenvolvedor do navegador e envie uma mensagem de três palavras. O Ikiform a recusa com 422 validation_failed, apontando message.
5. Confira a caixa de entrada de cada destinatário das notificações. Cada um recebe um e-mail com os campos, e Reply vai para quem enviou quando o formulário tem um campo email.
6. Não chegou nada? Mude o filtro de status do painel para Spam. Spam recebe a mesma resposta de sucesso de um envio real.

Pegadinhas

Perguntas