> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.fotostudio.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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
4. 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
3. 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.