Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So fügen Sie einen Hypothekenrechner in WordPress hinzu (Schritt für Schritt)

Ein Hypothekenrechner kann die Effektivität Ihrer Website wirklich steigern. Und ehrlich gesagt, ohne einen Hypothekenrechner auf Ihrer Website verlieren Sie wahrscheinlich potenzielle Kunden an andere Websites.

Wir haben es immer wieder erlebt: Besucher kommen auf Ihre Website, werden neugierig, gehen dann aber woanders hin, um Zahlungen zu berechnen – und kehren oft nie zurück.

Deshalb ist es so wichtig, einen eigenen Rechner zu haben. Er hilft, Besucher zu binden und sie zu Leads zu machen. 🙌

In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen genau, wie Sie einen Hypothekenrechner zu Ihrer WordPress-Website hinzufügen. Wir haben die zuverlässigsten und benutzerfreundlichsten Methoden gefunden, die für jeden funktionieren, unabhängig von Ihren technischen Kenntnissen.

So fügen Sie einen Hypothekenrechner in WordPress hinzu

Warum einen Hypothekenrechner in WordPress hinzufügen?

Ein Hypothekenrechner ermöglicht es Benutzern, Schätzungen für ihre Hypothekenzahlungen zu erhalten, einschließlich Zinssatz und Tilgungsdauer.

Besucher können einfach Informationen wie den Wert ihres Hauses, die Anzahlung, Zinssätze usw. eingeben. Danach berechnet der Rechner, wie viel sie pro Monat zahlen müssen.

Wenn Sie eine Immobilien-Website mit IDX-Immobilienangeboten erstellen, hilft ein Hypothekenrechner auch bei der Lead-Generierung. Besucher können den Rechner nutzen, müssen aber ihre E-Mail-Adresse eingeben, um ihre Ergebnisse zu speichern.

Ein Beispiel für einen Hypothekenrechner auf der Zillow-Website

Dies kann auch Ihre Absprungrate reduzieren, da Besucher nicht auf eine andere Website gehen müssen, um eine Hypothekenberechnung zu erhalten.

Finanzberater, Hypothekenmakler, Banken und persönliche Finanzexperten können ebenfalls davon profitieren, einen Hypothekenrechner zu ihrer Website hinzuzufügen.

Lassen Sie uns nun sehen, wie Sie ganz einfach einen Hypothekenrechner in WordPress erstellen können. Dieses Tutorial zeigt Ihnen zwei anfängerfreundliche Methoden mit zwei verschiedenen Hypothekenrechner-Plugins: WPForms und Formidable Forms.

Sie können diese Schnelllinks verwenden, um zu einem bestimmten Plugin zu springen:

Lass uns anfangen!

Methode 1: Fügen Sie einen einfachen WordPress-Hypothekenrechner mit WPForms hinzu

Die erste Methode ist die Verwendung von WPForms. Mit seinen KI-Tools und über 2.000 Formularvorlagen ermöglicht Ihnen dieses Drag-and-Drop-Formular-Plugin die Erstellung verschiedener Formulare, einschließlich eines Hypothekenrechners.

Diese Methode wird für Personen empfohlen, die einfach nur einen einfachen, aber responsiven Hypothekenrechner ohne zusätzliche Berechnungen für Steuern oder Versicherungen erstellen möchten.

WPForms Hypothekenrechner Formularvorlage

Bei WPBeginner verwenden wir WPForms, um alle Arten von Formularen zu erstellen – von unserem Kontaktformular bis zu unseren jährlichen Leserumfragen. Es ist unser bevorzugtes Werkzeug, und wir empfehlen es sehr. Sehen Sie sich unseren vollständigen WPForms-Testbericht an, um mehr darüber zu erfahren.

Zuerst installieren Sie das Plugin in WordPress.

📝 Hinweis: Obwohl es eine kostenlose Version von WPForms gibt, verwendet dieses Tutorial den Pro-Plan, da er das Addon für Berechnungen enthält. Hier ist ein WPForms-Rabatt, mit dem Sie 50 % auf Ihren Kauf sparen können!

Wenn das erledigt ist, gehen Sie zu WPForms » Einstellungen und fügen Sie Ihren Lizenzschlüssel für den Pro-Plan von Ihrer WPForms-Konto-Seite ein. Klicken Sie dann einfach auf „Schlüssel überprüfen“.

Überprüfung eines WPForms-Lizenzschlüssels

Wählen und passen Sie eine Hypothekenrechner Formularvorlage an

Sobald der Lizenzschlüssel aktiv ist, müssen Sie zu WPForms » Neu hinzufügen navigieren.

Klicken auf Neu hinzufügen in WPForms im WordPress-Admin-Panel

Auf dem nächsten Bildschirm können Sie Ihrem neuen Formular einen Namen geben. Es kann etwas Einfaches wie „Hypothekenrechner-Formular“ sein.

Danach wählen Sie aus, wie Sie das Formular erstellen. Mit WPForms können Sie:

  • eine leere Leinwand verwenden, um Formulare von Grund auf neu zu erstellen
  • Nutzen Sie den KI-Formularersteller, um Formulare sofort mit einer einfachen Eingabeaufforderung zu erstellen
  • eine vorgefertigte Vorlage auswählen.
WPForms KI-Formulare in Aktion

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Vorlage verwenden und sie mit dem Drag-and-Drop-Editor an Ihre Bedürfnisse anpassen.

Scrollen wir also auf der Seite „Einrichtung“ nach unten und verwenden die Suchleiste, um eine Vorlage für einen Hypothekenrechner zu finden.

Die Vorlage für den Hypothekenrechner in WPForms finden

WPForms bietet zwei Vorlagen: Hypothekenrechner-Formular und einfaches Hypothekenrechner-Formular. Beide Vorlagen bieten ähnliche Funktionen, haben aber leicht unterschiedliche Felder.

Die Vorlage für einen einfachen Hypothekenrechner eignet sich am besten für Immobilien-Websites, die potenziellen Käufern helfen möchten, ihre monatliche Hypothekenzahlung schnell zu schätzen.

Auf der anderen Seite bietet die Vorlage für Hypothekenrechner-Formulare eine umfassende Aufschlüsselung der Hypothekendetails, einschließlich der insgesamt gezahlten Zinsen, der gesamten Hypothekenzahlung und des jährlichen Zahlungsbetrags.

Dieses Detailniveau kann für Kunden nützlich sein, die ihre finanziellen Verpflichtungen vollständig verstehen möchten.

Sie können auf „Demo anzeigen“ klicken, um jedes Formular in Aktion zu sehen. Sie können eine der beiden Vorlagen wählen, aber für dieses Tutorial verwenden wir die Vorlage für Hypothekenrechner-Formulare.

Sobald Sie Ihre Wahl getroffen haben, fahren Sie einfach mit der Maus über das Feld und klicken Sie auf „Vorlage verwenden“.

Klicken Sie auf die Schaltfläche Vorlage verwenden in WPForms

In diesem Stadium erscheint ein Popup-Fenster, das besagt, dass Sie das Calculations Addon benötigen.

Klicken Sie einfach auf „Ja, installieren und aktivieren“, um fortzufahren.

Installation und Aktivierung des WPForms Calculations Addons

Sie gelangen nun zum Drag-and-Drop-Formular-Builder. Wie Sie sehen können, sind die Rechnerfelder bereits in der Vorlage enthalten.

Diese spezielle Vorlage enthält Felder, in denen Benutzer den Wert ihres Hauses (Gesamtkosten des Hauses) und ihren Anzahlungsbetrag (wie viel der Käufer beim Kauf einer Immobilie im Voraus bezahlt) eingeben können.

Anpassen der Vorlage für den Hypothekenrechner im WPForms-Builder

Benutzer können auch Schieberegler verwenden, um Informationen zu ihrem Hypothekenzinssatz und ihrer Hypothekenlaufzeit einzugeben.

Nach Eingabe dieser Informationen berechnet der untere Abschnitt automatisch den monatlichen und jährlichen Zahlungsbetrag der Hypothek des Benutzers, die insgesamt gezahlten Zinsen und die gesamten Hypothekenzahlungen.

Der Hypothekenberechnungsbereich in der WPForms Hypothekenrechner Formularvorlage

Sie finden diese Berechnungsformel, indem Sie zu „Feldoptionen“ gehen und im linken Bereich zum Tab „Erweitert“ navigieren. Ganz unten finden Sie das Feld „Formel“.

Wir empfehlen, keine Änderungen an diesem Abschnitt vorzunehmen, es sei denn, Sie sind sich sicher, dass Sie dies tun können. Dennoch bietet WPForms eine Formel-Übersicht für Berechnungen, die Sie bei Bedarf verwenden können.

Die Hypothekenberechnungsformel in der WPForms Hypothekenrechner-Formularvorlage

Wenn Sie Schwierigkeiten mit der Formel haben, können Sie die Funktion KI-Berechnungen verwenden, um sie zu vereinfachen.

Klicken Sie einfach auf die Schaltfläche 'Formel generieren' neben dem Feld 'Formel'.

Klicken Sie auf die Schaltfläche Formel generieren

Dies öffnet ein Chatfenster, in dem Sie beschreiben können, welche Art von Berechnung Sie benötigen, in einfacher Sprache, und die KI generiert sofort die richtige Formel für Sie.

Nun wollen wir das Formular anpassen. Um ein neues Feld hinzuzufügen, gehen Sie zum Abschnitt „Felder hinzufügen“ im linken Bereich. Ziehen Sie dann einfach ein beliebiges Feld in den Formular-Builder.

Hier haben wir ein Feld „Name“ zum Formular hinzugefügt, um den Namen des Benutzers zu erfassen.

Ziehen und Ablegen des Namensfelds zum Formular in WPForms

Um ein Feld anzupassen, klicken Sie einfach darauf, und im linken Bereich wird die Registerkarte „Feldoptionen“ angezeigt. Hier finden Sie drei Registerkarten: Allgemein, Erweitert und Smart Logic.

Wenn Sie die Feldbezeichnung ändern, beschreibenden Text einfügen oder das Feld als Pflichtfeld festlegen möchten, müssen Sie „Allgemein“ auswählen.

Im folgenden Bild haben wir die Beschriftung des Feldes „Hauswert“ in „Immobilienpreis“ geändert und einige zusätzliche Anweisungen hinzugefügt. Wir haben das Feld auch als erforderlich markiert, sodass Benutzer diesen Abschnitt ausfüllen müssen, um ihre Hypothekenzahlungsberechnung zu erhalten.

Konfiguration der allgemeinen Feldoptionen von WPForms

Der Tab „Erweitert“ ist der Ort, an dem Sie Platzhaltertext hinzufügen, die gewünschten CSS-Klassen angeben, die Feldbezeichnung ausblenden und bei Bedarf eine Berechnungsfunktion aktivieren können.

Standardmäßig zeigt das Formular ein „$“-Zeichen an, damit die Benutzer wissen, dass sie ihre Werte in US-Dollar eingeben sollen.

Alternativ können Sie ein Beispiel in die Feldbezeichnung einfügen, z. B. „z. B. 500.000“, damit der Benutzer weiß, wie er den Preis richtig eingibt.

Anpassen des Platzhaltertextes eines Feldes in WPForms

Der Tab „Smart Logic“ ermöglicht es Ihnen, bedingte Logik im Feld zu aktivieren. Dies ist optional, aber eine gute Funktion, um Ihr Hypothekenrechner-Formular ansprechender zu gestalten.

Um es zu verwenden, schalten Sie einfach den Schalter für „Bedingte Logik aktivieren“ ein.

Dann können Sie wählen, ob das Feld basierend auf bestimmten Kriterien angezeigt oder ausgeblendet werden soll. Im folgenden Beispiel haben wir gewählt, das Feld „Immobilienpreis“ anzuzeigen, wenn der Benutzer seine E-Mail-Adresse eingibt.

Sobald Sie mit der Anpassung des Formulars fertig sind, klicken Sie einfach oben rechts auf „Speichern“.

Konfigurieren Sie die Einstellungen des Formulars

Nun wechseln wir zum Tab „Einstellungen“ auf der linken Seite.

Im Tab „Allgemein“ können Sie den Namen des Formulars ändern und oben auf dem Formular eine Beschreibung hinzufügen. Sie können sogar Anweisungen eingeben und einen Call-to-Action hinzufügen, um Benutzer zum Ausfüllen des Formulars zu ermutigen.

Zusätzlich können Sie die Beschriftung und den Verarbeitungstext der Senden-Schaltfläche anpassen.

Konfigurieren der WPForms-Allgemeineinstellungen im Tab „Einstellungen“

Sie möchten auch zum Tab „Spam-Schutz und Sicherheit“ wechseln.

WPForms verfügt bereits über einen Spam-Schutz, der standardmäßig aktiviert ist. Sie können jedoch Akismet für weitere Schutzmaßnahmen aktivieren.

Zusätzlich können Sie eine Mindestanzahl von Sekunden festlegen, die ein Benutzer warten muss, bevor er das Formular absendet. Dies gibt echten Benutzern genügend Zeit, das Formular auszufüllen, aber nicht genug Zeit für einen Spam-Bot, um das Formular schnell abzusenden.

Konfigurieren der Spam-Schutz- und Sicherheitseinstellungen in WPForms

Wenn Sie nach unten scrollen, können Sie auch einen Länderfilter aktivieren, der das Formular auf Benutzer aus bestimmten Ländern beschränkt. Wir empfehlen diese Einstellung, wenn Ihre Immobilien-Website nur in einem bestimmten Land verkauft.

Sobald Sie den Schalter „Länderfilter aktivieren“ umgelegt haben, klicken Sie einfach auf „Zulassen“ unter dem Länderfilter und wählen Sie das Land aus, an das Sie verkaufen.

Sie können auch die Meldung für den Länderfilter anpassen, falls erforderlich.

WPForms' Länderauswahl-Einstellungen

Wenn Sie auf der Seite nach unten scrollen, können Sie spammige Formulareinreichungen auch mit einem CAPTCHA verhindern.

WPForms unterstützt benutzerdefinierte CAPTCHA, reCAPTCHA und hCAPTCHA.

CAPTCHA-Optionen von WPForms

Gehen wir nun zum Tab 'Benachrichtigungen'.

WPForms kann Ihnen jedes Mal eine E-Mail senden, wenn jemand das Formular ausfüllt. Um diese Funktion zu aktivieren, klicken Sie einfach auf „Benachrichtigungen aktivieren“.

🧑‍💻 Pro-Tipp: Um sofort auf neue Formularübermittlungen zu reagieren, sollten Sie sicherstellen, dass diese Nachrichten sicher in Ihrem Posteingang und nicht im Spam-Ordner ankommen.

Mit diesen Worten empfehlen wir die Verwendung eines SMTP-Dienstanbieters , um Ihre E-Mail-Zustellungsraten zu verbessern und das Problem mit WordPress, das keine E-Mails richtig sendet , zu beheben.

E-Mail-Benachrichtigungen in WPForms aktivieren

Sie können den Inhalt der E-Mail nach Bedarf bearbeiten. Darüber hinaus können Sie Bestätigungs-E-Mails nach der Übermittlung eines WordPress-Formulars senden.

Wenn Sie mit diesen Einstellungen zufrieden sind, vergessen Sie nicht, auf „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Betten Sie den Hypothekenkostenrechner auf Ihrer WordPress-Site ein

Sie sind nun bereit, den Hypothekenrechner auf Ihrem WordPress-Blog oder Ihrer Website anzuzeigen. Klicken Sie dazu im oberen Menü auf die Schaltfläche „Einbetten“.

Klicken auf die Schaltfläche „Einbetten“ in WPForms

Jetzt können Sie das Formular entweder zu einer bestehenden Seite hinzufügen oder eine komplett neue Seite erstellen.

Alternativ können Sie einen Shortcode verwenden.

Die Einbettungsoptionen in WPForms

Der Prozess zum Hinzufügen des Formulars zu einer bestehenden oder neuen Seite ist ziemlich ähnlich.

Wenn Sie auf „Bestehende Seite auswählen“ klicken, können Sie die Seite auswählen, die Sie verwenden möchten. Klicken Sie danach auf „Los geht's!“

Auswahl einer vorhandenen Seite zum Einbetten von WPForms

Wenn Sie sich für die Erstellung einer neuen Seite entscheiden, müssen Sie einen Seitentitel eingeben.

Ähnlich wie bei der vorherigen Methode klicken Sie auf „Los geht’s!“, um fortzufahren.

Erstellen einer neuen Seite, um das WPForms-Formular einzubetten

Beide Optionen führen Sie zum Standard-WordPress-Blockeditor.

Klicken Sie hier auf den '+'-Block-Button und wählen Sie den WPForms-Block aus.

Hinzufügen des WPForms-Blocks im Gutenberg-Editor

Öffnen Sie im neuen Block das Dropdown-Menü „Ein Formular auswählen“.

Wählen Sie danach einfach das Formular aus, das Sie zuvor erstellt haben.

Auswahl eines WPForms-Formulars zum Hinzufügen im Block-Editor

Sie sehen nun Ihr neu erstelltes Formular.

In der Seitenleiste der Blockeinstellungen können Sie das Design des Formulars weiter anpassen.

Sie können zum Beispiel die Hintergrundfarbe und den Feldrand ändern. Sie können auch zum WPForms-Builder zurückkehren, indem Sie auf „Formular bearbeiten“ klicken.

Die WPForms-Blockeinstellungen-Seitenleiste im Block-Editor

Wenn Sie mit dem Aussehen des Formulars zufrieden sind, klicken Sie einfach auf 'Aktualisieren' oder 'Veröffentlichen', um die Änderungen live zu schalten.

So sieht unser Hypothekenrechner-Formular aus:

Ein Beispiel dafür, wie ein Hypothekenrechner-Formular aussieht, das mit WPForms erstellt wurde

Wenn Sie ein klassisches, nicht-blockbasiertes WordPress-Theme verwenden, können Sie das Formular auch in einem widget-bereiten Bereich anzeigen.

Gehen Sie einfach zu Darstellung » Widgets und klicken Sie auf die Schaltfläche „+ Block hinzufügen“ in einem beliebigen widget-fähigen Bereich. Sie können nun den WPForms-Block hinzufügen und das gerade erstellte Formular auswählen.

Hinzufügen eines WPForms-Widgets im WordPress-Widget-Editor

Im Widget-Editor können Sie auch die Blockeinstellungen des Hypothekenrechner-Widgets bearbeiten.

Wenn Sie mit dem Aussehen des Formulars zufrieden sind, klicken Sie einfach auf „Aktualisieren“.

Aktualisieren eines Widget-fähigen Bereichs nach dem Hinzufügen des WPForms-Blocks als Widget

Alternativ, wenn diese Methoden nicht funktionieren, können Sie die Shortcode-Methode verwenden, um die Formulare in Seiten, Beiträgen und anderen Vorlagenteilen einzufügen.

Kehren Sie einfach zum WPForms-Editor zurück und klicken Sie im Einbettungs-Popup auf „Shortcode verwenden“.

Sie können dann den Shortcode kopieren und ihn zu jeder Seite, jedem Beitrag oder jedem widget-fähigen Bereich hinzufügen.

Kopieren des WPForms-Formular-Shortcodes

Weitere Informationen finden Sie in unserem Leitfaden zum Hinzufügen eines Shortcodes in WordPress.

Methode 2: Einen erweiterten WordPress-Hypothekenrechner mit Formidable Forms hinzufügen

Diese nächste Methode ist ausgezeichnet, wenn Sie einen erweiterten WordPress-Hypothekenrechner erstellen möchten, der Ihre jährlichen Grundsteuern, Versicherungen und PMI (private Hypothekenversicherung) berücksichtigt.

Sobald das Formular diese Daten zusammen mit dem Hauspreis des Benutzers, dem Darlehensbetrag, der Darlehensdauer und dem Zinssatz hat, kann es die Zahlungsaufschlüsselung des Benutzers anzeigen, die auch als Tilgungsplan bezeichnet wird.

Für diese Methode verwenden wir das Formidable Forms Plugin. Dieses benutzerfreundliche WordPress-Kontaktformular-Plugin verfügt über eine erweiterte Vorlage für Hypothekenrechner, die Sie zu Ihrer Website hinzufügen können.

Wir haben dieses Plugin eingehend geprüft und getestet. Alles darüber finden Sie in unserem detaillierten Formidable Forms-Testbericht!

Formidable Forms

Das Erste, was Sie tun müssen, ist, sowohl das Plugin Formidable Forms Lite als auch Formidable Forms Premium (Business-Plan) zu installieren und zu aktivieren.

Das kostenlose Plugin hat nur begrenzte Funktionen, aber Formidable Forms Pro nutzt es als Basis für seine fortschrittlicheren Funktionen.

Für detaillierte Anweisungen lesen Sie bitte unsere Schritt-für-Schritt-Anleitung unter wie man ein WordPress-Plugin installiert.

Nach der Aktivierung gehen Sie im WordPress-Dashboard zu Formidable » Globale Einstellungen. Hier können Sie auf „Konto verbinden“ klicken.

Aktivierung des Formidable Forms Premium-Lizenzschlüssels

Auf dem nächsten Bildschirm melden Sie sich einfach bei Ihrem Formidable Forms-Konto an.

Formidable Forms wird Sie nun um Erlaubnis bitten, das Pro-Plugin zu installieren. Klicken Sie einfach auf „Formidable Forms Pro verbinden und installieren“, um Ihren Lizenzschlüssel zu aktivieren.

Formidable Forms Pro auf WordPress verbinden und installieren

Jetzt, da Sie Formidable Forms erfolgreich eingerichtet haben, können Sie ein Hypothekenrechner-Formular zu WordPress hinzufügen.

Verwenden Sie die Vorlage für den erweiterten Hypothekenrechner

Gehen Sie zunächst zu Formidable » Forms und klicken Sie dann auf „Neu hinzufügen“.

Erstellen eines neuen Formidable Forms-Formulars in WordPress

Nun erscheint ein Popup, das alle vorgefertigten Vorlagen anzeigt, die Sie auf Ihrer WordPress-Website verwenden können.

Um die Vorlage für die Hypothekenberechnung zu finden, geben Sie einfach „Erweiterter Hypothekenrechner“ in die Suchleiste ein. Bewegen Sie dann den Mauszeiger über die Vorlage und klicken Sie auf „Vorlage verwenden“.

Die Vorlage für den erweiterten Hypothekenrechner in Formidable Forms finden

Sie gelangen nun zum Formidable Forms Builder.

An diesem Punkt können Sie das Formular an Ihre Bedürfnisse anpassen.

Klicken Sie zunächst auf das Feld, das Sie anpassen möchten, und wählen Sie dann die Registerkarte „Feldoptionen“ aus.

Ein bestehendes Feld in WPForms bearbeiten

Von dort aus können Sie die Feldbezeichnung ändern, auswählen, ob das Feld obligatorisch oder optional ist, Platzhaltertext hinzufügen und vieles mehr.

Mit Formidable Forms können Sie auch einen Standardwert in den Rechner einfügen. Dies ermöglicht es den Benutzern, zu sehen, wie ihre Berechnung aussehen könnte.

Bearbeiten des Standardwerts eines Formularfelds in Formidable Forms

Wenn Sie auf eines der Felder im Abschnitt „Finanzanalyse“ klicken, versuchen Sie, die „Erweiterten Optionen“ nicht zu ändern.

Dieser Bereich enthält die Berechnungsformeln. Änderungen daran können den Hypothekenrechner vollständig beschädigen.

Der Abschnitt Finanzanalyse in einem Hypothekenrechner von Formidable Forms

Wenn Sie mit dem Aussehen des Formulars zufrieden sind, klicken Sie einfach oben rechts auf „Speichern“, um Ihre Änderungen zu speichern.

Geben Sie danach einen Namen für Ihr Formular ein, damit Sie es später leicht identifizieren können. Klicken Sie dann auf „Speichern“.

Speichern eines mit Formidable Forms erstellten Formulars

Passen Sie den Stil des Hypothekenrechner-Formulars an

Wechseln wir nun zur Registerkarte „Stil“ im oberen Menü. Hier können Sie ein Design für das Formular auswählen.

Bearbeiten des Stils eines Formidable Forms-Formulars

Wenn Ihnen keine der Stile gefällt, klicken Sie einfach auf die Schaltfläche „+ Neuer Stil“.

Danach erscheint ein Popup. Geben Sie einfach einen Namen für diesen neuen Stil ein und klicken Sie auf „Neuen Stil erstellen“.

Erstellen eines neuen Formidable Forms-Formularstils

Sie werden nun zu einer Seite weitergeleitet, auf der Sie den Formularstil anpassen können.

Ändern Sie gerne die Typografie, das Farbschema, die Schaltflächenstile, Kontrollkästchen usw.

Konfigurieren eines benutzerdefinierten Formularstils in Formidable Forms

Sobald Sie mit dem Design zufrieden sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“ in der oberen rechten Ecke.

Konfigurieren Sie die Formidable Forms-Einstellungen

In diesem Schritt können Sie zum Menü „Einstellungen“ oben navigieren.

Zuerst können Sie den Formular-Titel und die Beschreibung im Tab „Allgemein“ anpassen. Dies könnte ein guter Ort sein, um Anweisungen zur Verwendung des Formulars einzufügen.

Sie können den Text auch mit HTML formatieren.

Konfigurieren der allgemeinen Einstellungen in Formidable Forms

Wenn Sie nach unten scrollen, finden Sie eine Einstellung, die Honeypot und JavaScript aktiviert.

Wir empfehlen, beide Einstellungen zu aktivieren, da sie gefälschte und bösartige Spameinträge verhindern können.

Spam-Schutz in Formidable Forms aktivieren

Im Tab 'Aktionen & Benachrichtigungen' können Sie die Bestätigungs-E-Mail anpassen, die Formidable Forms an den Benutzer sendet.

Sie können entweder eine benutzerdefinierte Dankesnachricht anzeigen, Benutzer zu einer bestimmten URL weiterleiten oder sie auf eine andere Seite senden.

Konfigurieren der Einstellungen für Aktionen und Benachrichtigungen in Formidable Forms

Ein weiterer Tab, den wir uns ansehen empfehlen, ist „Buttons“.

Hier können Sie die Beschriftung und Position der Schaltfläche „Senden“ anpassen. Sie können sogar eine Schaltfläche „Neu starten“ hinzufügen, falls der Benutzer seine Formularübermittlung neu starten möchte.

Schaltflächeneinstellungen in Formidable Forms konfigurieren

Nachdem Sie die Formulareinstellungen konfiguriert haben, klicken Sie einfach auf die Schaltfläche „Aktualisieren“, um Ihre Änderungen zu speichern.

Betten Sie das erweiterte Hypothekenrechner-Formular auf Ihrer Website ein

Jetzt, da Ihr erweiterter Hypothekenrechner-Formular fertig ist, können Sie ihn zu jedem Beitrag, jeder Seite oder jedem Widget-fähigen Bereich hinzufügen.

Klicken Sie zunächst oben rechts auf die Schaltfläche „Einbetten“.

Klicken auf die Schaltfläche „Einbetten“ in Formidable Forms

Sie sehen nun ein Popup, das besagt, dass Sie das Formular auf drei Arten hinzufügen können.

Sie können das Formular zu einer vorhandenen Seite hinzufügen, eine neue Seite erstellen oder einen Shortcode verwenden.

Auswahl einer Methode zum Einbetten eines Formidable Forms-Formulars

Wenn Sie die Option „Vorhandene Seite“ wählen, wählen Sie auf dem nächsten Bildschirm eine Seite aus.

Klicken Sie dann auf „Formular einfügen“.

Auswahl einer Seite, auf der das Formular von Formidable Forms eingefügt werden soll

Wenn Sie sich hingegen für die Option „Neue Seite“ entscheiden, können Sie der neuen Seite einen Namen geben.

Wenn das erledigt ist, klicken Sie auf „Seite erstellen“.

Erstellen einer neuen Seite, um ein Formidable Forms-Formular einzufügen

Mit beiden Optionen fügt Formidable Forms den Formularblock automatisch in den Block-Editor der Seite ein.

Wenn Sie das Formular direkt im Content-Editor bearbeiten müssen, öffnen Sie einfach die Seitenleiste mit den Blockeinstellungen und klicken Sie auf „Zum Formular gehen“.

Hinzufügen und Bearbeiten des Formidable Forms-Blocks im Block-Editor

Wenn Sie fertig sind, klicken Sie entweder auf „Veröffentlichen“ oder „Aktualisieren“.

So sieht unser Hypothekenrechner-Formular von Formidable Forms aus:

Beispiel für den Hypothekenrechner mit Formidable Forms

Alternativ können Sie den Hypothekenrechner über einen Shortcode oder PHP-Code hinzufügen.

Klicken Sie im zuvor angezeigten Einbettungs-Popup auf „Manuell einfügen“.

Die Embed-Formular-Shortcodes und PHP-Code-Optionen zur Anzeige des Formidable Forms-Formulars

Dann können Sie entweder den Shortcode oder den PHP-Code kopieren. Für die erste Option können Sie erneut unseren Artikel lesen, wie Sie einen Shortcode in WordPress hinzufügen.

Was den PHP-Code betrifft, empfehlen wir diese Methode nur, wenn Sie sich mit Code-Schnipseln wohlfühlen. Wir empfehlen die Verwendung von WPCode dafür, da dieses Plugin das Einfügen von Code in WordPress sicher und einfach macht.

WPCode - Das beste WordPress-Plugin für Code-Snippets

Für weitere Informationen können Sie unseren Leitfaden zum Einfügen von Code-Snippets in WordPress lesen: how to insert code snippets in WordPress.

Und um mehr über das Plugin zu erfahren, lesen Sie unseren vollständigen WPCode-Testbericht. Einige unserer Geschäftspartner verwenden es, um benutzerdefinierte Code-Snippets einzufügen und zu verwalten, und es funktioniert außergewöhnlich gut!

Bonus-Ressourcen 🔗: Erweitern Sie Ihre WordPress-Website für Immobilien

Möchten Sie Ihre Immobilien-Website noch besser machen? Von der Gewinnung mehrer Leads bis zur Beschleunigung Ihrer Seiten können Ihnen diese handverlesenen Ressourcen helfen, Ihre WordPress-Website zu erweitern und zu optimieren:

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Hypothekenrechner in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Artikel über die Erstellung eines Autokredit- oder Ratenzahlungsrechners in WordPress und unsere Expertentipps zu den besten Möglichkeiten zur Erstellung interaktiverer Formulare lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

12 CommentsLeave a Reply

  1. Es ist möglich, Dollar in eine andere Währung im Rechner umzurechnen. Z.B. CZK (Tschechische Krone)?

    • WPForms does allow you to change currencies, you would need to check with WPForms’ support for the current currencies available :)

      Admin

      • Vielen Dank für den Rat. Wenn möglich, werde ich mich auf jeden Fall an den Support wenden, um herauszufinden, wie ich die Währung wechseln kann. Leider möchte in der Tschechischen Republik niemand einen Rechner mit Dollar benutzen. Vielen Dank für Ihre Antwort und Ihre Anleitung.

  2. Schöner Artikel, um einen Hypothekenrechner in WordPress hinzuzufügen. Ein Hypothekenrechner ist für Finanzblogs und andere verwandte Websites wirklich von Vorteil, da Besucher nicht auf eine andere Website gehen müssen, um eine Hypothekenberechnung zu erhalten. Das ist ein All-in-One-Erlebnis für Benutzer, das sie länger auf der Seite hält.
    Aber ich möchte fragen, ob benutzerdefinierter CSS-Code auf den Rechner angewendet werden kann, um ihn ansprechender zu gestalten?

    • Ich benutze WP Forms und wenn ich Formulare erstelle, kann ich mein eigenes CSS festlegen. Es gibt eine ziemlich gute Anleitung, wie das direkt auf der WP Forms-Website gemacht wird, wo ich auch Ratschläge erhalten habe. Schauen Sie sich das unbedingt an und Sie werden viel darüber lernen, wie Sie Formulare für sich selbst personalisieren können.

  3. Hallo, ich möchte wissen, ob die Währung in einem anderen Land den Hypothekenrechner beeinflusst? Ich sehe in den Screenshots nur $, aber ich hätte ihn gerne in südafrikanischen Rand (R), ist das möglich?

    • Die Änderung der Währung sollte kein Problem darstellen. Wenn Sie sich an den Support von Formidable Forms wenden, können diese Ihnen bei Fragen zur Einrichtung behilflich sein.

      Admin

  4. Hallo. Da wir mit verschiedenen Banken zusammenarbeiten und jede ihre eigenen Zinssätze hat, ist es möglich, eine Option für die Kunden zu haben, ihre bevorzugte Bank basierend auf ihrem Zinssatz auszuwählen, oder kann ich nur 1 bestimmten vordefinierten Zinssatz verwenden?

    • Sie sollten sich an den Support des Plugins wenden, um die Einzelheiten zu erfahren, und Sie könnten dies wahrscheinlich so einrichten, wie Sie es möchten.

      Admin

    • Abhängig vom Thema könnte es eine Auswirkung haben, aber es sollte keine große Auswirkung sein.

      Admin

Kommentar hinterlassen

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.