# Ajouter un formulaire de contact à votre site portfolio

> Un formulaire de contact de portfolio qui pose les questions d'un premier appel : projet, budget, délai et un lien, sans serveur et avec réponses depuis votre boîte.

Publié le 2026-10-25 · https://ikiform.com/fr/guides/contact-form-static-site/portfolio-website

Demandez les quatre informations dont vous avez besoin avant un premier appel : la nature du projet, une fourchette de budget, la date de démarrage et un lien à consulter. Envoyez le formulaire à Ikiform depuis votre portfolio statique, pour que chaque demande arrive dans votre boîte avec **Reply** pointant vers le client. Pré-remplissez le type de projet d'après l'étude de cas d'où vient le visiteur, pour savoir ce qui l'a convaincu.

## Ce qui change pour un formulaire de portfolio

Sur un portfolio, le formulaire de contact est l'entonnoir de vente. Un formulaire nu avec nom, e-mail et message apporte des messages auxquels vous devez répondre par des questions : quel est le budget, quand voulez-vous démarrer, avez-vous déjà un site. Les poser d'emblée vous épargne un aller-retour d'e-mails, et les réponses vous disent à quelles demandes répondre en premier.

Les portfolios vivent aussi souvent sur un hébergement statique gratuit, construits une fois puis laissés de côté pendant des mois. Le formulaire doit continuer de fonctionner sans serveur à mettre à jour, et sans que vous surveilliez un tableau de bord.

| Champ | Pourquoi ce champ | Type |
| --- | --- | --- |
| `project` | À qui répondre et quoi renvoyer | `select`, donc sûr pour filtrer |
| `budget` | Des fourchettes se filtrent mieux qu'un nombre libre, et les gens y répondent | `radio` avec des fourchettes |
| `start` | « Ce mois-ci » et « plus tard, encore en réflexion » appellent des réponses différentes | `select` |
| `link` | Leur site actuel ou un brief, pour répondre avec quelque chose de précis | `url` |
| `message` | Le projet avec leurs mots | `textarea`, au moins 30 caractères |

Laissez de côté les numéros de téléphone et la taille de l'entreprise. Chaque champ obligatoire supplémentaire vous coûte des demandes, et vous apprendrez les deux lors du premier appel.

Formulaire : Work with me

- **Votre nom** (`name`, text, obligatoire)
- **E-mail** (`email`, email, obligatoire)
- **De quoi avez-vous besoin ?** (`project`, select, obligatoire)
- **Budget** (`budget`, radio, obligatoire)
- **Quand aimeriez-vous démarrer ?** (`start`, select)
- **Votre site actuel ou un brief** (`link`, url)
- **Parlez-moi du projet** (`message`, textarea, obligatoire)
- **Venu de** (`seen`, text)

Collez cette définition dans l'onglet **Fields** du formulaire. Ikiform n'accepte alors que les valeurs de budget et de projet listées, et refuse un message de moins de 30 caractères avec une erreur de champ. `seen` figure dans la définition car un formulaire avec des champs refuse tout input qu'il ne liste pas ; sur la page, c'est un input masqué.

> L'envoi de fichiers n'est pas encore pris en charge. Un envoi avec un fichier reçoit `422 files_not_supported`.

## Le formulaire

Du HTML simple, qui fonctionne donc dans un portfolio écrit à la main, un thème Jekyll ou Hugo, ou un modèle Astro. Le script final pré-remplit le type de projet d'après le lien qui a amené le visiteur, et enregistre de quelle page il s'agissait :

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

Sur chaque étude de cas, faites un lien vers le formulaire avec le type de projet et le nom de la page :

`case-studies/northwind.html`:

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

- Le script ne sélectionne qu'une valeur de projet qui existe dans la liste : un lien modifié à la main ne peut donc pas ajouter de nouvelles valeurs.
- `seen` contient le nom de l'étude de cas, ou le référent s'il n'y en a pas. Après quelques mois, le CSV vous dit quels travaux amènent quelles demandes.
- Gardez `email` comme nom de champ. Les e-mails de notification en font l'adresse de réponse, vous répondez donc depuis votre propre boîte.
- Pour un portfolio construit avec un framework, le [guide principal](https://ikiform.com/fr/guides/contact-form-static-site.md#form) propose le même modèle de formulaire en Next.js, Astro, SvelteKit, Nuxt, React et Vue. Les générateurs de sites statiques ont leurs propres pages de configuration, comme [Jekyll](https://ikiform.com/fr/docs/guides/jekyll.md) et [Hugo](https://ikiform.com/fr/docs/guides/hugo.md).

## Répondre d'abord aux bonnes demandes

Schéma : Où va une demande de portfolio après que le visiteur a cliqué sur Envoyer

1. Un visiteur arrive depuis une étude de cas, et le formulaire s'ouvre avec le type de projet déjà choisi.
2. Le formulaire envoie à Ikiform, qui lance les vérifications anti-spam et stocke la demande.
3. Vous recevez un e-mail de notification, et Répondre écrit directement au client.
4. Un webhook envoie la même demande vers Telegram ou Slack, où une automatisation peut vous alerter uniquement pour les gros budgets.
5. Chaque demande reste dans le tableau de bord : vous pouvez exporter une année entière en CSV et voir quels travaux les ont amenées.

L'e-mail seul suffit pour commencer. Ajoutez l'alerte sur téléphone quand vous commencez à perdre des contrats faute de répondre vite.

Ikiform envoie chaque demande de la même façon ; le filtrage par budget se fait dans l'outil qui reçoit le webhook. Dans [Zapier](https://ikiform.com/blog/form-submissions-to-zapier.md) ou [n8n](https://ikiform.com/blog/form-submissions-to-n8n.md), ajoutez un filtre sur `budget` avant l'étape du message. Pour être alerté directement sur votre téléphone, suivez [Telegram](https://ikiform.com/blog/form-submissions-to-telegram.md) ou [Slack](https://ikiform.com/blog/form-submissions-to-slack.md).

Ikiform n'envoie pas d'e-mail à la personne qui remplit le formulaire. Les e-mails de notification vont uniquement à vous et à votre équipe : il n'y a donc ni réponse automatique, ni e-mail de confirmation, ni double opt-in. Envoyez-les depuis votre outil d'e-mailing, déclenché par un [webhook](https://ikiform.com/fr/docs/webhooks.md). Pour un portfolio, une courte page de remerciement qui indique quand vous répondrez fait l'essentiel de ce que ferait une réponse automatique.

## Une page de remerciement qui fait réserver l'appel

Réglez **Redirect after submit** sur votre propre page de remerciement. Sur un portfolio, elle peut faire plus que remercier : mettez un lien vers votre page de réservation d'agenda pour ceux qui veulent parler tout de suite, et indiquez quand vous répondez aux autres. Ajoutez deux ou trois études de cas qu'ils n'ont pas vues ; ils sont encore en train de se décider.

Excluez la page des résultats de recherche avec une balise meta `noindex`, et ne comptez pas ses visites comme des conversions dans vos statistiques sans vérifier aussi le tableau de bord, car le spam reçoit la même redirection qu'une vraie demande.

## Le spam sur un portfolio

Les portfolios reçoivent un spam bien particulier : offres SEO, propositions d'articles invités et modèles « refaites votre site ». Le score d'Ikiform ajoute +2 pour les formules de spam connues, +3 pour un lien dans le champ nom et +2 pour trois liens ou plus ; à 5, un message est stocké comme spam et n'envoie aucun e-mail.

Un client envoie rarement deux demandes en dix minutes : réglez donc la limite de débit sur Strict, 2 toutes les 10 minutes par visiteur. Ajoutez votre domaine dans **Allowed domains**, et jetez de temps en temps un œil au filtre **Spam** les premières semaines : une vraie demande avec trois liens vers des travaux passés peut obtenir un score élevé.

## Vérifiez que tout fonctionne

1. Dans **Allowed domains** du formulaire, ajoutez le domaine de votre site, plus `localhost` pendant le développement. Laissez vide pour accepter les envois de partout.
2. Ouvrez `contact.html?project=branding&from=test` et vérifiez que **Branding** est sélectionné.
3. Envoyez une demande. Dans **Submissions**, `seen` doit valoir `test`.
4. Retirez `minlength` du textarea dans les outils de développement du navigateur et envoyez un message de trois mots. Ikiform le refuse avec `422 validation_failed`, en nommant `message`.
5. Vérifiez la boîte de réception de chaque destinataire des notifications. Chacun reçoit un e-mail avec les champs, et **Reply** répond à l'expéditeur quand le formulaire a un champ `email`.
6. Rien n'est arrivé ? Passez le filtre de statut du tableau de bord sur **Spam**. Le spam reçoit la même réponse de succès qu'une vraie soumission.

## Pièges

| Problème | Que faire |
| --- | --- |
| `422 validation_failed` pour `budget` | Une `value` de radio dans le HTML ne correspond pas aux options de la définition. Elles doivent correspondre exactement, tirets bas compris. |
| Le projet n'est pas pré-rempli | La valeur `project` du lien ne fait pas partie des valeurs d'option. Vérifiez l'orthographe et la casse. |
| La demande d'un vrai client est dans les spams | Trois liens ou plus augmentent le score, et avec en plus une formule de la liste de spam ou une adresse jetable, le seuil est franchi. Marquez-la comme non-spam ; son e-mail et ses webhooks partent alors. |
| `422 files_not_supported` | Le formulaire a un `<input type="file">` avec un fichier choisi. L'envoi de fichiers n'est pas encore pris en charge ; retirez l'input ou demandez plutôt un lien. |

## Questions

### Un formulaire de contact de portfolio doit-il demander un budget ?

En général oui, sous forme de fourchettes plutôt que d'un nombre. Les fourchettes sont faciles à remplir, et elles vous disent quelles demandes appellent une réponse rapide. Ajoutez une option Je ne sais pas encore pour que personne ne parte.

### Les clients peuvent-ils joindre un brief ou des fichiers ?

Pas encore via Ikiform. Demandez plutôt un lien : un document partagé, un dossier drive ou leur site actuel. Le champ url vérifie qu'il s'agit d'une vraie adresse web.

### Ai-je besoin d'un serveur pour un formulaire de contact de portfolio ?

Non. Le portfolio reste statique sur n'importe quel hébergeur, et le formulaire envoie à Ikiform, qui stocke chaque demande et vous l'envoie par e-mail.

### Où voir quelle étude de cas a amené une demande ?

Dans le champ seen de chaque soumission. Filtrez-le ou recherchez-le dans le tableau de bord, ou exportez un CSV et comptez les demandes par page tous les quelques mois.

### Ikiform est-il gratuit ?

Non, il n'y a pas d'offre gratuite. Les tests sont gratuits : vous pouvez envoyer 50 soumissions de test par mois depuis localhost avant de payer. Pour passer en production, Pro commence à 6 $/mois pour 500 soumissions, ou vous pouvez payer une seule fois 10 000 soumissions pour 49 $ ou 50 000 soumissions pour 149 $, avec des crédits qui n'expirent jamais.

## Autres guides

- [Formulaire de contact sur un site statique](https://ikiform.com/fr/guides/contact-form-static-site.md): Ajoutez un formulaire de contact fonctionnel à un site statique sans serveur : où va le POST, le spam, les réponses par e-mail, et du code pour chaque hébergeur.
- [GitHub Pages](https://ikiform.com/fr/guides/contact-form-static-site/github-pages.md): GitHub Pages n'exécute pas de code serveur, un POST de formulaire reçoit donc 405 Not Allowed ; envoyez vers un backend et réglez bien les redirections.
- [Netlify](https://ikiform.com/fr/guides/contact-form-static-site/netlify.md): Un formulaire de contact sur Netlify sans Netlify Forms : pas de détection au build, envois JSON depuis React, et un formulaire à part pour les deploy previews.
- [Vercel](https://ikiform.com/fr/guides/contact-form-static-site/vercel.md): Une page statique sur Vercel répond à un POST de formulaire par 405 Method Not Allowed ; voici pourquoi, et comment envoyer le formulaire à un backend.
- [Cloudflare Pages](https://ikiform.com/fr/guides/contact-form-static-site/cloudflare-pages.md): Un formulaire de contact sur Cloudflare Pages sans écrire de Function : envoyez à un backend, définissez les en-têtes dans _headers, utilisez vos clés Turnstile.
- [Amazon S3](https://ikiform.com/fr/guides/contact-form-static-site/aws-s3.md): Les website endpoints S3 n'acceptent que GET et HEAD en HTTP simple : envoyez le formulaire à un backend et gérez bien les redirections avec CloudFront.