So erstellen Sie einen benutzerdefinierten Online-Rechner mit WPForms

Veröffentlicht: 2023-11-13

Haben Sie sich jemals gefragt, wie Sie in WordPress einen Rechner für die individuellen Anforderungen Ihrer Website erstellen können?

Durch die Erfassung der E-Mail-Adressen von Besuchern sind Rechner eine hervorragende Möglichkeit, zusätzliche Leads für Ihr Unternehmen zu generieren.

Erstellen Sie jetzt Ihren Rechner

Rechner können auch das Engagement steigern, da sie es Ihnen ermöglichen, Benutzer dazu zu bewegen, länger auf Ihrer Website zu bleiben und auf alle Fragen zu antworten, die sie möglicherweise haben.

In diesem Artikel führen wir Sie durch die Schritte zum Erstellen eines benutzerdefinierten Rechners in WordPress mit WPForms!

Warum einen benutzerdefinierten Rechner in WordPress hinzufügen?

Mit einem benutzerdefinierten Rechner können Benutzer mühelos Berechnungen durchführen, ohne Ihre Website jemals verlassen zu müssen, und so Ihre Engagement-Raten steigern.

Wenn Sie beispielsweise eine Automobil-Website betreiben, können Sie einen Autozahlungsrechner hinzufügen, um Besuchern dabei zu helfen, die monatlichen Zahlungen für ein neues Fahrzeug einfach abzuschätzen und ihre Kaufentscheidungen zu treffen.

Ebenso ist eine Fitness- oder Gesundheits-Website nicht vollständig ohne einen Body-Mass-Index-BMI-Rechner, der den Nutzern dabei hilft, ihren gesundheitlichen Stand zu ermitteln und so sicherzustellen, dass sie fundiertere und positivere Entscheidungen treffen.

Sie können auch die Transparenz erhöhen und das Vertrauen der Kunden stärken, indem Sie potenziellen Kunden einen Versandrechner anbieten, mit dem sie sofort eine Schätzung der Versandkosten auf Ihrer E-Commerce-Website erhalten.

Oder Sie können Ihrer Tierarzt-Website einen Hundealterrechner hinzufügen, mit dem Tierbesitzer das Alter ihres Hundes in Menschenjahren ermitteln können. Schauen wir uns nun an, wie Sie mit WPForms ganz einfach jede Art von Taschenrechner erstellen können.

So erstellen Sie einen benutzerdefinierten Rechner in WordPress

Das Erstellen eines benutzerdefinierten Rechners in WordPress mit WPForms ist super einfach. Sie müssen lediglich die folgenden einfachen Schritte ausführen:

In diesem Artikel

  • 1. Installieren und aktivieren Sie WPForms Pro
  • 2. Holen Sie sich das Berechnungs-Addon
  • 3. Wählen Sie eine professionell gestaltete Rechnervorlage
  • 4. Passen Sie die Rechnerformularvorlage an
  • 5. Veröffentlichen Sie Ihr Rechnerformular

1. Installieren und aktivieren Sie WPForms Pro

WPForms ist das beste Formularerstellungs- und Rechner-Plugin, mit dem Sie alle Arten von Formularen erstellen können. Es bietet eine riesige Liste vorgefertigter Taschenrechner-Formularvorlagen, die zahlreiche Online-Unternehmen als Tools zur Lead-Generierung verwenden können.

Da wir für dieses Tutorial das Berechnungs-Add-on verwenden, müssen Sie WPForms Pro abonnieren, das Ihnen auch Zugriff auf Premium-Integrationen, Add-ons und eine Menge wertvoller Funktionen wie bedingte Logik, Formularberichte usw. bietet.

The WPForms homepage

Nachdem Sie die Pro-Lizenz erworben haben, fahren Sie mit der Installation und Aktivierung des WPForms-Plugins auf Ihrer Website fort. Bitte lesen Sie zunächst diese einfache Anleitung zur Installation eines WordPress-Plugins.

2. Holen Sie sich das Berechnungs-Addon

Die Installation des Berechnungs-Add-ons auf Ihrer WordPress-Website ist sehr einfach. Klicken Sie in Ihrem WordPress-Dashboard auf WPForms und wählen Sie dann Add-ons aus.

WPForms addons

Geben Sie „Berechnungen“ in das Feld „Such-Add-ons“ ein. Klicken Sie anschließend auf die Schaltfläche „Addon installieren“ und dann auf die Schaltfläche „Aktivieren“ .

Activate Calculations Addon

Gut gemacht! Wir zeigen Ihnen nun, wie Sie mithilfe einer Vorlage ein Rechnerformular erstellen und es ändern, um Leads zu generieren.

3. Wählen Sie eine professionell gestaltete Rechnervorlage

Jetzt ist es an der Zeit, Ihr neues Formular zu erstellen. Wählen Sie in Ihrem WordPress-Dashboard WPForms aus und klicken Sie dann auf die Schaltfläche „Neu hinzufügen“ .

Add new form

Dadurch gelangen Sie zum nächsten Bildschirm. Bitte benennen Sie zunächst Ihr Formular . Wir nennen unseren beispielsweise „Hypothekenrechner“.

Name your form

Scrollen Sie als Nächstes nach unten und wählen Sie die Kategorie „Rechner“ aus, um ein geeignetes Formular basierend auf den Anforderungen Ihres Unternehmens zu finden.

Calculator template category

Wenn Sie eine geeignete Vorlage gefunden haben, klicken Sie auf die Schaltfläche „Vorlage verwenden“ . Für dieses Tutorial wählen wir das Hypothekenrechner-Formular aus.

Click Use Template

Sie werden nun zum Bildschirm „Felder“ weitergeleitet. Auf diesem Bildschirm werden die verfügbaren Felder im linken Bereich aufgelistet.

WPForms fields menu

Im rechten Bereich sehen Sie eine bearbeitbare Vorschau Ihres Formulars. Da wir eine Taschenrechnervorlage ausgewählt haben, werden die Felder automatisch hinzugefügt.

Calculator form preview

Sie können jetzt den intuitiven Drag-and-Drop-Builder von WPForms verwenden, um Felder einfach zu ändern, anzuordnen oder hinzuzufügen, um das Formular nach Ihren Wünschen anzupassen.

4. Passen Sie die Rechnerformularvorlage an

Wenn Sie das Rechnerformular zum Generieren von Leads verwenden, können Sie die Formularfelder so anpassen, dass sie wie ein Lead-Formular funktionieren. Gehen Sie im Formularersteller zu Einstellungen » Lead-Formulare .

Daraufhin wird ein Popup mit der Meldung angezeigt: „Das Lead Forms-Add-on ist nicht installiert.“ Möchten Sie es installieren und aktivieren?“ Klicken Sie auf die Schaltfläche „Ja, installieren und aktivieren“ .

Install Lead Forms

Klicken Sie anschließend auf die Schaltfläche „Ja, speichern und aktualisieren“, um die Installation abzuschließen, und schalten Sie dann den Modus „Lead-Formular aktivieren“ ein.

Enable Lead Form Mode

Dadurch wird ein weiteres Popup angezeigt, das darüber informiert, dass das Lead Forms Add-on Ihr Formular umstrukturieren wird. Klicken Sie auf die Schaltfläche Lead-Formulare aktivieren .

Enable Lead Forms

Das Formular-Plugin wandelt Ihre berechneten Felder jetzt automatisch in ein Lead-Formular um. Dies dauert normalerweise einige Sekunden, es sei denn, Sie haben viele Felder.

Converting to Lead Form

Sie können nun Felder nach Ihren Wünschen hinzufügen, ändern und anordnen. Beispielsweise haben wir oben im Formular ein Feld „Name“ und „E-Mail“ hinzugefügt.

Add Name and Email Fields

Sie können die Felder „Name“ und „E-Mail“ auch auf der Registerkarte „ Allgemein“ für jede ihrer Feldoptionen als erforderlich markieren.

Mark field as required

Um den Benutzer zum Absenden des Formulars zu ermutigen, können Sie auch den Text der Absenden-Schaltfläche ändern, um Ihren Lead-Generierungsprozess zu festigen.

Scrollen Sie dazu von der rechten Vorschau des Formulars nach unten, bis Sie ganz unten angekommen sind. Klicken Sie dort auf die Schaltfläche „Senden“ .

Click Submit button

Dadurch werden Sie zur Registerkarte „Einstellungen“ „Allgemein“ weitergeleitet. Ändern Sie von hier aus den Text der Schaltfläche „Senden “, sodass er etwa „Meine Ergebnisse senden“ lautet.

Change Submit Button Text

Wenn Sie Ihren Taschenrechner und Ihr Kontaktformular so angepasst haben, dass sie alle gewünschten Funktionen enthalten, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken.

Save the form

Und da haben Sie es! Sie können Ihr Rechnerformular jetzt in WordPress veröffentlichen, um Ihre Lead-Generierung anzukurbeln und Ihre E-Mail-Konvertierungen zu steigern.

5. Veröffentlichen Sie Ihr Rechnerformular

Sobald Sie Ihr Taschenrechnerformular mithilfe der Vorlage erstellt haben, können Sie es zu Ihrer WordPress-Website hinzufügen und es mit dem Blockeditor weiter gestalten.

Erstellen Sie eine neue Seite oder einen neuen Beitrag oder aktualisieren Sie eine vorhandene. Als nächstes müssen Sie auf die Schaltfläche „Block hinzufügen“ klicken und dann das WPForms- Symbol auswählen.

Add form widget WPForms

Wählen Sie als Nächstes Ihr benutzerdefiniertes Online-Rechnerformular aus dem Dropdown-Menü im WPForms-Widget aus, um es an Ihre Seite/Ihren Beitrag anzuhängen.

Select Calculator Form

Wenn Sie mit dem Erscheinungsbild Ihres Formulars zufrieden sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren “ oder „Veröffentlichen“ , um Ihr Formular live zu schalten.

Publish Calculator Form

Um sicherzustellen, dass keine Probleme auftreten, ist es wichtig, das eingebettete Formular nach der Veröffentlichung zu testen und sicherzustellen, dass es im Frontend wie vorgesehen funktioniert.

Testing Calculator Form

Weitere Fragen zum Erstellen eines Taschenrechners

Zu lernen, wie man in WordPress einen Taschenrechner erstellt, ist ein beliebtes Thema für unsere Leser. Hier finden Sie Antworten auf einige häufig gestellte Fragen dazu.

Wie schwer ist es, einen eigenen Taschenrechner zu erstellen?

Das Erstellen eines Rechners für Ihre WordPress-Site kann einfach sein. Mit Tools wie WPForms können Sie ganz einfach benutzerdefinierte Taschenrechner erstellen, ohne dass Sie Programmierkenntnisse benötigen. Die Benutzeroberfläche ist benutzerfreundlich und intuitiv.

Wie füge ich meiner Website einen Taschenrechner hinzu?

Wenn Sie Ihrer Website einen Taschenrechner hinzufügen möchten, sollten Sie die Verwendung von WPForms in Betracht ziehen. Es handelt sich um ein bewährtes WordPress-Rechner-Plugin, mit dem Sie einen Rechner nahtlos integrieren können. Mit dem Berechnungs-Addon können Sie jeden Taschenrechner individuell nach Ihren Bedürfnissen gestalten.

Wie erstelle ich einen Hypothekenrechner in WordPress?

Mit WPForms ist das Erstellen eines Hypothekenrechners ganz einfach. Aktivieren Sie nach der Installation des Plugins das Berechnungs-Add-on. Mit diesem Add-on können Sie Felder und Formeln einrichten, um sicherzustellen, dass Ihre Besucher genaue Hypothekenschätzungen erhalten.

Wie erstelle ich einen kostenlosen Rechner in WordPress?

Obwohl es kostenlose Rechner-Builder gibt, ist es immer besser, ein kostenpflichtiges Tool wie WPForms zu verwenden. Auf diese Weise haben Sie die Flexibilität, über das Berechnungs-Addon verschiedene Rechner mit erweiterten Funktionen zu erstellen.

Als Nächstes erfahren Sie, wie Sie Gesamtpreisberechnungen mit WPForms ändern

Möchten Sie WPForms-Berechnungen verwenden, um den Gesamtbetrag einer Bestellung basierend auf der Produktauswahl eines Benutzers darzustellen? Erfahren Sie, wie Sie mit WPForms Produktoptionen hinzufügen, die den berechneten Preis für ein Produkt ändern.

Erstellen Sie jetzt Ihren Rechner

Sind Sie bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel weitergeholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.