So erstellen Sie einen benutzerdefinierten Rechner in WordPress (Schritt für Schritt)

Interaktive Elemente wie Rechner können die Benutzererfahrung auf Ihrer Website verbessern. Sie können mehreren Zwecken dienen, z. B. Leads erfassen, das Engagement steigern oder Besuchern helfen, schnelle Antworten zu finden.

Indem Sie wertvolle Werkzeuge bereitstellen, die direkt die Bedürfnisse der Benutzer erfüllen, können Sie Benutzer länger auf Ihrer Website halten, ihre Online-Erfahrung vertiefen und letztendlich die Ziele Ihrer Website erreichen.

Unser Team hat mehrere Tools und Plugins getestet, um dasjenige zu finden, mit dem sich am einfachsten ein Rechner für jeden Zweck hinzufügen lässt.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach und Schritt für Schritt einen benutzerdefinierten Rechner in WordPress erstellen.

Warum einen benutzerdefinierten Rechner in WordPress hinzufügen?

Ein benutzerdefinierter Rechner ermöglicht es Benutzern, Dinge schnell zu berechnen, ohne Ihre Website zu verlassen.

Zum Beispiel, wenn Sie einen Gesundheits- und Fitness-Blog haben, könnten Sie einen BMI-Rechner hinzufügen, damit Benutzer ihren BMI sehen und entscheiden können, welchen Abonnementplan oder welches Produkt sie von Ihrer Website kaufen möchten.

Wenn Sie weltweit verkaufen, kann ein Online-Rechner, der metrische Einheiten in imperiale Einheiten umrechnet, Ihnen auch mehr Verkäufe bringen, 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 aufbauen und Warenkorbabbrüche reduzieren, indem Sie einen Versandrechner anbieten. Auf diese Weise werden Kunden beim Auschecken nicht von unerwarteten Kosten überrascht.

Oder Sie können einen Hypothekenrechner zu Ihrer Immobilien-Website hinzufügen oder einen Autokreditrechner zu Ihrer Fahrzeug-Händler-Website.

Diese benutzerdefinierten Rechner sind auch eine großartige Möglichkeit, Leads zu generieren. Sie können die Benutzer beispielsweise auffordern, ihre E-Mail-Adresse einzugeben, damit Sie ihnen ihre Ergebnisse zusenden können. Auf diese Weise kann ein Rechner Ihnen helfen, eine E-Mail-Liste in WordPress aufzubauen.

Nichtsdestotrotz wollen wir uns ansehen, wie man einfach einen benutzerdefinierten Rechner in WordPress erstellt.

So erstellen Sie einen benutzerdefinierten Rechner in WordPress

Mit WPForms können Sie ganz einfach einen benutzerdefinierten Rechner in WordPress erstellen. Unserer Meinung nach ist es das beste benutzerdefinierte Rechner-Plugin und Formular-Builder auf dem Markt. Es verfügt über einen Drag-and-Drop-Builder, über 2000 vorgefertigte Vorlagen und vollständigen Spam-Schutz.

Tatsächlich lieben wir WPForms so sehr, dass wir es für alle Kontaktformulare auf unserer Website sowie für unsere jährliche Umfrage verwenden.

Während unserer Tests stellten wir fest, dass das Plugin auch ein Calculations-Addon hat, mit dem Sie ganz einfach jeden gewünschten Rechner erstellen können, einschließlich eines Hypothekenrechners, eines Versandrabatts, eines Altersrechners und mehr. Weitere Informationen finden Sie in unserem WPForms-Testbericht.

Zuerst müssen Sie das WPForms-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Anfängerleitfaden, wie Sie ein WordPress-Plugin installieren.

Besuchen Sie nach der Aktivierung die Seite WPForms » Einstellungen im Admin-Menü von WordPress, um Ihren Lizenzschlüssel einzugeben.

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

Gehen Sie danach zur Seite WPForms » Addons im WordPress-Dashboard und suchen Sie nach dem 'Calculations Addon'.

Sobald Sie das getan haben, klicken Sie einfach auf die Schaltfläche „Addon installieren“, um es auf Ihrer Website zu aktivieren.

Gehen Sie als Nächstes von Ihrem Admin-Dashboard zur Seite WPForms » Neu hinzufügen.

Dies führt Sie zur Seite „Vorlage auswählen“, auf der Sie mit der Eingabe eines Namens für das Formular, das Sie erstellen möchten, beginnen können.

Danach können Sie in der linken Spalte auf die Option „Rechner“ klicken, um die über 87 vorgefertigten Rechnervorlagen von WPForms zu öffnen, darunter:

• Hypothekenrechner-Vorlage
• Trinkgeldrechner-Vorlage
• Leasingrechner-Vorlage
• BMI-Rechner-Vorlage
• Spar- & Anlage-Rechner-Vorlage

Von hier aus können Sie unter jeder gewünschten Formularvorlage auf die Schaltfläche „Vorlage verwenden“ klicken. Für dieses Tutorial erstellen wir ein einfaches Formular „Versandrabatt-Rechner“.

Dies öffnet den Formular-Builder auf Ihrem Bildschirm. Hier sehen Sie eine Formularvorschau auf der rechten Seite mit Formularfeldern in der linken Spalte.

Sie können nun ganz einfach weitere Felder aus dem linken Bereich hinzufügen und sie auch per Drag & Drop neu anordnen.

Scrollen Sie dann zum Abschnitt „Verfügbare Elemente“ und klicken Sie auf dieses Feld, um dessen Einstellungen in der Seitenleiste zu öffnen.

Sobald Sie das getan haben, können Sie den Titel, das Bild und die Preise für alle Artikel hinzufügen, die Sie in Ihrem E-Commerce-Shop verkaufen.

Beachten Sie jedoch, dass Sie die Option „Bildoptionen verwenden“ aktivieren müssen, wenn Sie Bilder für die von Ihnen verkauften Artikel 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. Dieses Feld berechnet den Versandrabatt basierend auf Ihrem Produktgesamtpreis. Wenn Sie dieses Feld löschen, funktioniert der Rechner für Ihre Benutzer nicht, stellen Sie also sicher, dass Sie es im Formular belassen.

Standardmäßig bietet das Versandfeld einen automatischen Rabatt von 10 % auf Einkäufe unter 50 US-Dollar und multipliziert dann den Rabatt mit 0,25 %, wenn Ihr Gesamtbetrag steigt.

Wenn Sie jedoch den Versandrabatt ändern möchten, wechseln Sie zur Registerkarte „Erweitert“ in der linken Spalte und scrollen Sie zum Abschnitt „Formel“.

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

Wenn Sie den Versandrabatt weiter anpassen möchten, können Sie oben auf den Link „Spickzettel“ klicken. Dies führt Sie zur Seite „Formel-Spickzettel für Berechnungen“, auf der Sie die zu verwendenden Regeln und Zeichenfolgen besser verstehen können.

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

Neu: Möchten Sie eine einfachere Möglichkeit, Ihre Berechnungsformeln zu erstellen? WPForms bietet jetzt eine leistungsstarke Funktion für KI-Berechnungen, die die mühsame Arbeit für Sie erledigt.

Klicken Sie einfach auf die Schaltfläche „Formel generieren“ neben dem Formelfeld, um mit dem KI-Assistenten zu chatten.

Dann können Sie einfach in einfacher Sprache beschreiben, was Sie berechnen möchten.

Sie könnten zum Beispiel eingeben: „Wenden Sie einen Versandrabatt von 15 % auf Bestellungen über 100 US-Dollar an und erhöhen Sie dann den Rabatt um 0,25 % für jeweils weitere 50 US-Dollar Umsatz.“

Nach dem Drücken der „Enter“-Taste generiert die KI automatisch die richtige Formel, die Sie mit einem Klick zu Ihrem Formular hinzufügen können.

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 Beitrag öffnen, zu der Sie das Versandkostenrechner-Formular hinzufügen möchten, im Block-Editor.

Klicken Sie von hier aus auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke, um das Blockmenü zu öffnen und den WPForms-Block einzubetten.

Sobald Sie dies getan haben, wählen Sie einfach das Versandrabatt-Rechnerformular aus dem Dropdown-Menü im Block selbst aus.

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

Hier berechnet das Versandfeld automatisch die Versandkosten gemäß der Preisgestaltung der verschiedenen Artikel, die Ihr Kunde von Ihrer Website bestellt.

Anpassen Ihres Rechnerformulars in WordPress

Möglicherweise versuchen Sie irgendwann, den Rechner zu ändern, um zu sehen, ob Sie mehr Conversions erzielen können. Sie möchten beispielsweise das Feld „E-Mail“ als Pflichtfeld festlegen.

Um diese Änderungen vorzunehmen, besuchen Sie einfach die Seite WPForms » Alle Formulare im WordPress-Dashboard.

Sobald Sie dort sind, klicken Sie auf den Link „Bearbeiten“ unter dem Formularnamen, um es erneut im Formular-Builder zu öffnen.

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 diese Änderungen werden automatisch auf Ihrer Geschäftswebsite oder Ihrem Blog angezeigt.

Anzeigen Ihrer Rechnerformular-Einträge

Immer wenn jemand ein Formular auf Ihrer Website ausfüllt, speichert WPForms dessen Eintrag automatisch in Ihrer WordPress-Datenbank. Dies ermöglicht es Ihnen zu sehen, wie die Leute das Formular verwenden, und die Kontaktinformationen Ihrer Besucher einzusehen.

Um diese Informationen anzuzeigen, gehen Sie einfach zur Seite WPForms » Einträge im WordPress-Dashboard und scrollen Sie zum Abschnitt „Formularname“.

Klicken Sie danach auf das Rechnerformular, um die Einträge anzuzeigen.

Dies öffnet eine Liste aller Formulareinträge auf Ihrer Seite. 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 Formulardetails 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 oben auf den Link „Alle exportieren“ klicken.

Dies öffnet einen neuen Bildschirm, auf 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 Rechner mit Formidable Forms

Wenn Sie komplexere Rechner auf Ihrer WordPress-Website erstellen möchten, empfehlen wir die Verwendung von Formidable Forms. Es ist ein fortschrittliches Formular-Plugin mit einem Drag-and-Drop-Builder, vorgefertigten Vorlagen und dynamischen Feldern.

Zusätzlich kann das Plugin erweiterte Berechnungen durchführen, wie z. B. die Verwendung von Formeln, bedingten Berechnungen, Zahlenformatierung und mehr, was es zu einem großartigen Rechner-Builder macht.

Sie können das Plugin verwenden, um verschiedene Arten von Rechnern zu erstellen, wie z. B. einen Prozentrechner, einen Preisrechner, einen Darlehensrechner, einen Altersrechner, einen Lebensversicherungsrechner und einen Zinseszinsrechner.

Zum Beispiel, wenn Sie Kurse online verkaufen, könnten Sie ein ROI-Rechner-Formular hinzufügen, um Benutzern zu zeigen, wie der Kauf Ihres Kurses ihr Verdienstpotenzial steigern kann.

Zu den weiteren Funktionen von Formidable Forms gehören bedingte Logik, Fortschrittsanzeigen, mehrseitige Formulare und ein ChatGPT-Feld, das den 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-Testbericht.

Wir hoffen, dieser Artikel hat Ihnen geholfen, einen benutzerdefinierten Rechner in WordPress hinzuzufügen. Möglicherweise möchten Sie auch unseren Schritt-für-Schritt-Leitfaden zum Thema So generieren Sie mehr Leads mit kostenlosen Online-Rechnern und unsere Top-Auswahl für die besten WordPress-Kontaktformular-Plugins sehen.

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.