Zum Inhalt
Anmelden Kostenlos testen
Einbau

Einfügen, speichern, fertig

Ein fertiger Link ganz ohne Code, oder zwei Zeilen an der richtigen Stelle.

Kostenlos starten
Kinderleicht

So kommt ANNA auf Ihre Website.

Ein Assistent führt Sie Schritt für Schritt. Sechs Fragen, und Ihr Formular steht.

  1. Ihre RechtstexteWo stehen Ihre Datenschutzerklärung und Ihr Impressum?
  2. Ihre LeistungenWas soll im Formular zur Auswahl stehen?
  3. Ihre VollmachtWomit sollen Ihre Interessenten unterschreiben?
  4. Wohin die Anfragen gehenAn welche Adresse sollen die Anfragen?
  5. Ihre FarbeIn welcher Farbe soll Ihr Formular auftreten?
  6. Auf Ihre WebsiteAuf welcher Website soll das Formular stehen?
Jetzt einrichten

Der einfachste Weg braucht keinen Code.

Als Link und QR‑Code

Ihr Formular hat eine eigene Adresse.

Vermessungsbüro MustermannMusterstadt
Anfrage mit dem Handy

Mitten auf Ihrer Seite

Das Formular steht direkt im Inhalt, etwa auf Ihrer Seite »Anfrage« oder »Kosten«.

Das Formular eingebettet in eine Beispiel-Website

Als Popup

Ein Klick, und das Formular öffnet sich über der Seite, ohne dass jemand die Seite verlässt.

Das Formular als Popup über einer Beispiel-Website

Ihre Farbe, Ihre Schrift.

ANNA übernimmt das Erscheinungsbild Ihres Büros. Wählen Sie eine Farbe und sehen Sie, wie das Formular reagiert.

Akzentfarbe

Hintergrund
Schrift
Ecken

Farbe, Schrift und Texte passen Sie in jedem Tarif an. Hier wird nichts gespeichert.

Anfrageformular öffnenDas echte Formular als eigene Seite

Live‑Vorschau im Formular

Für Ihre Webagentur: Code und Anleitungen

Code je Weg

Dafür gehören zwei Zeilen an die Stelle, an der das Formular stehen soll. Statt IHRE‑KENNUNG steht dort später die Kennung Ihres Büros. Bei Fragen hilft unser Support.

Mitten auf Ihrer Seite

Statt IHRE‑KENNUNG steht dort später die Kennung Ihres Büros, die bekommen Sie von uns.

Eingebettet 
<div data-anfrage-buero="IHRE-KENNUNG">
  <a href="https://app.frag-anna.de/b/IHRE-KENNUNG">Anfrage stellen</a>
</div>
<script src="https://app.frag-anna.de/einbau.js" async></script>

Als Popup

Ein Knopf auf jeder Leistungsseite. Probieren Sie es:

Kosten berechnen und anfragen

Popup 
<a href="https://app.frag-anna.de/b/IHRE-KENNUNG" data-anfrage-fenster="IHRE-KENNUNG">Kosten berechnen und anfragen</a>
<script src="https://app.frag-anna.de/einbau.js" async></script>

Baukästen

Schritt für Schritt in Ihrem Baukasten.

Die Schritte folgen den Hilfeseiten der Anbieter, Stand . Oberflächen ändern sich. Wenn etwas anders aussieht, hilft unser Support.

WordPressEingebettet
  1. Seite im Block‑Editor öffnen und über den Block‑Inserter den Block »Custom HTML« (Individuelles HTML) einfügen. Schneller: in einem leeren Absatz /html tippen.
  2. Den Einbau‑Code in das Feld einfügen.
  3. Seite aktualisieren.

Skripte bleiben nur erhalten, wenn Ihr Benutzer das Recht »unfiltered_html« hat. Das haben auf einer einzelnen Website Administratoren und Redakteure.

Quelle: WordPress-Dokumentation »Custom HTML«, abgerufen am

WixDirekt‑Link als Button
  1. Einen Button oder Text auf der Seite einfügen.
  2. Als Link die eigene Adresse Ihres Formulars eintragen.
  3. Seite veröffentlichen.

Das Element »HTML einbetten« von Wix läuft laut Wix in einem abgeschotteten Rahmen ohne Zugriff auf die übrige Seite. Deshalb empfehlen wir bei Wix den Direkt‑Link. Eine eingebettete Lösung testen wir gern gemeinsam mit Ihnen.

Quelle: Wix‑Hilfe »Eine Website oder ein Widget einbetten«, abgerufen am

Jimdo CreatorEingebettet
  1. Im Jimdo‑Konto die Website öffnen und »Bearbeiten« klicken.
  2. »Inhalt hinzufügen« und dann »Weitere Inhalte und Add‑ons« wählen.
  3. Das Element »Widget/HTML« auswählen, den Einbau‑Code einfügen und »Speichern« klicken.

Im neueren Jimdo Website Builder (Dolphin) lässt sich laut Jimdo kein eigener Code einfügen. Dort nutzen Sie den Direkt‑Link als Button.

Quelle: Jimdo‑Hilfe »Wie füge ich Widgets ein?«, abgerufen am

IONOS MyWebsite NowEingebettet
  1. Im Editor links »Inhalte« wählen, über den Abschnitt fahren und »Elemente« klicken.
  2. »HTML‑Modul« wählen, im Platzhalter auf »HTML‑Modul« und dann auf »Code« klicken.
  3. Den Einbau‑Code einfügen, die Datenschutz-Option wählen und mit »Fertig« abschließen.

Das HTML‑Modul steht laut IONOS nicht in allen Tarifen zur Verfügung. Bei »Zustimmung erforderlich« erscheint das Formular erst nach einer Einwilligung. ANNA selbst setzt keine Cookies und lädt nichts von Dritten.

Quelle: IONOS‑Hilfe »Verwenden von HTML und JavaScript in MyWebsite Now«, abgerufen am

SquarespaceEingebettet
  1. Seite bearbeiten, »Block hinzufügen« oder »+« klicken und »Code« wählen.
  2. Über das Stiftsymbol den Block öffnen und bei »Typ« die Option »HTML« wählen.
  3. Den Einbau‑Code einfügen und speichern.

JavaScript in Code‑Blöcken geht laut Squarespace nur in bestimmten Abos (unter anderem Core, Plus, Advanced, Business). In den übrigen Abos nutzen Sie den Direkt‑Link. Angemeldet zeigt Squarespace eingebetteten Code mitunter nicht an.

Quelle: Squarespace-Hilfe »Code‑Blöcke«, abgerufen am

HTML von HandEingebettet oder Popup
  1. Den Einbau‑Code an die Stelle im HTML setzen, an der das Formular erscheinen soll.
  2. Für das Popup reicht ein Link mit data-anfrage-fenster an beliebiger Stelle, dazu einmal das Skript.
  3. Datei hochladen und die Seite im Browser prüfen.

Das Skript darf mehrfach auf einer Seite stehen, es lädt nur einmal.

Genannte Namen sind Marken der jeweiligen Anbieter. Die Anleitungen folgen deren Hilfeseiten.

Farbe und Aussehen

Farbe und Schrift legt das Büro bei der Einrichtung fest. Das Formular übernimmt danach das Aussehen Ihrer Seite.

Farbe ausprobieren

Sicherheit

Freigeschaltete Websites

Der Rahmen sendet Content-Security-Policy: frame‑ancestors mit den Websites, die das Büro freigeschaltet hat. Auf jeder anderen Website bleibt das Formular leer. So kann niemand das Formular eines Büros auf fremden Seiten zeigen. Nennen Sie uns deshalb alle Adressen, auch Testumgebungen.

Strenge CSP auf Ihrer Website

Hat Ihre Website eine eigene Content-Security-Policy, ergänzen Sie den Dienst von ANNA:

script-src … https://app.frag-anna.de;
frame-src … https://app.frag-anna.de;

ANNA setzt Stile nur am eigenen Element und lädt keine weiteren Quellen in Ihre Seite.

Datenschutz­erklärung und Cookies

Keine Cookies, nichts von Dritten. Ob Ihre Website aus anderen Gründen ein Cookie‑Banner braucht, hängt von den übrigen Diensten auf Ihrer Seite ab. In die Datenschutzerklärung der Website gehört ein Abschnitt zur Einbindung.

Datenschutz und Sicherheit

Ereignisse

Der Rahmen meldet Zustände als DOM‑Ereignisse am iframe. Sie steigen im Dokument auf und enthalten nie Personendaten.

  • anfrage:bereit Formular geladen
  • anfrage:hoehe Höhe angepasst
  • anfrage:schritt Schritt gewechselt
  • anfrage:gesendet Anfrage abgeschickt
  • anfrage:schliessen Popup geschlossen
  • anfrage:fehler Formular nicht erreichbar
document.addEventListener("anfrage:gesendet", function () {
  // zum Beispiel eigene Dankeseite zeigen
});

Häufige Fragen

Muss ich meine Website umbauen?

Nein. Sie setzen zwei Zeilen Code an die Stelle, an der das Formular erscheinen soll, oder verlinken einfach die eigene Seite des Formulars. Die Höhe passt sich an, und das Formular verändert nichts am Aussehen Ihrer Website. Oder Sie leiten Code und Anleitung an Ihre Webagentur weiter.

Wie baue ich ANNA in WordPress, Wix oder Jimdo ein?

Mit einem kurzen Code in einem HTML‑Block oder als Link. Die Anleitungen für WordPress, Wix, Jimdo, IONOS und Squarespace stehen oben unter Baukästen.

Unsere Website betreut eine Agentur. Was braucht sie?

Den Einbau‑Code und die Adresse Ihrer Website. Diese Adresse schalten wir frei, denn nur freigeschaltete Websites dürfen Ihr Formular zeigen. Hat Ihre Website strenge Sicherheitsregeln, ergänzt die Agentur zwei Einträge. Was genau, steht oben unter Sicherheit.

Geht es auch ohne Website?

Ja. Jedes Formular hat eine eigene Adresse, die Sie in die E-Mail-Signatur, ins Google-Unternehmensprofil oder als QR‑Code aufs Briefpapier setzen können. Der Interessent sieht dann das Formular als eigene Seite in Ihren Farben.

Fragen zum Einbau?

Wir gehen ihn mit Ihnen oder Ihrer Webagentur durch.

Gespräch vereinbaren Zu den Preisen