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

> Um formulário de contato para portfólio que faz as perguntas de uma primeira conversa: projeto, orçamento, prazo e um link, sem servidor e com respostas pela sua caixa de entrada.

Publicado em 2026-10-25 · https://ikiform.com/pt-br/guides/contact-form-static-site/portfolio-website

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.

| Campo | Por que está aí | Tipo |
| --- | --- | --- |
| `project` | A quem responder e o que mandar de volta | `select`, então é seguro filtrar por ele |
| `budget` | Faixas filtram melhor que um número aberto, e as pessoas respondem | `radio` com faixas |
| `start` | "Este mês" e "mais para frente, ainda planejando" pedem respostas diferentes | `select` |
| `link` | O site atual ou um briefing, para você responder com algo específico | `url` |
| `message` | O projeto nas palavras do cliente | `textarea`, com pelo menos 30 caracteres |

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.

Formulário: Work with me

- **Seu nome** (`name`, text, obrigatório)
- **E-mail** (`email`, email, obrigatório)
- **Do que você precisa?** (`project`, select, obrigatório)
- **Orçamento** (`budget`, radio, obrigatório)
- **Quando você gostaria de começar?** (`start`, select)
- **Seu site atual ou um briefing** (`link`, url)
- **Conte sobre o projeto** (`message`, textarea, obrigatório)
- **Veio de** (`seen`, text)

Cole esta definição na aba **Fields** do formulário. O Ikiform passa a aceitar só os valores de orçamento e projeto listados, e recusa uma mensagem com menos de 30 caracteres com um erro de campo. `seen` está na definição porque um formulário com campos recusa qualquer input que não esteja listado; na página, ele é um input oculto.

> Upload de arquivos ainda não é suportado. Um envio com arquivo recebe `422 files_not_supported`.

## 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:

`contact.html`:

```html
<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:

`case-studies/northwind.html`:

```html
<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](https://ikiform.com/pt-br/guides/contact-form-static-site.md#form) 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](https://ikiform.com/pt-br/docs/guides/jekyll.md) e [Hugo](https://ikiform.com/pt-br/docs/guides/hugo.md).

## Responda primeiro aos pedidos certos

Diagrama: Para onde vai um pedido do portfólio depois que o visitante clica em Enviar

1. Um visitante chega de um case, e o formulário abre com o tipo de projeto já escolhido.
2. O formulário envia ao Ikiform, que roda as verificações de spam e armazena o pedido.
3. Você recebe um e-mail de notificação, e o Reply responde direto ao cliente.
4. Um webhook manda o mesmo pedido para o Telegram ou o Slack, onde uma automação pode avisar você só para orçamentos grandes.
5. Todos os pedidos ficam no painel, então você pode exportar um ano deles como CSV e ver qual trabalho os trouxe.

Só o e-mail basta para começar. Adicione o alerta no celular quando começar a perder trabalhos por responder devagar.

O Ikiform envia todos os pedidos do mesmo jeito; o filtro por orçamento acontece na ferramenta que recebe o webhook. No [Zapier](https://ikiform.com/blog/form-submissions-to-zapier.md) ou no [n8n](https://ikiform.com/blog/form-submissions-to-n8n.md), adicione um filtro em `budget` antes do passo da mensagem. Para chegar direto ao seu celular, siga o guia do [Telegram](https://ikiform.com/blog/form-submissions-to-telegram.md) ou do [Slack](https://ikiform.com/blog/form-submissions-to-slack.md).

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](https://ikiform.com/pt-br/docs/webhooks.md). 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

| Problema | O que fazer |
| --- | --- |
| `422 validation_failed` em `budget` | Um `value` de radio no HTML não bate com as opções da definição. Eles precisam ser exatamente iguais, inclusive os underscores. |
| O projeto não vem preenchido | O valor de `project` no link não é um dos valores das opções. Confira a grafia e as maiúsculas. |
| O pedido de um cliente real está no spam | Três ou mais links somam à pontuação, e com uma frase da lista de spam ou um endereço descartável por cima ela passa do limite. Marque-o como não spam; o e-mail e os webhooks dele são enviados na hora. |
| `422 files_not_supported` | O formulário tem um `<input type="file">` com um arquivo escolhido. Upload de arquivos ainda não é suportado; remova o input ou peça um link. |

## Perguntas

### Um formulário de contato de portfólio deve perguntar o orçamento?

Geralmente sim, em faixas em vez de um número. Faixas são fáceis de responder e mostram quais pedidos precisam de resposta rápida. Inclua uma opção Ainda não sei para ninguém desistir.

### Os clientes podem anexar um briefing ou arquivos?

Pelo Ikiform, ainda não. Peça um link: um documento compartilhado, uma pasta no drive ou o site atual. O campo url confere se é um endereço web de verdade.

### Preciso de um servidor para um formulário de contato de portfólio?

Não. O portfólio continua estático em qualquer host, e o formulário envia ao Ikiform, que armazena cada pedido e manda um e-mail para você.

### Onde vejo qual case trouxe um pedido?

No campo seen de cada envio. Filtre ou pesquise por ele no painel, ou exporte um CSV e conte os pedidos por página a cada poucos meses.

### O Ikiform é gratuito?

Não, não há plano gratuito. Testar é grátis: você pode enviar 50 envios de teste por mês a partir de localhost antes de pagar. Para entrar no ar, o Pro começa em US$ 6/mês para 500 envios, ou você pode pagar uma vez 10.000 envios por US$ 49 ou 50.000 envios por US$ 149, com créditos que nunca expiram.

## Mais guias

- [Formulário de contato em site estático](https://ikiform.com/pt-br/guides/contact-form-static-site.md): Coloque um formulário de contato funcionando num site estático sem servidor: para onde vai o POST, spam, respostas por e-mail e código para todo host e framework.
- [GitHub Pages](https://ikiform.com/pt-br/guides/contact-form-static-site/github-pages.md): O GitHub Pages não roda código de servidor, então um POST de formulário recebe 405 Not Allowed; envie para um backend de formulários e acerte os redirecionamentos de project sites.
- [Netlify](https://ikiform.com/pt-br/guides/contact-form-static-site/netlify.md): Rode um formulário de contato num site da Netlify sem o Netlify Forms: sem detecção no build, envios JSON a partir do React e um formulário separado para deploy previews.
- [Vercel](https://ikiform.com/pt-br/guides/contact-form-static-site/vercel.md): Uma página estática na Vercel responde a um POST de formulário com 405 Method Not Allowed; veja por quê e como enviar o formulário para um backend.
- [Cloudflare Pages](https://ikiform.com/pt-br/guides/contact-form-static-site/cloudflare-pages.md): Adicione um formulário de contato ao Cloudflare Pages sem escrever uma Function: envie para um backend de formulários, defina headers no _headers e use suas próprias chaves do Turnstile.
- [Amazon S3](https://ikiform.com/pt-br/guides/contact-form-static-site/aws-s3.md): Endpoints de site do S3 só aceitam GET e HEAD via HTTP simples, então envie o formulário de contato para um backend de formulários e acerte os redirecionamentos com o CloudFront.