Articles sur : Les Formulaires de Contact

Comment lier le formulaire de mon site à Fotostudio

Connecter votre propre formulaire à Fotostudio


Vous avez déjà un formulaire de contact sur votre site (WordPress, Webflow, Wix, HTML…) et vous souhaitez que les soumissions arrivent directement dans Fotostudio ? Ce guide vous explique comment faire.


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


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



1. Récupérer votre URL de connexion


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


Pour trouver cette URL :

  1. Allez dans Paramètres → Formulaires
  2. Cliquez sur le formulaire concerné
  3. Ouvrez Obtenir le code → Connecter votre propre formulaire


Cette popup vous génère également un code HTML complet, prêt à coller sur votre site. Il contient déjà tous les champs que vous avez configurés dans votre formulaire Fotostudio, avec les bons attributs name. C'est le point de départ le plus simple si vous partez de zéro ou souhaitez vérifier les noms de champs exacts.


Votre URL ressemble à :

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



2. Nommer vos champs


Fotostudio reconnaît les champs de votre formulaire selon leur attribut name. Utilisez 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 votre formulaire.


Vous avez 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é)


Ajoutez ce champ invisible dans votre 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. Ajoutez action et method à votre balise <form> :


<form action="https://app.fotostudio.io/f/VOTRE_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="Votre 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électionnez votre bloc Form.
  2. Dans les paramètres du formulaire, renseignez l'Action avec votre URL Fotostudio.
  3. Passez la Méthode en POST.
  4. Nommez chaque champ (attribut Name) selon le tableau ci-dessus.
  5. Ajoutez un champ texte nommé _gotcha, définissez sa valeur par défaut à vide et masquez-le via les options de visibilité.



WordPress — Gravity Forms


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



WordPress — WPForms


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



WordPress — Contact Form 7


CF7 ne permet pas de changer l'action nativement. Installez le plugin CF7 to API puis configurez l'URL Fotostudio dans ses réglages. Nommez vos champs selon le tableau ci-dessus.



Wix


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


  1. Créez votre formulaire dans Wix.
  2. Allez dans Automatisations → Nouvelle automatisation.
  3. Déclencheur : Formulaire soumis.
  4. Action : Envoyer un webhook → renseignez votre URL Fotostudio.
  5. Mappez 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 : Connectez → Webhooks → renseignez votre URL Fotostudio
  • Tally : Intégrations → Webhook → renseignez votre URL Fotostudio


Mappez 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 : utilisez un bloc de code HTML avec un formulaire personnalisé (voir la section Site HTML ci-dessus).
  • Tous plans : utilisez 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-elle 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. Configurez l'URL de redirection dans les paramètres de votre formulaire Fotostudio. Le visiteur y sera renvoyé après avoir soumis votre formulaire externe.




Mis à jour le : 19/03/2026

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

Partagez vos commentaires

Annuler

Merci !