Eigenes Formular mit Fotostudio verbinden

Du hast bereits ein Kontaktformular auf deiner Website (WordPress, Webflow, Wix, HTML…) und möchtest, dass die Einsendungen direkt in Fotostudio landen? Diese Anleitung erklärt dir wie.

Der wichtigste Vorteil: Dein Formular bleibt 100% nach deinen Wünschen gestaltet — deine Farben, dein Layout, dein Stil. Fotostudio empfängt die Daten im Hintergrund, ohne jemals auf deiner Website zu erscheinen.

Diese Methode unterscheidet sich vom iframe: Beim iframe wird das Fotostudio-Formular auf deiner Website angezeigt. Hier schickt dein bestehendes Formular die Daten an Fotostudio.

1. Deine Verbindungs-URL abrufen

Jedes Fotostudio-Formular hat eine eindeutige URL. Wenn dein Formular Daten an diese URL sendet, erstellt Fotostudio automatisch den Lead, löst deine Workflows aus und sendet dir die gewohnte Benachrichtigung.

So findest du diese URL:

1. Gehe zu Einstellungen → Formulare
2. Klicke auf das betreffende Formular
3. Öffne Code abrufen → Eigenes Formular verbinden

Dieses Popup generiert auch einen vollständigen HTML-Code, der direkt auf deiner Website eingefügt werden kann. Er enthält bereits alle Felder, die du in deinem Fotostudio-Formular konfiguriert hast, mit den richtigen name-Attributen. Dies ist der einfachste Ausgangspunkt, wenn du von vorne anfängst oder die genauen Feldnamen überprüfen möchtest.

Deine URL sieht so aus:

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

2. Deine Felder benennen

Fotostudio erkennt die Felder deines Formulars anhand ihres name-Attributs. Verwende folgende Namen:

Der im Popup generierte Code (Schritt 1) listet genau die für dein Formular verfügbaren Felder auf.

Hast du andere Felder? Kein Problem. Nicht erkannte Felder werden automatisch als Notiz am Kontakt gespeichert (z. B. wird ein Feld budget so wie es ist gespeichert). Es geht nichts verloren.

3. Anti-Spam hinzufügen (empfohlen)

Füge dieses unsichtbare Feld zu deinem Formular hinzu. Bots füllen es aus, Menschen nicht. Fotostudio lehnt Einsendungen, bei denen dieses Feld ausgefüllt ist, stillschweigend ab.

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

4. Einrichtung je nach Plattform

Eigene HTML-Website

Die einfachste Methode. Füge action und method zu deinem <form>-Tag hinzu:

<form action="https://app.fotostudio.io/f/DEIN_TOKEN" method="POST">
  <input type="text"  name="firstname" placeholder="Vorname" required>
  <input type="text"  name="lastname"  placeholder="Nachname" required>
  <input type="email" name="email"     placeholder="E-Mail" required>
  <input type="tel"   name="phone"     placeholder="Telefon">
  <textarea           name="message"   placeholder="Deine Nachricht"></textarea>
  <input type="text"  name="_gotcha"   style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Senden</button>
</form>

Nach dem Absenden wird der Besucher zur URL weitergeleitet, die unter Formulareinstellungen → Weiterleitungs-URL konfiguriert ist.

Webflow

1. Wähle deinen Form-Block aus.
2. Gib in den Formulareinstellungen deine Fotostudio-URL als Action ein.
3. Stelle die Method auf POST.
4. Benenne jedes Feld (das Name-Attribut) gemäß der obigen Tabelle.
5. Füge ein Textfeld mit dem Namen _gotcha hinzu, setze seinen Standardwert auf leer und blende es über die Sichtbarkeitsoptionen aus.

WordPress — Gravity Forms

1. Erstelle dein Formular mit den gewünschten Feldern.
2. Gehe zu Einstellungen → Webhooks (erfordert das Gravity Forms Webhooks-Add-on).
3. Füge einen neuen Webhook hinzu:

• URL: Deine Fotostudio-URL
• Methode: POST
• Format: Form

4. Weise im Abschnitt Felder jedem Gravity Forms-Feld seinen Fotostudio-Namen zu (email, firstname usw.).

WordPress — WPForms

1. Erstelle dein Formular.
2. Füge unter Einstellungen → Webhooks (WPForms Pro) einen Webhook hinzu:

• Anfrage-URL: Deine Fotostudio-URL
• Methode: POST

3. Weise jedem Feld seinen Fotostudio-Namen zu.

WordPress — Contact Form 7

CF7 erlaubt es nicht, die Aktion nativ zu ändern. Installiere das Plugin CF7 to API und konfiguriere die Fotostudio-URL in dessen Einstellungen. Benenne deine Felder gemäß der obigen Tabelle.

Wix

Wix erlaubt es nicht, die Aktion eines nativen Formulars zu ändern. Verwende Wix Automations:

1. Erstelle dein Formular in Wix.
2. Gehe zu Automatisierungen → Neue Automatisierung.
3. Auslöser: Formular gesendet.
4. Aktion: Webhook senden → gib deine Fotostudio-URL ein.
5. Weise die Wix-Felder den Fotostudio-Namen im Anfrage-Body zu.

Typeform / Tally

Diese Tools verfügen über eine native Webhook-Integration:

• Typeform: Verbinden → Webhooks → Deine Fotostudio-URL eingeben
• Tally: Integrationen → Webhook → Deine Fotostudio-URL eingeben

Weise jede Frage ihrem entsprechenden Fotostudio-Namen zu.

Squarespace

Squarespace erlaubt es in den Basisplänen nicht, die Aktion eines nativen Formulars zu ändern. Zwei Möglichkeiten:

• Business-Plan oder höher: Verwende einen HTML-Code-Block mit einem benutzerdefinierten Formular (siehe Abschnitt Eigene HTML-Website oben).
• Alle Pläne: Verwende Make oder Zapier, um Einsendungen an Fotostudio weiterzuleiten.

FAQ

Sind doppelte Einsendungen geschützt?

Ja. Wenn dieselbe IP-Adresse dasselbe Formular zweimal innerhalb von 30 Sekunden absendet (z. B. Doppelklick auf die Schaltfläche), wird die zweite Einsendung stillschweigend ignoriert.

Funktioniert mein iframe weiterhin?

Ja, beide Methoden (iframe und externe Verbindung) sind vollständig unabhängig voneinander. Eine beeinflusst die andere nicht.

Kann ich den Besucher nach dem Absenden weiterleiten?

Ja. Konfiguriere die Weiterleitungs-URL in den Einstellungen deines Fotostudio-Formulars. Der Besucher wird nach dem Absenden deines externen Formulars dorthin weitergeleitet.

Aktualisiert am: 19/03/2026