Ajouter un formulaire de contact à votre site portfolio

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.

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.

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 :

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

<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 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 et Hugo.

Répondre d'abord aux bonnes demandes

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 ou n8n, ajoutez un filtre sur budget avant l'étape du message. Pour être alerté directement sur votre téléphone, suivez Telegram ou Slack.

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

Questions