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

Ein Hypothekenrechner beantwortet die Frage, mit der Ihre Besucher tatsächlich gekommen sind: Was würde dieses Haus jeden Monat kosten? Ohne einen verlassen sie Ihre Seite, um die Mathematik auf der Website einer Bank durchzuführen.

Es ist auch ein natürlicher Lead-Magnet für Immobilienmakler, Broker und Kreditgeber. Fragen Sie nach einem Namen und einer E-Mail-Adresse zusammen mit den Darlehensdetails, und jede Berechnung wird zu einem Kontakt, den Sie nachverfolgen können.

In diesem Artikel zeigen wir Ihnen drei Möglichkeiten, einen Hypothekenrechner in WordPress hinzuzufügen: ein kostenloser Einbettungscode ohne Plugin, ein kostenloses Plugin, das direkt in WordPress läuft, und ein Formularersteller, der bei jeder Berechnung einen Lead erfasst.

Welche Methode sollten Sie verwenden?

Auswählen	Am besten für	Preise
mortgagecalculator.org Einbettungscode	Ein schneller Rechner ohne Plugin	Kostenlos
Responsiver Hypothekenrechner	Ein Rechner, der direkt in WordPress funktioniert und Ihre eigene Währung unterstützt	Kostenlos
WPForms	Erfassung eines Leads bei jeder Berechnung	Pro-Tarif und höher

Methode 1: Kostenlosen Hypothekenrechner einbetten (kein Plugin)

Der einfachste Weg, einen Hypothekenrechner zu erstellen, ist die Verwendung des kostenlosen, einbettbaren Rechners von mortgagecalculator.org. Auf der Seite können Sie Standardwerte für den Hauspreis, den Zinssatz, die Laufzeit des Darlehens, die Grundsteuer, die PMI und die Hausratversicherung festlegen.

Das Tool aktualisiert den Einbettungscode, während Sie diese Einstellungen ändern. Wenn Sie Besucher außerhalb der USA bedienen, können Sie dem Code auch einen Sprachparameter hinzufügen. Zum Beispiel verwendet &lang=en-GB britische Einstellungen, während &lang=de-DE deutsche Einstellungen verwendet.

Sobald Sie mit den Einstellungen zufrieden sind, kopieren Sie den generierten Code.

Öffnen Sie als Nächstes einen Beitrag oder eine Seite in WordPress und fügen Sie einen Custom HTML-Block hinzu. Klicken Sie auf 'HTML bearbeiten', um den generierten Code hinzuzufügen.

Fügen Sie im erscheinenden Popup den Einbettungscode für den Hypothekenrechner ein. Sie sehen dann eine Vorschau auf der rechten Seite. Wenn alles richtig aussieht, klicken Sie auf 'Aktualisieren', um Ihre Änderungen zu speichern.

Klicken Sie abschließend auf die Schaltfläche 'Speichern' oder 'Aktualisieren', um Ihre Änderungen zu veröffentlichen.

So sieht der Rechner im Frontend aus:

Beachten Sie, dass der Rechner auf einem Drittanbieter-Server gehostet wird, sodass Sie ihn nicht an Ihre Website anpassen können. Er unterstützt auch keine Lead-Erfassung.

Wenn Sie den Rechner website-weit anzeigen möchten, z. B. in einer Seitenleiste oder im Footer, können Sie WPCode verwenden, um ihn einzufügen.

Methode 2: Einen einfachen, responsiven Hypothekenrechner hinzufügen

Wenn der Rechner nativ in WordPress und nicht in einem iFrame laufen soll, ist Responsive Mortgage Calculator eine gute kostenlose Wahl. Er hat über 7.000 aktive Installationen und wird aktiv gepflegt.

Installieren und aktivieren Sie zunächst das Plugin. Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins » Plugin hinzufügen und klicken Sie im Kasten des Responsive Mortgage Calculator-Plugins auf 'Jetzt installieren'.

Wenn Sie Hilfe benötigen, sehen Sie sich unseren Leitfaden zur Installation eines WordPress-Plugins an.

Nachdem Sie das Plugin installiert haben, gehen Sie zu Einstellungen » Resp Mortgage Calculator, um Ihre Währung, die Zinsperiode (wie oft Zinsen dem Darlehensbetrag hinzugefügt werden) und den Standardzinssatz festzulegen.

Klicken Sie auf 'Änderungen speichern', um Ihre Einstellungen zu übernehmen.

Danach können Sie den Rechner mit dem Shortcode [mortgagecalculator] zu jeder Seite oder jedem Beitrag hinzufügen oder ihn in einen Widget-Bereich ziehen.

Machen Sie sich keine Sorgen, wenn Sie keine Vorschau sehen. Der Shortcode funktioniert trotzdem, sodass Sie auf 'Speichern' oder 'Aktualisieren' klicken können, um ihn live zu schalten.

Besuchen Sie nun Ihre Website, um ihn in Aktion zu sehen:

Außerdem gibt es einige Einschränkungen zu beachten. Sie können nur einen Rechner pro Seite haben, die Styling-Optionen sind einfach und es gibt keine Felder für Grundsteuer oder Versicherung. Er erfasst auch keine Leads.

Methode 3: Einen Lead-generierenden Hypothekenrechner erstellen

Wenn Sie Leads erfassen möchten, während Besucher Ihren Rechner verwenden, ist WPForms die beste Wahl. Sie können damit neben der Berechnung einen Namen und eine E-Mail-Adresse erfassen. Sie benötigen den Pro-Plan oder höher, der das Calculations-Addon enthält, das diese Vorlagen verwenden.

Bei WPBeginner verwenden wir WPForms für unsere eigenen Formulare und empfehlen es. Mehr erfahren Sie in unserem vollständigen WPForms-Testbericht.

Formular aus einer Vorlage erstellen

Installieren und aktivieren Sie zunächst WPForms und geben Sie Ihren Lizenzschlüssel ein. Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie als Nächstes zu WPForms » Neues Formular und benennen Sie Ihren Hypothekenrechner. WPForms bietet einige Vorlagen für Hypothekenrechner:

• Einfacher Hypothekenrechner, der am besten geeignet ist, wenn Sie nur eine schnelle Schätzung der monatlichen Zahlung wünschen.
• Hypothekenrechner, der auch die gezahlten Gesamtzinsen und den jährlichen Zahlungsbetrag anzeigt.
• Hypotheken-Lead-Generator, der bereits Namens- und E-Mail-Felder enthält. Wenn Sie diese auswählen, können Sie den Lead-Erfassungsschritt unten überspringen.

Wenn Sie lieber eine andere Vorlage verwenden möchten, klicken Sie auf eine Vorlage und dann auf „Vorlage verwenden“.

Ein Popup fordert Sie auf, das Calculations-Addon zu installieren und zu aktivieren. Klicken Sie auf „Installieren und aktivieren“.

WPForms bringt Sie dann zum Drag-and-Drop-Editor. Sie können alle Anpassungsoptionen im linken Bereich und eine Vorschau auf der rechten Seite sehen.

Diese Vorlage enthält bereits die Rechnerfelder und die Formel. Sie finden die Formel, indem Sie auf das Feld „Monatliche Zahlung“ klicken und unter Feldoptionen » Erweitert » Formel nachsehen.

Sie können es so belassen, wenn Sie nur eine Schätzung der monatlichen Zahlung wünschen.

Keine der Vorlagen enthält jedoch Felder für Grundsteuern oder PMI (private Hypothekenversicherung). Wenn Sie diese hinzufügen möchten, müssen Sie zuerst Felder für diese Werte zu Ihrem Formular hinzufügen.

Wenn Sie diese nicht selbst erstellen möchten, enthält die Vorlage Formidable Forms’ Advanced Mortgage Calculator integrierte Felder für Steuern und Versicherungen.

Sie können das Zahlenfeld verwenden, das nur numerische Eingaben akzeptiert, sodass die Formel nicht fehlschlägt, wenn jemand Text eingibt. Ziehen Sie es einfach aus dem Bereich „Felder hinzufügen“ in den Vorschau-Bereich. Ändern Sie dann die Beschriftung im Tab „Feldoptionen“.

Wiederholen Sie diesen Schritt für alle zusätzlichen Felder, die Sie benötigen.

Sobald Sie die Felder hinzugefügt haben, klicken Sie auf das Feld „Monatliche Zahlung“, um die neue Formel einzurichten. Klicken Sie dann neben dem Formelfeld auf „Formel generieren“ und beschreiben Sie, wie Sie diese in die Berechnung einbeziehen möchten.

Zum Beispiel: „Addieren Sie die jährliche Grundsteuer und PMI zur monatlichen Hypothekenzahlung. Teilen Sie die jährliche Grundsteuer durch 12. Berechnen Sie die monatliche PMI, indem Sie den Darlehensbetrag mit dem PMI-Satz multiplizieren und durch 12 teilen.“

Sobald die KI die Formel für Sie generiert hat, klicken Sie auf „Formel einfügen“.

Klicken Sie dann im Editor auf den Link „Formel validieren“, um sicherzustellen, dass alles gut funktioniert.

Lead-Erfassung und Benachrichtigungen hinzufügen

Beide Vorlagen enthalten bereits ein E-Mail-Feld. Um den Lead zu erfassen, ziehen Sie auch ein „Name“-Feld auf das Formular.

Wechseln Sie als Nächstes zur Registerkarte „Benachrichtigungen“ und stellen Sie sicher, dass Benachrichtigungen aktiviert sind, damit Sie jedes Mal eine E-Mail erhalten, wenn jemand das Formular ausfüllt.

WPForms verfügt standardmäßig über einen Spamschutz. Und da diese Benachrichtigungen wichtig sind, empfehlen wir einen SMTP-Dienst, damit sie nicht im Spam landen. Sehen Sie sich unsere Anleitung an, wenn WordPress keine E-Mails sendet.

Den Rechner einbetten

Jetzt ist es an der Zeit, Ihren Lead-generierenden Hypothekenrechner einzubetten.

Klicken Sie im oberen Menü auf „Einbetten“. Sie können das Formular dann zu einer vorhandenen oder neuen Seite hinzufügen oder den Shortcode kopieren. Wenn Sie „Vorhandene Seite“ wählen, wählen Sie im nächsten Popup die Seite aus, auf der Sie Ihren Rechner einbetten möchten. Dies führt Sie zum Seiten-Editor.

Klicken Sie im Editor auf die Schaltfläche „+“, um den WPForms-Block hinzuzufügen. Danach können Sie Ihren Lead-generierenden Hypothekenrechner aus dem Dropdown-Menü auswählen.

WordPress lädt dann Ihren Hypothekenrechner im Editor. Wenn Sie möchten, können Sie Ihr Formular im rechten Bereich anpassen und gestalten. Klicken Sie auf „Speichern“ oder „Aktualisieren“, wenn Sie fertig sind.

Sehen Sie sich unsere Anleitung zum Hinzufügen eines Shortcodes in WordPress an, wenn Sie einen Shortcode bevorzugen.

Das ist alles! Sie haben erfolgreich einen Lead-generierenden Hypothekenrechner erstellt:

Bevor Sie die Seite teilen, führen Sie selbst eine Testberechnung durch und prüfen Sie, ob der Eintrag unter WPForms » Einträge erscheint und ob die Benachrichtigungs-E-Mail ankommt.

Wenn Sie Grundsteuer, Versicherung und PMI vorab erstellt haben möchten, anstatt sie mit „Formel generieren“ hinzuzufügen, enthält die Vorlage „Erweiterter Hypothekenrechner“ von Formidable Forms diese. Details finden Sie auf unserer Seite Formidable Forms Rechner.

FAQ: Hypothekenrechner in WordPress hinzufügen

Welche Elemente sind für einen Hypothekenrechner unerlässlich?

Ein grundlegender Hypothekenrechner benötigt den Darlehensbetrag (Hauspreis oder Hypothekenbetrag), den Zinssatz (Jahresprozentsatz), die Laufzeit des Darlehens (z. B. 15 oder 30 Jahre) und eine Möglichkeit, die monatliche Zahlung zu berechnen und anzuzeigen. Einige Rechner enthalten auch Felder für Grundsteuern, Versicherungen oder HOA-Gebühren, aber diese sind optional.

Kann ich die Währung von Dollar ändern?

Ja, alle drei Methoden können andere Währungen unterstützen, aber der Prozess ist unterschiedlich. Bei der kostenlosen Einbettung fügen Sie einen Sprachcode wie &lang=en-GB zum Einbettungscode hinzu. Mit dem Responsive Mortgage Calculator können Sie die Währung unter Einstellungen » Resp Mortgage Calculator festlegen.

Gehen Sie mit WPForms zu WPForms » Einstellungen, öffnen Sie die Registerkarte „Zahlungen“ und wählen Sie Ihre Währung aus dem Dropdown-Menü aus. Berechnete Felder verwenden diese Einstellung.

Funktioniert dies mit Elementor oder anderen Page Buildern?

Ja. Sie können den Shortcode oder den Einbettungscode in das Shortcode- oder HTML-Widget Ihres Page Builders einfügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Hypothekenrechner in WordPress hinzufügen. Möchten Sie Ihre Immobilien-Website noch besser machen? Diese handverlesenen Ressourcen können helfen:

• Beste WordPress-Immobilien-Plugins
• Beste Immobilien-WordPress-Themes für Makler
• So erstellen Sie eine IDX-Immobilien-Website mit WordPress
• Der ultimative WordPress-Leitfaden für lokales SEO zur Steigerung der Rankings

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.