Wie bette ich das Gesuchsformular auf meiner Website ein?

• Das Gesuchsformular kann per iFrame auf der eigenen Website eingebunden werden.
• Die dafür benötigte URL erhalten Sie im Onboarding oder über ein Support-Ticket.
• Die Einbindung ist entweder auf einer eigenen Seite oder innerhalb einer bestehenden Seite möglich (empfohlen).
• Für eine optimale Darstellung ohne doppeltes Scrollen empfehlen wir die Nutzung des iFrame-Resizers.
• Das Formular ist klar standardisiert, kann aber farblich an das eigene Corporate Design angepasst werden.

Die URL zum Gesuchsformular erhalten Sie:

• während des Onboardings oder

• nachträglich über ein Support-Ticket, falls die URL nicht (mehr) vorliegt (siehe Ende des Artikels).

Diese URL ist die Grundlage für jede Einbindung.

In der Praxis haben sich zwei Varianten etabliert:

Variante A: Öffnen auf einer eigenen Seite

Einige Kund:innen verlinken das Gesuchsformular z. B. über einen Button („Jetzt Gesuch anlegen“) auf eine eigene, leere Unterseite, auf der ausschließlich das Formular eingebunden ist.

Vorteile:

• sehr einfache Umsetzung

• klarer Fokus auf das Formular

Variante B: Einbindung in eine bestehende Seite (empfohlen)

Andere Kund:innen binden das Formular direkt in eine bestehende Seite ein, z. B. unter erklärendem Text oder zwischen anderen Inhalten.
In diesem Fall empfehlen wir zusätzlich den Einsatz von iFrame-Resizer, damit es nicht zu einem „Scroll im Scroll“ kommt.

Für die grundlegende Einbindung des Gesuchsformulars können Sie folgenden iFrame verwenden. Er lässt sich direkt in den HTML-Code Ihrer Website einfügen:

<iframe
  class="wohnungshelden-wohnungswunsch-iframe"
  name="embedded-search-request-frame"
  id="search-requests"
  src="URL"
  frameborder="0"
  scrolling="yes"
  style="width: 100%; height: 2530px; overflow: auto;">
</iframe>

Hinweise:

• Ersetzen Sie URL durch die Ihnen bereitgestellte Gesuchsformular-URL.

• Bei dieser einfachen Einbindung kann es zu einem eigenen Scrollbereich innerhalb des iFrames kommen. Für eine optimierte Darstellung empfehlen wir zusätzlich die Nutzung des iFrame-Resizers (siehe nächster Abschnitt).

Ohne zusätzliche Anpassung kann es vorkommen, dass der iFrame einen eigenen Scrollbalken erhält. Um dies zu vermeiden, unterstützt Wohnungshelden aktuell den iFrame-Resizer in Version 4.1.1.

Script einbinden

<script src="https://github.com/davidjbradshaw/iframe-resizer/blob/v4.1.1/js/iframeResizer.min.js"></script>

iFrame mit ID einfügen

<iframe
  id="contactForm"
  src="HIER_IHRE_GESUCHSFORMULAR_URL_EINFUEGEN"
  width="100%"
  style="border:0;"
  scrolling="no">
</iframe>

Resizer initialisieren

<script>
  iFrameResize(
    {
      log: false
    },
    '#contactForm'
  );
</script>

Ergebnis: Die Höhe des Formulars passt sich automatisch an den Inhalt an, sodass Besucher:innen nur einmal auf Ihrer Website scrollen müssen.

Das Gesuchsformular ist bewusst klar und standardisiert aufgebaut, um für Wohnungssuchende eine einfache und verlässliche Nutzung zu gewährleisten.

Für die Einbindung auf Ihrer Website stehen grundlegende gestalterische Anpassungen zur Verfügung:

• Die Farbe von Links im Formular kann angepasst werden

• Die Farbe des Buttons „Gesuch speichern“ kann angepasst werden

So lässt sich das Formular optisch an Ihre Website anlehnen, ohne die gewohnte Nutzerführung zu verändern. Weitere Layout-Elemente sind bewusst einheitlich gehalten. Dadurch fügt sich das Formular neutral in unterschiedliche Websites ein und bleibt für Interessent:innen sofort verständlich.

Sollten Sie Änderungen wünschen, gehen Sie gerne, wie unten beschreiben, auf unseren Support zu.