Articles sur : Les Formulaires de Contact
Cet article est aussi disponible en :

Comment lier le formulaire de mon site à Fotostudio

Connecter ton propre formulaire à Fotostudio


Tu as déjà un formulaire de contact sur ton site (WordPress, Webflow, Wix, HTML…) et tu veux que les soumissions arrivent directement dans Fotostudio ? Ce guide t’explique comment faire.


L'avantage principal : ton formulaire reste 100 % à ton image : tes couleurs, ta mise en page, ton style. Fotostudio reçoit les données en arrière-plan sans jamais s'afficher sur ton site.


Cette méthode est différente de l'iframe : avec l'iframe, c'est le formulaire Fotostudio qui est affiché sur ton site. Ici, c'est ton formulaire existant qui envoie ses données à Fotostudio.



1. Récupérer ton URL de connexion


Chaque formulaire Fotostudio dispose d'une URL unique et secrète. Lorsque ton formulaire envoie ses données vers cette URL, Fotostudio crée automatiquement le prospect, déclenche tes workflows et t’envoie la notification habituelle.


Pour trouver cette URL :

  1. Va dans Paramètres → Formulaires
  2. Clique sur le formulaire concerné
  3. Ouvre Obtenir le code → Connecter ton propre formulaire


Cette popup génère aussi un code HTML complet, prêt à coller sur ton site. Il contient déjà tous les champs configurés dans ton formulaire Fotostudio, avec les bons attributs name. C’est le point de départ le plus simple si tu pars de zéro ou veux vérifier les noms exacts des champs.


Ton URL ressemble à :

https://app.fotostudio.io/f/abc123def456...



2. Nommer tes champs


Fotostudio reconnaît les champs de ton formulaire selon leur attribut name. Utilise les noms suivants :


Attribut name

Donnée enregistrée

email

Email

firstname

Prénom

lastname

Nom

phone

Téléphone

message

Message

company

Société

start_date

Date de séance (YYYY-MM-DD)

project_type

ID du type de séance

place

Lieu de la séance


Le code généré dans la popup (étape 1) liste exactement les champs disponibles pour ton formulaire.


Tu as d'autres champs ? Pas de problème. Tout champ non reconnu est automatiquement enregistré en note sur le contact (ex. un champ budget sera sauvegardé tel quel). Rien n'est perdu.



3. Ajouter un anti-spam (recommandé)


Ajoute ce champ invisible dans ton formulaire. Les bots le remplissent, les humains non. Fotostudio rejette silencieusement les soumissions où ce champ est rempli.


<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">



4. Configuration par plateforme


Site HTML personnalisé


La méthode la plus simple. Ajoute action et method à ta balise <form> :


<form action="https://app.fotostudio.io/f/TON_TOKEN" method="POST">
<input type="text" name="firstname" placeholder="Prénom" required>
<input type="text" name="lastname" placeholder="Nom" required>
<input type="email" name="email" placeholder="Email" required>
<input type="tel" name="phone" placeholder="Téléphone">
<textarea name="message" placeholder="Ton message"></textarea>
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
<button type="submit">Envoyer</button>
</form>


Après soumission, le visiteur est redirigé vers l'URL configurée dans Paramètres du formulaire → URL de redirection.



Webflow


  1. Sélectionne ton bloc Form.
  2. Dans les paramètres du formulaire, renseigne l'Action avec ton URL Fotostudio.
  3. Passe la Méthode en POST.
  4. Nomme chaque champ (attribut Name) selon le tableau ci-dessus.
  5. Ajoute un champ texte nommé _gotcha, définis sa valeur par défaut à vide et masque-le via les options de visibilité.



WordPress — Gravity Forms


  1. Crée ton formulaire avec les champs souhaités.
  2. Va dans Paramètres → Webhooks (nécessite l'addon Webhooks de Gravity Forms).
  3. Ajoute un nouveau webhook :
  • URL : ton URL Fotostudio
  • Méthode : POST
  • Format : Form
  1. Dans la section Champs, mappe chaque champ Gravity Forms vers son nom Fotostudio (email, firstname, etc.).



WordPress — WPForms


  1. Crée ton formulaire.
  2. Dans Paramètres → Webhooks (WPForms Pro), ajoute un webhook :
  • URL de la requête : ton URL Fotostudio
  • Méthode : POST
  1. Mappe chaque champ vers son nom Fotostudio.



WordPress — Contact Form 7


CF7 ne permet pas de changer l'action nativement. Installe le plugin CF7 to API puis configure l'URL Fotostudio dans ses réglages. Nomme tes champs selon le tableau ci-dessus.



Wix


Wix ne permet pas de modifier l'action d'un formulaire natif. Utilise Wix Automations :


  1. Crée ton formulaire dans Wix.
  2. Va dans Automatisations → Nouvelle automatisation.
  3. Déclencheur : Formulaire soumis.
  4. Action : Envoyer un webhook → renseigne ton URL Fotostudio.
  5. Mappe les champs Wix vers les noms Fotostudio dans le corps de la requête.



Typeform / Tally


Ces outils disposent d'une intégration webhook native :


  • Typeform : Connecte → Webhooks → renseigne ton URL Fotostudio
  • Tally : Intégrations → Webhook → renseigne ton URL Fotostudio


Mappe chaque question vers son nom Fotostudio correspondant.



Squarespace


Squarespace ne permet pas de modifier l'action d'un formulaire natif sur les plans de base. Deux options :


  • Plan Business ou supérieur : utilise un bloc de code HTML avec un formulaire personnalisé (voir la section Site HTML ci-dessus).
  • Tous plans : utilise Make ou Zapier pour relayer les soumissions vers Fotostudio.



FAQ


Les soumissions en double sont-elles protégées ?

Oui. Si la même adresse IP soumet le même formulaire deux fois en moins de 30 secondes (ex. double-clic sur le bouton), la deuxième soumission est ignorée silencieusement.


Mon iframe continue-t-il de fonctionner ?

Oui, les deux méthodes (iframe et connexion externe) sont totalement indépendantes. L'une n'affecte pas l'autre.


Puis-je rediriger le visiteur après soumission ?

Oui. Configure l'URL de redirection dans les paramètres de ton formulaire Fotostudio. Le visiteur y sera renvoyé après avoir soumis ton formulaire externe.

Mis à jour le : 26/03/2026

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !