Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man einen Hypothekenrechner in WordPress einfügt (Schritt für Schritt)

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Möchten Sie einen Hypothekenrechner in WordPress hinzufügen?

Wenn Sie eine Immobilien- oder Finanzwebsite betreiben, können Sie Ihren Besuchern mit einem Hypothekenrechner zeigen, ob sie sich die von Ihnen angebotenen Immobilien leisten können. Dies kann die Besucher länger auf Ihrer Website halten und Ihnen helfen, mehr Immobilien zu verkaufen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen Hypothekenrechner in WordPress hinzufügen können.

How to Add a Mortgage Calculator in WordPress

Warum einen Hypothekenrechner in WordPress hinzufügen?

Mit einem Hypothekenrechner können die Nutzer Schätzungen für ihre Hypothekenzahlungen, den Zinssatz und die Tilgungsdauer erhalten.

Die Besucher können einfach Informationen wie den Wert ihres Hauses, die Anzahlung, die Zinssätze und so weiter eingeben. Danach berechnet der Hypothekenzahlungsrechner anhand der eingegebenen Daten, wie viel sie pro Monat zahlen müssen.

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

An example of a mortgage calculator in the Zillow website

Es kann auch Ihre Absprungrate verringern, da die Besucher nicht eine andere Website besuchen müssen, um eine Hypothekenberechnung zu erhalten.

Andere Personen, die von einem Hypothekenrechner auf ihren Websites profitieren können, sind Finanzberater, Hypothekenmakler oder Banken sowie Lehrer für persönliche Finanzen.

Werfen wir also einen Blick darauf, wie man ganz einfach einen Hypothekenrechner in WordPress erstellen kann. Dieses Tutorial zeigt Ihnen zwei anfängerfreundliche Methoden mit zwei verschiedenen Hypothekenrechner-Plugins: WPForms und Formidable Forms.

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

Methode 1: Hinzufügen eines einfachen WordPress-Hypothekenrechners mit WPForms

Die erste Methode ist die Verwendung von WPForms. Mit seinen mehr als 1700 Formularvorlagen ist dieses Drag-and-Drop-Formular-Plugin perfekt für die Erstellung verschiedener Formulare, einschließlich eines Hypothekenrechners, für unterschiedliche Arten von Websites.

Diese Methode empfiehlt sich für Personen, die nur einen einfachen, aber reaktionsschnellen Hypothekenrechner ohne zusätzliche Berechnungen für Steuern oder Versicherungen erstellen möchten.

WPForms' mortgage calculator form template

Hinweis: Zwar gibt es eine kostenlose Version von WPForms, wird dieses Tutorial die Pro-Plan zu verwenden, da das ist, wo die Berechnungen Addon verfügbar ist. Hier ist ein WPForms Rabatt können Sie verwenden, um 50% von Ihrem Kauf zu sparen!

Das Wichtigste zuerst: Installieren Sie das Plugin in WordPress.

Einmal getan, gehen Sie zu WPForms “ Einstellungen und geben Sie Ihre Pro Plan Lizenzschlüssel von Ihrem WPForms Konto Seite. Dann klicken Sie einfach auf „Schlüssel überprüfen“.

Verifying a WPForms license key

Wählen Sie eine Hypothekenrechner-Formularvorlage und passen Sie sie an

Da der Lizenzschlüssel nun aktiv ist, müssen Sie zu WPForms “ Add New navigieren.

Clicking Add New in WPForms inside the WordPress admin panel

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

Scrollen Sie nach unten und verwenden Sie die Suchleiste, um eine Vorlage für ein Hypothekenrechnerformular zu finden.

Finding the Mortgage Calculator Form template in WPForms

Sie werden sehen, dass WPForms zwei Vorlagen hat: Hypotheken-Rechner-Formular und Einfaches Hypotheken-Rechner-Formular. Beide Vorlagen bieten ähnliche Funktionen, unterscheiden sich aber durch die spezifischen Felder, die sie enthalten.

Die einfache Hypothekenrechner-Formularvorlage eignet sich am besten für Immobilien-Websites, die potenziellen Käufern helfen wollen, ihre monatliche Hypothek schnell abzuschätzen.

Die Hypothekenrechner-Formularvorlage hingegen bietet eine umfassende Aufschlüsselung der Hypothekendetails, einschließlich der gezahlten Gesamtzinsen, der gesamten Hypothekenzahlung und des jährlichen Zahlungsbetrags. Diese Detailtiefe kann für Kunden nützlich sein, die ihre finanziellen Verpflichtungen vollständig verstehen wollen.

Welchen Rechner Sie verwenden möchten, bleibt Ihnen überlassen, aber zur Veranschaulichung verwenden wir die Vorlage für das Hypothekenrechnerformular.

Sie können auf „Demo anzeigen“ klicken, um zu sehen, wie jedes Formular in Aktion aussieht.

Sobald Sie Ihre Wahl getroffen haben, klicken Sie einfach auf „Vorlage verwenden“.

Clicking the Use Template button in WPForms

In diesem Stadium erscheint ein Popup, das besagt, dass für das Formular das Addon Berechnungen erforderlich ist.

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

Installing and activating the WPForms Calculations addon

Sie gelangen nun zum Drag-and-Drop-Formularersteller. Wie Sie sehen können, hat die Vorlage bereits die Felder für den Taschenrechner für Sie hinzugefügt.

Diese Vorlage enthält Felder für die Eingabe des Hauswertes (Gesamtkosten des Hauses) und der Anzahlung (wie viel der Käufer beim Kauf einer Immobilie im Voraus bezahlt).

Customizing the mortgage calculator form template in the WPForms builder

Über die Schieberegler können die Nutzer auch Informationen über den Zinssatz und die Laufzeit ihres Hypothekendarlehens eingeben.

Sobald das Formular alle Angaben zur Hypothek enthält, werden im unteren Bereich automatisch die monatlichen und jährlichen Hypothekenzahlungen, die Gesamtzinszahlungen und die Gesamthypothekenzahlung des Benutzers berechnet.

The mortgage calculation section in the WPForms mortgage calculator form template

Die Berechnungsformel für diesen unteren Abschnitt finden Sie, indem Sie zu „Feldoptionen“ gehen und im linken Bereich die Registerkarte „Erweitert“ wählen. Ganz unten finden Sie das Feld „Formel“.

Wir empfehlen, keine Änderungen an diesem Abschnitt vorzunehmen, wenn Sie sich nicht sicher sind, dies zu tun. Das heißt, WPForms hat eine Berechnungen Spickzettel Sie verwenden können, wenn Sie Hilfe benötigen.

The mortgage calculation formula in the WPForms mortgage calculator form template

Lassen Sie uns nun das Formular anpassen. Um ein neues Feld hinzuzufügen, gehen Sie zum Abschnitt „Felder hinzufügen“ auf der linken Seite. Ziehen Sie dann einfach ein beliebiges Feld per Drag & Drop in den Formularersteller.

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

Dragging and dropping the Name field to the form in WPForms

Um ein Feld anzupassen, klicken Sie es einfach an. Auf der linken Seite sehen Sie dann die Registerkarte „Feldoptionen“. Es gibt drei Registerkarten, die Sie weiter konfigurieren können: Allgemein, Erweitert und Intelligente Logik.

Was Sie anpassen können, hängt vom Feldtyp ab. Wenn Sie die Feldbeschriftung ändern, einen beschreibenden Text einfügen oder das Feld erforderlich machen wollen, gehen Sie zu „Allgemein“.

Hier haben wir die Bezeichnung des Feldes „Hauswert“ in „Immobilienpreis“ geändert und einen beschreibenden Text für zusätzliche Anweisungen hinzugefügt. Außerdem haben wir das Feld zur Pflichtangabe gemacht, so dass die Benutzer dieses Feld einfügen müssen, um ihre Hypothekenzahlungsberechnung zu erhalten.

Configuring the WPForms' General field options

Auf der Registerkarte „Erweitert“ können Sie Platzhaltertext hinzufügen, die CSS-Klasse des Feldes angeben, wenn Sie benutzerdefiniertes CSS verwenden möchten, die Feldbeschriftung ausblenden und bei Bedarf eine Rechenfunktion aktivieren.

Standardmäßig enthält das Formular ein ‚$‘-Zeichen als Platzhalter, um den Benutzern mitzuteilen, dass die Werte in amerikanischen Dollar angegeben werden sollen.

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

Customizing a field placeholder text in WPForms

Auf der Registerkarte „Intelligente Logik“ können Sie eine bedingte Logik in dem Feld aktivieren. Sie ist optional, aber eine gute Funktion, um Ihr Hypothekenrechnerformular ansprechender zu gestalten.

Um sie zu verwenden, schalten Sie einfach die Schaltfläche „Bedingte Logik aktivieren“ ein.

Dann können Sie das Feld anhand bestimmter Kriterien ein- oder ausblenden. Im folgenden Beispiel haben wir uns dafür entschieden, das Feld „Immobilienpreis“ einzublenden, wenn der Nutzer seine E-Mail-Adresse eingegeben hat.

Wenn Sie mit der Anpassung des Formulars fertig sind, klicken Sie einfach auf „Speichern“ in der oberen rechten Ecke.

Konfigurieren Sie die Einstellungen des Formulars

Wechseln Sie nun auf die Registerkarte „Einstellungen“ ganz links im Menü.

Auf der Registerkarte „Allgemein“ können Sie den Namen des Formulars ändern und eine Beschreibung in den oberen Teil des Formulars einfügen. Sie können einige Anweisungen und einen Aufruf zum Handeln eingeben, um die Benutzer zum Ausfüllen des Formulars zu ermutigen.

Außerdem können Sie den Text der Schaltfläche „Absenden“ und den Text für die Bearbeitung der Schaltfläche anpassen.

Configuring the WPForms General settings in the Settings tab

Wechseln Sie außerdem zur Registerkarte „Spamschutz und Sicherheit“.

WPForms kommt bereits mit Anti-Spam-Schutz, der standardmäßig aktiviert ist. Aber Sie können auch Akismet für weitere Schutzmaßnahmen aktivieren.

Außerdem können Sie eine Mindestanzahl von Sekunden festlegen, die ein Benutzer benötigt, bevor er das Formular abschicken kann. So haben die Nutzer genug Zeit, das Formular auszufüllen, aber nicht genug Zeit für einen Spam-Bot, das Formular schnell abzuschicken.

Configuring the Spam Protection and Security Settings in WPForms

Wenn Sie nach unten scrollen, können Sie auch einen Länderfilter aktivieren, damit Nutzer aus bestimmten Ländern das Formular ausfüllen können. Wir empfehlen dies, wenn Ihre Immobilien-Website nur in einem bestimmten Land verkauft.

Sobald Sie die Schaltfläche „Länderfilter aktivieren“ aktiviert haben, klicken Sie einfach auf „Zulassen“ unter dem Länderfilter und wählen das Land aus, in das Sie verkaufen.

Bei Bedarf können Sie auch die Länderfilter-Meldung anpassen.

WPForms' Country Filter settings

Wenn Sie auf der Seite nach unten gehen, können Sie auch eine CAPTCHA-Funktion aktivieren, um Spam-Eingaben zu verhindern.

WPForms ermöglicht benutzerdefinierte CAPTCHA, reCAPTCHA, und hCAPTCHA.

WPForms' CAPTCHA options

Wechseln wir nun zur Registerkarte „Benachrichtigungen“. Hier können Sie sich jedes Mal eine E-Mail schicken lassen, wenn ein neues Formular eingereicht wurde.

Um diese Funktion zu aktivieren, klicken Sie einfach auf „Enable Notifications“ (Benachrichtigungen aktivieren). Wir empfehlen auch die Verwendung von WP Mail SMTP, um sicherzustellen, dass Sie diese E-Mail-Benachrichtigungen immer erhalten, da E-Mails, die von WordPress aus gesendet werden, wahrscheinlich verloren gehen.

Weitere Informationen hierzu finden Sie in unserer Anleitung zur Behebung des Problems, dass WordPress keine E-Mails sendet.

Sie können den Inhalt der E-Mail nach Bedarf bearbeiten.

Enabling email notifications in WPForms

Sie können in diesen Einstellungen auch eine benutzerdefinierte Bestätigungs-E-Mail an den Benutzer erstellen. Um dies zu tun, können Sie unsere Anleitung zum Senden von Bestätigungs-E-Mails nach der WordPress-Formularübermittlung befolgen.

Vergessen Sie auch hier nicht, auf „Speichern“ zu klicken, wenn Sie die Einstellungen vorgenommen haben.

Betten Sie den Hypothekenkostenrechner in Ihre WordPress-Website ein

Jetzt können Sie das Formular für den Hypothekenrechner in Ihrem WordPress-Blog oder auf Ihrer Website anzeigen. Klicken Sie dazu auf die Schaltfläche „Einbetten“ im oberen Menü.

Clicking the Embed button in WPForms

Nun erscheint ein Einbettungs-Popup, in dem Sie aufgefordert werden, eine bestehende Seite auszuwählen oder eine neue Seite zu erstellen, der Sie das Formular hinzufügen möchten.

Alternativ dazu können Sie auch einen Shortcode verwenden.

The embed options in WPForms

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

Wenn Sie die Option „Vorhandene Seite auswählen“ wählen, werden Sie auf dem nächsten Bildschirm aufgefordert, eine Seite auszuwählen, der das Formular hinzugefügt werden soll. Klicken Sie anschließend auf „Los geht’s!

Choosing an existing page to embed WPForms in

Wenn Sie die neue Seite Option wählen, dann wird der nächste Bildschirm werden Sie bitten, diese neue Seite zu nennen, so dass WPForms kann es für Sie erstellen.

Klicken Sie, ähnlich wie bei der vorherigen Methode, auf „Los geht’s“, um fortzufahren.

Creating a new page to embed the WPForms form in

Beide Optionen bringen Sie zum Gutenberg-Block-Editor.

Klicken Sie nun irgendwo auf der Seite auf die Schaltfläche „+“ zum Hinzufügen eines Blocks und wählen Sie den WPForms-Block aus.

Adding the WPForms block in the Gutenberg editor

Sobald sich der Block dort befindet, öffnen Sie das Dropdown-Menü „Formular auswählen“.

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

Selecting a WPForms form to add in the block editor

Sie sehen nun Ihr neu erstelltes Formular im Block-Editor angezeigt.

In der Seitenleiste der Blockeinstellungen können Sie das Design des Formulars weiter anpassen, z. B. die Hintergrundfarbe und den Feldrand. Sie können auch auf „Formular bearbeiten“ klicken, um bei Bedarf zum WPForms-Builder zurückzukehren.

The WPForms block settings sidebar in the block editor

Wenn Sie mit dem Aussehen des Formulars zufrieden sind, klicken Sie einfach auf „Aktualisieren“ oder „Veröffentlichen“, um die Änderungen offiziell zu machen.

So sieht unser Formular für den Hypothekenrechner aus:

An example of what a mortgage calculator form created with WPForms looks like

Wenn Sie ein klassisches, nicht blockierendes WordPress-Theme verwenden und das Formular in einem Widget-fähigen Bereich wie Header, Footer oder Sidebars anzeigen möchten, können Sie auch das tun.

Gehen Sie einfach zu Darstellung “ Widgets und klicken Sie auf die Schaltfläche „+“ für das Hinzufügen von Blöcken in einem beliebigen Widget-bereiten Bereich. Fügen Sie dort wie zuvor den WPForms-Block hinzu und wählen Sie das gerade erstellte Formular aus.

Adding a WPForms widget in the WordPress widget editor

Im Widget-Editor können Sie auch die Blockeinstellungen des Hypothekenrechner-Widgets bearbeiten, genau wie im Blockeditor.

Wenn Sie mit dem Formular zufrieden sind, klicken Sie einfach auf „Aktualisieren“.

Updating a widget-ready area after adding the WPForms block as a widget

Wenn die obigen Methoden nicht funktionieren, können Sie alternativ die Shortcode-Methode verwenden, um die Formulare in Seiten, Beiträge und andere Vorlagenteile einzufügen. Klicken Sie einfach auf den Link „Einen Shortcode verwenden“ im Einbettungs-Popup von vorhin.

Kopieren Sie dann den Shortcode und fügen Sie ihn an der gewünschten Stelle ein.

Weitere Informationen finden Sie in der Anleitung zum Hinzufügen eines Shortcodes in WordPress.

Copying the WPForms form's shortcode

Methode 2: Hinzufügen eines erweiterten WordPress-Hypothekenrechners mit Formidable Forms

Diese nächste Methode eignet sich hervorragend, wenn Sie einen fortgeschrittenen 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, dem Darlehensbetrag, der Laufzeit und dem Zinssatz des Benutzers enthält, kann es eine Vorschau der Zahlungsaufteilung des Benutzers anzeigen, die auch als Tilgungsplan bezeichnet wird.

Für diese Methode werden wir das Plugin Formidable Forms verwenden. Dieses benutzerfreundliche WordPress-Kontaktformular-Plugin wird mit einer fortschrittlichen Hypothekenrechner-Vorlage geliefert, die Sie zu Ihrer Website hinzufügen können.

Als Erstes müssen Sie die beiden Plugins Formidable Forms Lite und Formidable Forms Premium (Business Plan) installieren und aktivieren.

Das kostenlose Plugin hat nur begrenzte Funktionen, aber Formidable Forms Pro verwendet es als Grundlage für seine erweiterten Funktionen.

Eine detaillierte Anleitung finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

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

Activating the Formidable Forms premium license key

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

Nach dem Kauf eines Tarifs sollten Sie über Ihre Kontoinformationen verfügen.

Logging in to Formidable Forms

Sie gelangen nun zu einer Seite, auf der Sie um Ihre Erlaubnis zur Installation von Formidable Forms Pro gebeten werden.

Klicken Sie auf „Verbinden und Installieren von Formidable Forms Pro“, um Ihren Lizenzschlüssel zu aktivieren.

Connecting and installing Formidable Forms Pro on WordPress

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

Verwenden Sie die erweiterte Hypothekenrechner-Formularvorlage

Um zu beginnen, gehen Sie einfach zu Formidable “ Formulare und klicken Sie auf „Neu hinzufügen“.

Creating a new Formidable Forms form in WordPress

Es erscheint nun ein Popup mit allen fertigen Vorlagen, die Sie auf Ihrer WordPress-Website verwenden können.

Um die Vorlage für das Hypothekenberechnungsformular zu finden, geben Sie einfach „Advanced Mortgage Calculator“ in die Suchleiste ein. Bewegen Sie dann den Mauszeiger über die Vorlage und klicken Sie auf „Vorlage verwenden“.

Finding the advance mortgage calculator template in Formidable Forms

Sie gelangen nun zum Formidable Forms Builder. An dieser Stelle 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“.

Editing an existing field in WPForms

Dort können Sie die Feldbezeichnung ändern, festlegen, ob das Feld obligatorisch oder optional ist, Platzhaltertext hinzufügen und vieles mehr.

Das Tolle an Formidable Forms ist, dass Sie einen Standardwert in den Rechner einfügen können, damit die Benutzer sehen können, wie die Berechnung später aussehen könnte.

Editing the default value of a form field in Formidable Forms

Wenn Sie auf eines der Felder im Abschnitt „Finanzanalyse“ klicken, versuchen Sie, keine der „erweiterten Optionen“ zu ändern.

Dieser Bereich enthält die Berechnungsformeln, so dass eine Änderung dieser Formeln den Hypothekenrechner komplett zerstören kann.

The Financial Analysis section in a Formidable Forms mortgage calculator

Wenn Sie mit dem Aussehen des Formulars zufrieden sind, klicken Sie einfach auf „Speichern“ in der oberen rechten Ecke, um Ihre Änderungen zu speichern.

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

Saving a form created with Formidable Forms

Anpassen des Stils des Formulars für den Hypothekenrechner

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

Editing the style of a Formidable Forms form

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

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

Creating a new Formidable Forms form style

Sie werden nun zu einer Seite weitergeleitet, auf der Sie das Design des Formularstils anpassen können.

Sie können die Typografie, das Farbschema, die Schaltflächen, die Kontrollkästchen usw. beliebig ändern.

Configuring a custom form style in Formidable Forms

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

Konfigurieren Sie die Einstellungen von Formidable Forms

An dieser Stelle können Sie oben zum Menü „Einstellungen“ navigieren.

Auf der Registerkarte „Allgemein“ können Sie zunächst den Titel und die Beschreibung des Formulars anpassen und festlegen, ob diese später auf der Website angezeigt werden sollen. Hier können Sie auch einige Anweisungen zur Verwendung des Formulars einfügen.

Beachten Sie, dass Sie HTML verwenden müssen, wenn Sie den Text gestalten wollen.

Configuring the General settings in Formidable Forms

Wenn Sie nach unten scrollen, finden Sie eine Einstellung zur Aktivierung von Honeypot und JavaScript zur Spam-Abwehr.

Wir empfehlen, beide zu aktivieren, um gefälschte und bösartige Spam-Einträge zu verhindern.

Enabling spam protection in Formidable Forms

Auf der Registerkarte „Aktionen und Benachrichtigungen“ können Sie die Bestätigungs-E-Mail für den Benutzer anpassen.

Sie können entweder eine benutzerdefinierte Dank esnachricht anzeigen, die Benutzer zu einer bestimmten URL umleiten oder sie auf eine andere Seite schicken.

Configuring the Actions and Notifications settings in Formidable Forms

Eine weitere Registerkarte, die wir empfehlen, ist „Schaltflächen“.

Hier können Sie den Text und die Position der Schaltfläche „Absenden“ anpassen und sogar eine Schaltfläche „Neu beginnen“ aktivieren, falls der Benutzer das Formular leeren und von vorne beginnen möchte.

Configuring the Buttons settings in Formidable Forms

Nachdem Sie die Formulareinstellungen konfiguriert haben, klicken Sie einfach auf die Schaltfläche „Aktualisieren“.

Integrieren Sie das Formular für den erweiterten Hypothekenrechner in Ihre Website

Jetzt, wo Ihr fortschrittliches Hypothekenrechner-Formular fertig ist, können Sie es zu jedem Beitrag, jeder Seite oder jedem Widget-bereiten Bereich Ihres WordPress-Themas hinzufügen.

Klicken Sie zunächst auf die Schaltfläche „Einbetten“ in der oberen rechten Ecke.

Clicking the Embed button in Formidable Forms

Es erscheint nun ein Popup-Fenster, das anzeigt, dass Sie das Formular auf drei Arten hinzufügen können.

Sie können das Formular in eine bestehende Seite einbetten, es in eine neue Seite einfügen oder einen Shortcode verwenden.

Choosing a method to embed a Formidable Forms form

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“.

Selecting a page to insert the Formidable Forms form in

Wenn Sie hingegen die Option „Neue Seite“ wählen, können Sie eine neue Seite erstellen und benennen.

Wenn Sie das getan haben, klicken Sie auf „Seite erstellen“.

Creating a new page to insert a Formidable Forms form into

Bei beiden Optionen fügt Formidable Forms den Formularblock automatisch in den Blockeditor der Seite ein. Sie müssen ihn nur noch neu anordnen.

Wenn Sie das Formular direkt vom Block-Editor aus bearbeiten möchten, öffnen Sie einfach die Seitenleiste mit den Einstellungen des Blocks und klicken Sie auf „Zum Formular“.

Adding and editing the Formidable Forms block in the block editor

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

So sieht unser Hypothekenrechner-Formular von Formidable Forms aus:

Example of the mortgage calculator form made with Formidable Forms

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

Klicken Sie in dem Einbettungs-Popup von vorhin auf „Manuell einfügen“.

The Embed form shortcode and PHP code options to display the Formidable Forms form

Dann können Sie entweder den Shortcode oder den PHP-Code kopieren. Für die erste Option können Sie unseren Artikel über das Hinzufügen eines Shortcodes in WordPress lesen.

Was den PHP-Code angeht, so empfehlen wir ihn nur dann zu verwenden, wenn Sie mit Code-Snippets vertraut sind. Wir empfehlen, dafür WPCode zu verwenden, da dieses Plugin das Einfügen von Code in WordPress sicher und einfach macht.

WPCode - Best WordPress Code Snippets Plugin

Weitere Informationen finden Sie in unserer Anleitung zum Einfügen von Code-Snippets in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man einen Hypothekenrechner in WordPress einfügt. Vielleicht interessieren Sie sich auch für unseren Artikel über die Erstellung eines Autokredit- oder Autozahlungsrechners in WordPress und unsere Expertenauswahl der besten E-Mail-Marketingdienste für kleine Unternehmen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

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

Reader Interactions

7 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Karina Le Roux says

    Hi there, I want to know if the currency in a different country will affect the mortgage calculator? I see in the screenshots only $, but I would like it to be South African Rand (R), will that be possible?

    • WPBeginner Support says

      Changing the currency should not cause an issue, if you reach out to Formidable Forms‘ support they can assist you with any questions you may have about how to set it up.

      Admin

  3. Erick says

    Hi. Since we work with different banks and each of them have their own amount of interest rates, is it possible to have an option for the clients to select their preferred bank based on their interest rate or can I only use 1 specific predefined interest rate?

    • WPBeginner Support says

      You would want to reach out to the plugin’s support for the specifics and you could likely set that up how you are wanting.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.