Formulaires de contact embarquables : capture tes prospects directement depuis ton site

Capturer un prospect quand il est sur ton site, c'est le moment le plus précieux de ta vente. Pourtant la majorité des photographes envoient leurs visiteurs vers un email `contact@` (mauvais taux de réponse, prospect mal qualifié) ou vers un Tally / Typeform / Google Form externe (3 outils, 3 abonnements, prospect qui atterrit dans un onglet sans jamais finir dans ton CRM).

Cette release règle ça : ton formulaire, ton site, ton CRM. Sans Zapier, sans Make, sans abonnement tiers.

Un module dédié dans /prospection

Un nouveau lien apparaît dans la sidebar prospection : « Formulaires ». Tu peux y créer autant de formulaires que tu veux — un par offre (mariage / corporate / portrait), un par canal (site, Instagram, partenaire), un par campagne. Chaque formulaire a sa propre URL publique de type `helpho.io/f/`, où `` est un identifiant court généré automatiquement (8 caractères, lisibles).

À la création, tu donnes juste un nom interne (« Formulaire site mariage »), Helpho crée tout le reste avec des défauts intelligents : titre « Contactez-moi », message d'intro vide, bouton coral « Envoyer ma demande », 5 champs activés par défaut (nom, email, téléphone, type de prestation, date souhaitée, message).

Personnalisation totale, sans toucher au code

L'éditeur de formulaire est divisé en 4 sections claires :

Général — nom interne du formulaire (visible que par toi) + toggle « Actif » (si désactivé, l'URL publique retourne 404, utile quand tu veux mettre en pause une campagne sans casser ton site).

Apparence — titre affiché en haut, message d'introduction optionnel (300 caractères max), libellé du bouton, couleur du bouton via color picker (par défaut le coral Helpho, mais tu peux mettre ta couleur de marque).

Champs du formulaire — 7 champs disponibles, chacun avec deux toggles indépendants : « Afficher » et « Obligatoire ». Pour le champ « Type de prestation », un éditeur de liste te permet de définir tes propres options (une par ligne) — fini les listes génériques qui ne correspondent pas à ton activité.

Après l'envoi — soit tu affiches un message de confirmation (« Merci ! Je reviens vers vous très vite. »), soit tu rediriges vers une URL custom (`/merci`, `/calendly`, etc.). Le bouton secondaire « Prendre RDV directement » pointe vers ta page de réservation Helpho — désactivé par défaut, à activer si tu veux donner un raccourci aux prospects déjà décidés.

Trois manières d'intégrer (et un guide pour les non-tech)

C'est le point sur lequel on a passé le plus de temps de UX : la majorité des photographes ne sont pas développeurs. Coller du HTML sur leur site web, ça les angoisse. On a donc fait trois choses :

1. On a renommé les sections en langage humain — plus de « Lien direct », « Code iframe », « Script JS » bruts. À la place : « Mettre le formulaire sur ton site » avec un encart « Tu hésites ? Voici la version simple » qui résume en 3 lignes laquelle prendre.

2. On a ajouté des infos-bulles `?` expliquées comme à un enfant de 5 ans :

• *Lien direct* : « C'est l'adresse web de ton formulaire — comme l'adresse de ton site Instagram. Tu la copies et tu la colles où tu veux : dans un email, dans ta bio Insta, sur une carte de visite. »
• *Script* : « Un petit bout de texte magique. Tu le copies, tu le colles dans la page de ton site où tu veux que le formulaire apparaisse. Et hop, le formulaire s'affiche tout seul ! »
• *iframe* : « Une petite fenêtre dans laquelle on glisse ton formulaire. Ça marche partout, même chez les hébergeurs un peu vieux. »

3. On a ajouté un mode d'emploi déplié par plateforme : WordPress (« bloc HTML personnalisé »), Wix (« Intégrer code HTML »), Squarespace (« bloc Code »), Showit/Webflow, et un cas « Je n'ai pas de site web » qui pointe vers le lien direct + QR code.

L'embed qui marche vraiment

Techniquement, le script auto-resize utilise un `postMessage` qui notifie le site parent de la hauteur réelle du formulaire à chaque changement (ouverture d'un champ select, message d'erreur, etc.). Le ResizeObserver côté iframe surveille `document.documentElement.scrollHeight` et envoie un événement `helpho-form-resize` au parent qui ajuste `iframe.style.height` automatiquement.

Plus de scroll vertical interne moche dans l'iframe. Plus de hauteur figée qui coupe le bouton de submit.

Le script publie aussi deux événements utiles côté parent :

• `helpho-form-success` quand la soumission est validée — utile pour déclencher un pixel Facebook ou un événement GA4
• `helpho-form-redirect` quand une redirection est configurée — le parent peut décider de l'ouvrir dans le même onglet ou dans un nouvel onglet selon le contexte

Soumission → prospect, en une seconde

Chaque soumission est :

1. Validée côté serveur : tous les champs marqués « obligatoire » sont vérifiés, l'email a un format correct, le téléphone est normalisé (espaces / +33), le message est tronqué à 2000 caractères

2. Filtrée par honeypot : si le champ caché `hp_website` est rempli (les bots remplissent tous les champs), la requête est silencieusement ignorée — on ne renvoie pas d'erreur pour ne pas leur donner d'info

3. Rate-limitée par IP : 5 soumissions max par heure sur la même IP, pour éviter les flood

4. Insérée dans la table `clients` avec statut prospect, source = `formulaire:`, et message structuré

5. Optionnellement notifiée par email au photographe (Resend, template HTML)

Le prospect tombe immédiatement dans la colonne « Nouveau » de ton Kanban prospection avec un badge « 📩 Formulaire » qui te dit d'où il vient. Tu vois en un coup d'œil quels prospects sont chauds (formulaire = a fait l'effort de remplir 5 champs) vs les contacts froids.

Bouton secondaire « Prendre RDV directement »

Bonus pour les visiteurs qui ne veulent pas remplir un formulaire et préfèrent caler un créneau directement : un toggle dans l'éditeur affiche un second bouton sous le formulaire qui pointe vers ta page de réservation publique (`helpho.io/r/`).

Détection auto côté admin : si ton widget de réservation est actif et que ton portal_slug est configuré, un badge vert te montre l'URL exacte. Sinon, alerte ambre avec lien vers les paramètres pour l'activer en 30 secondes.

C'est la combinaison qui convertit le mieux : un prospect indécis remplit le formulaire (qualif douce, tu reviens vers lui), un prospect chaud bascule sur la réservation directe (conversion immédiate).

Stats par formulaire

Sur la liste `/prospection/formulaires`, chaque carte affiche :

• Nombre de vues — incrémenté à chaque ouverture de la page publique (cookie de 30 minutes pour éviter les double-comptes sur reload)
• Nombre de soumissions — chaque création de prospect réussie
• Taux de conversion — soumissions / vues, calculé automatiquement

Tu vois immédiatement quel formulaire convertit le mieux et où optimiser. Astuce qui marche : un titre + 3 champs (nom, email, message) convertit toujours mieux qu'un formulaire à 8 champs — l'interface te permet de tester les deux en parallèle (un par offre).

Sécurité et conformité

• Honeypot + rate-limiting IP côté API
• Pas de stockage de cookies sur le formulaire public — RGPD compatible sans bandeau
• Pas d'analytics tiers sur la page publique — ton visiteur n'est pas tracé par Helpho
• Détection des emails jetables au niveau de la création du prospect (yopmail, mailinator, etc.) — option pour bloquer ou marquer comme suspect
• RLS strict sur la table `prospect_forms` : chaque photographe ne voit que ses propres formulaires, et la résolution slug → form passe par service_role en lecture seule

Disponible aujourd'hui

Le module Formulaires de contact est inclus dans tous les plans Pro et Pro IA, sans add-on et sans limite de nombre de formulaires créés.

Pour démarrer, va dans Prospection > Formulaires > Nouveau formulaire, donne-lui un nom, customise les champs, et copie le code dans ton site. Compte 2 minutes côté Helpho et 1 minute côté ton site.

Si tu as un Tally / Typeform / Google Form en place actuellement, tu peux les remplacer sans interrompre tes campagnes : crée le formulaire Helpho, mets le code à côté pendant 24 h, vérifie qu'il fonctionne, puis bascule.