Wie man einen benutzerdefinierten Kalkulator in WordPress erstellt (Schritt für Schritt)

Fragen Sie sich, wie Sie einen benutzerdefinierten Taschenrechner auf Ihrer WordPress-Website erstellen können?

Rechner sind eine gute Möglichkeit, mehr Leads zu erhalten, indem Sie die E-Mail-Adresse eines Besuchers erfassen. Sie können sie auch verwenden, um das Engagement zu erhöhen oder Fragen der Nutzer zu beantworten, damit diese länger auf Ihrer Website bleiben.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen benutzerdefinierten Taschenrechner in WordPress erstellen können.

Warum einen benutzerdefinierten Kalkulator in WordPress hinzufügen?

Ein benutzerdefinierter Rechner ermöglicht es den Nutzern, schnell Berechnungen durchzuführen, ohne Ihre Website zu verlassen.

Wenn Sie beispielsweise einen Gesundheits- und Fitness-Blog betreiben, könnten Sie einen BMI-Rechner hinzufügen, damit die Nutzer ihren BMI sehen und entscheiden können, welches Abonnement oder Produkt sie auf Ihrer Website kaufen möchten.

Wenn Sie weltweit verkaufen, kann ein Rechner, der metrische Einheiten in imperiale Einheiten umrechnet, Ihnen auch zu mehr Umsatz verhelfen, indem er Kunden hilft zu prüfen, ob ein Produkt die gewünschte Größe oder das gewünschte Gewicht hat.

Sie können auch Vertrauen schaffen und die Zahl der abgebrochenen Bestellungen verringern, indem Sie einen Versandkostenrechner anbieten. Auf diese Weise werden die Kunden an der Kasse nicht mit unerwarteten Kosten überrascht.

Sie können auch einen Hypothekenrechner auf Ihrer Immobilien-Website oder einen Autorechnungsrechner auf Ihrer Autohaus-Website hinzufügen.

Diese benutzerdefinierten Rechner sind auch eine gute Möglichkeit, neue Kunden zu gewinnen. Sie können die Nutzer zum Beispiel auffordern, ihre E-Mail-Adresse einzugeben, damit Sie ihnen ihre Ergebnisse schicken können. Auf diese Weise kann ein Kalkulator Ihnen helfen, eine E-Mail-Liste in WordPress aufzubauen.

Schauen wir uns also an, wie man in WordPress ganz einfach einen benutzerdefinierten Rechner erstellen kann.

Wie man einen benutzerdefinierten Rechner in WordPress erstellt

Sie können ganz einfach einen benutzerdefinierten Taschenrechner in WordPress mit WPForms erstellen. Es ist das beste Plugin für benutzerdefinierte Rechner und Formularerstellung auf dem Markt.

Es verfügt über einen Drag-and-Drop-Builder, über 1300 vorgefertigte Vorlagen und einen vollständigen Spamschutz, so dass Sie jedes beliebige Formular erstellen können, einschließlich eines Hypothekenrechners, eines Versandrabatts, eines Altersrechners und mehr.

Zunächst müssen Sie das WPForms-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite WPForms “ Einstellungen in der WordPress-Admin-Seitenleiste besuchen, um Ihren Lizenzschlüssel einzugeben.

Sie können diesen Schlüssel über Ihr Konto auf der WPForms-Website erhalten.

Gehen Sie danach im WordPress-Dashboard auf die Seite WPForms “ Addons und suchen Sie das „Calculations Addon“.

Klicken Sie dann einfach auf die Schaltfläche „Addon installieren“, um es auf Ihrer Website zu aktivieren.

Als Nächstes gehen Sie in Ihrem Admin-Dashboard auf die Seite WPForms “ Add New.

Dadurch gelangen Sie auf die Seite „Vorlage auswählen“, auf der Sie zunächst einen Namen für das Formular eingeben können, das Sie erstellen möchten.

Danach können Sie auf die Option „Rechner“ in der linken Spalte klicken, um die 87+ vorgefertigten Rechnervorlagen zu öffnen, die von WPForms angeboten werden, einschließlich:

• Hypothekenrechner Vorlage
• Tipp-Rechner-Vorlage
• Mietvertragsrechner Vorlage
• BMI-Rechner Vorlage
• Sparen & Investitionen Rechner Vorlage

Von hier aus können Sie auf die Schaltfläche „Vorlage verwenden“ unter einer beliebigen Formularvorlage klicken. In diesem Tutorial werden wir ein einfaches Formular „Versandrabatt-Rechner“ erstellen.

Dadurch wird der Formularersteller auf Ihrem Bildschirm geöffnet, wo Sie eine Formularvorschau auf der rechten Seite mit Formularfeldern in der linken Spalte sehen werden.

Von hier aus können Sie ganz einfach weitere Felder aus dem linken Bereich hinzufügen und auch die Felder ziehen, um ihre Reihenfolge zu ändern.

Als Nächstes müssen Sie zum Abschnitt „Verfügbare Elemente“ scrollen und auf dieses Feld klicken, um seine Einstellungen in der Seitenleiste zu öffnen.

Danach können Sie den Titel, das Bild und den Preis für alle Artikel hinzufügen, die Sie in Ihrem Online-Shop verkaufen.

Beachten Sie jedoch, dass Sie die Option „Bildauswahl verwenden“ aktivieren müssen, wenn Sie Bilder für die Artikel, die Sie verkaufen, hinzufügen möchten.

Sie können auch auf die Schaltfläche „+“ klicken, um weitere Elemente hinzuzufügen, oder auf die Schaltfläche „-„, um ein Element aus dem Abschnitt zu entfernen.

Als Nächstes müssen Sie auf das Feld „Versand“ klicken, um dessen Einstellungen in der linken Spalte zu öffnen. In diesem Feld wird der Versandrabatt auf der Grundlage der Gesamtsumme Ihres Produkts berechnet. Wenn Sie dieses Feld löschen, wird der Rechner für Ihre Benutzer nicht funktionieren, also stellen Sie sicher, dass Sie es im Formular behalten.

Standardmäßig bietet das Feld Versand einen automatischen Rabatt von 10 % für Einkäufe unter 50 $ und multipliziert den Rabatt dann mit 0,25 %, wenn der Gesamtbetrag steigt.

Wenn Sie jedoch den Versandrabatt ändern möchten, wechseln Sie in der linken Spalte auf die Registerkarte „Erweitert“ und blättern Sie nach unten zum Abschnitt „Formel“.

Hier können Sie den Wert 10 durch den Rabattprozentsatz ersetzen, den Sie anbieten möchten. Sie können auch die Produktsummen ändern.

Wenn Sie den Versandrabatt weiter anpassen möchten, können Sie oben auf den Link „Cheatsheet“ klicken. Dadurch gelangen Sie auf die Seite „Berechnungsformel Cheatsheet“, auf der Sie die Regeln und die zu verwendenden Zeichenfolgen besser verstehen können.

Danach können Sie auch die Einstellungen für alle anderen Formularfelder auf die gleiche Weise konfigurieren.

Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Als Nächstes müssen Sie die WordPress-Seite oder den WordPress-Beitrag, zu dem Sie das Formular für den Versandrechner hinzufügen möchten, im Block-Editor öffnen.

Klicken Sie auf die Schaltfläche „+“ in der oberen linken Ecke, um das Blockmenü zu öffnen und den WPForms-Block hinzuzufügen.

Sobald Sie das getan haben, wählen Sie einfach das Formular für den Versandrabattrechner aus dem Dropdown-Menü im Block selbst.

Klicken Sie schließlich oben auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern. Jetzt können Sie Ihre WordPress-Website besuchen, um das benutzerdefinierte Rechnerformular in Aktion zu sehen.

Hier berechnet das Versandfeld automatisch die Versandkosten entsprechend den Preisen der verschiedenen Artikel, die Ihr Kunde auf Ihrer Website bestellt.

Anpassen des Formulars für den Taschenrechner in WordPress

Sie könnten versuchen, den Rechner zu ändern, um zu sehen, ob Sie mehr Konversionen erzielen können. Zum Beispiel könnten Sie das Feld „E-Mail“ zur Pflichtangabe machen.

Um diese Änderungen vorzunehmen, besuchen Sie einfach die Seite WPForms “ Alle Formulare auf dem WordPress-Dashboard.

Wenn Sie dort sind, klicken Sie auf den Link „Bearbeiten“ unter dem Namen des Formulars, um es erneut im Formularersteller zu starten.

Sie können nun die Formularfelder anpassen oder neue Felder hinzufügen, indem Sie den oben beschriebenen Prozess befolgen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“, und die Änderungen werden automatisch auf Ihrer Unternehmenswebsite oder Ihrem Blog angezeigt.

Anzeigen der Einträge in Ihrem Rechnerformular

Jedes Mal, wenn jemand ein Formular auf Ihrer Website ausfüllt, speichert WPForms den Eintrag automatisch in Ihrer WordPress-Datenbank. So können Sie sehen, wie die Leute das Formular nutzen und die Kontaktinformationen Ihrer Besucher einsehen.

Um diese Informationen zu sehen, gehen Sie einfach auf die Seite WPForms “ Einträge im WordPress-Dashboard und scrollen Sie nach unten zum Abschnitt „Formularname“.

Klicken Sie dann auf das Rechnerformular, um die Einträge zu sehen.

Daraufhin wird eine Liste aller Formulareinträge auf Ihrer Seite angezeigt. Von hier aus können Sie auf das Kreissymbol klicken, um einen Eintrag als gelesen zu markieren.

Sie können auch auf den Link „Anzeigen“ neben jedem Eintrag klicken, um alle Details des Formulars anzuzeigen, einschließlich E-Mail-Adresse, Telefonnummer, bestellte Artikel, Versandrabatt und mehr.

Manchmal möchten Sie die Daten eines Formulars mit Personen teilen, die keinen Zugriff auf Ihr WordPress-Dashboard haben. Zum Beispiel könnten Sie eine WordPress-Entwicklungsagentur betreiben und mehrere Websites für Kunden verwalten.

Mit WPForms können Sie alle Ihre Daten als CSV- oder XLSX-Datei exportieren, indem Sie auf den Link „Alle exportieren“ am oberen Rand klicken.

Daraufhin öffnet sich ein neues Fenster, in dem Sie alle Formularfelder auswählen können, deren Daten Sie exportieren möchten. Klicken Sie anschließend auf die Schaltfläche „Exportdatei herunterladen“, um Ihre Formulardaten als XLSX-Datei zu speichern.

Bonus: Erstellen Sie komplexe benutzerdefinierte Kalkulatoren mit Formidable Forms

Wenn Sie komplexere Kalkulatoren auf Ihrer WordPress-Website erstellen möchten, empfehlen wir Formidable Forms. Dabei handelt es sich um ein fortschrittliches Formular-Plugin, das über einen Drag-and-Drop-Builder, vorgefertigte Vorlagen und dynamische Felder verfügt.

Darüber hinaus kann das Plugin erweiterte Berechnungen durchführen, wie z. B. die Verwendung von Formeln, bedingte Berechnungen, Zahlenformatierung und vieles mehr.

Sie können das Plugin verwenden, um einen Prozentrechner, einen Altersrechner, einen Lebensversicherungsrechner, einen Zinseszinsrechner und vieles mehr zu erstellen.

Wenn Sie z. B. Online-Kurse verkaufen, könnten Sie ein ROI-Rechnerformular hinzufügen, um den Nutzern zu zeigen, wie der Kauf Ihres Kurses ihr Einkommenspotenzial steigern kann.

Zu den weiteren Funktionen von Formidable Forms gehören bedingte Logik, Fortschrittsindikatoren, mehrseitige Formulare und ein ChatGPT-Feld, das Benutzern hilft, das Formular schneller auszufüllen.

Formidable Forms kann sogar mit verschiedenen E-Mail-Marketingdiensten integriert werden, um Ihre E-Mail-Liste zu erweitern. Weitere Informationen finden Sie in unserem vollständigen Formidable Forms-Test.

Wir hoffen, dass dieser Artikel Ihnen beim Hinzufügen eines benutzerdefinierten Rechners in WordPress geholfen hat. Vielleicht interessieren Sie sich auch für unseren Leitfaden für Einsteiger zur Verfolgung von Konversionen in WordPress und unsere Top-Picks für die besten WordPress-Kontaktformular-Plugins.

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.