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

# How to link my website form to Fotostudio

# Connect your own form to Fotostudio

You already have a contact form on your site (WordPress, Webflow, Wix, HTML…) and you want submissions to go directly into Fotostudio? This guide explains how.

**The main advantage:** your form stays 100% on-brand — your colours, your layout, your style. Fotostudio receives the data in the background without ever appearing on your site.

> This method is different from the **iframe**: with the iframe, the Fotostudio form is displayed on your site. Here, it's *your* existing form that sends data to Fotostudio.


## 1. Get your connection URL

Each Fotostudio form has a unique URL. When your form sends data to this URL, Fotostudio automatically creates the lead, triggers your workflows and sends you the usual notification.

To find this URL:
1. Go to **Settings → Forms**
2. Click on the relevant form
3. Open **Get the code → Connect your own form**

This popup also generates a complete HTML form, ready to paste on your site. It already contains all the fields you configured in your Fotostudio form, with the correct `name` attributes. It's the easiest starting point if you're building from scratch or want to check the exact field names.

Your URL looks like:
```
https://app.fotostudio.io/f/abc123def456...
```


## 2. Name your fields

Fotostudio recognises your form fields by their `name` attribute. Use the following names:

| `name` attribute | Saved as |
| ---- |
| `email` | Email |
| `firstname` | First name |
| `lastname` | Last name |
| `phone` | Phone |
| `message` | Message |
| `company` | Company |
| `start_date` | Session date (`YYYY-MM-DD`) |
| `project_type` | Session type ID |
| `place` | Session location |

The code generated in the popup (step 1) lists exactly the fields available for your form.

**Have other fields?** No problem. Any unrecognised field is automatically saved as a note on the contact (e.g. a `budget` field will be saved as-is). Nothing is lost.


## 3. Add an anti-spam (recommended)

Add this invisible field to your form. Bots fill it in, humans don't. Fotostudio silently rejects submissions where this field is filled.

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


## 4. Setup by platform

### Custom HTML site

The simplest method. Add `action` and `method` to your `<form>` tag:

```html
<form action="https://app.fotostudio.io/f/YOUR_TOKEN" method="POST">
  <input type="text"  name="firstname" placeholder="First name" required>
  <input type="text"  name="lastname"  placeholder="Last name" required>
  <input type="email" name="email"     placeholder="Email" required>
  <input type="tel"   name="phone"     placeholder="Phone">
  <textarea           name="message"   placeholder="Your message"></textarea>
  <input type="text"  name="_gotcha"   style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send</button>
</form>
```

After submission, the visitor is redirected to the URL configured in **Form settings → Redirect URL**.


### Webflow

1. Select your **Form** block.
2. In the form settings, enter your Fotostudio URL as the **Action**.
3. Set the **Method** to `POST`.
4. Name each field (the **Name** attribute) according to the table above.
5. Add a text field named `_gotcha`, set its default value to empty and hide it via the visibility options.


### WordPress — Gravity Forms

1. Create your form with the desired fields.
2. Go to **Settings → Webhooks** (requires the Gravity Forms Webhooks add-on).
3. Add a new webhook:
* **URL**: your Fotostudio URL
* **Method**: POST
* **Format**: Form
4. In the **Fields** section, map each Gravity Forms field to its Fotostudio name (`email`, `firstname`, etc.).


### WordPress — WPForms

1. Create your form.
2. In **Settings → Webhooks** (WPForms Pro), add a webhook:
* **Request URL**: your Fotostudio URL
* **Method**: POST
3. Map each field to its Fotostudio name.


### WordPress — Contact Form 7

CF7 does not allow changing the action natively. Install the **CF7 to API** plugin and configure the Fotostudio URL in its settings. Name your fields according to the table above.


### Wix

Wix does not allow modifying the action of a native form. Use **Wix Automations**:

1. Create your form in Wix.
2. Go to **Automations → New Automation**.
3. Trigger: **Form submitted**.
4. Action: **Send a webhook** → enter your Fotostudio URL.
5. Map the Wix fields to the Fotostudio names in the request body.


### Typeform / Tally

These tools have a native webhook integration:

* **Typeform**: Connect → Webhooks → enter your Fotostudio URL
* **Tally**: Integrations → Webhook → enter your Fotostudio URL

Map each question to its corresponding Fotostudio name.


### Squarespace

Squarespace does not allow modifying the action of a native form on basic plans. Two options:

* **Business plan or above**: use an HTML code block with a custom form (see the *Custom HTML site* section above).
* **All plans**: use Make or Zapier to relay submissions to Fotostudio.


## FAQ

**Are duplicate submissions protected against?**
Yes. If the same IP address submits the same form twice within 30 seconds (e.g. double-clicking the button), the second submission is silently ignored.

**Does my iframe keep working?**
Yes, both methods (iframe and external connection) are completely independent. One does not affect the other.

**Can I redirect the visitor after submission?**
Yes. Configure the **Redirect URL** in your Fotostudio form settings. The visitor will be sent there after submitting your external form.