So erstellen Sie einen Preisrechner für Ihre Website

Veröffentlicht: 2024-01-18

Sie fragen sich, wie Sie einen Preisrechner für Ihre Website erstellen können, mit dem Benutzer Produkte auswählen und sofort bezahlen können?

Sie werden erfreut sein zu hören, dass WPForms es Benutzern ermöglicht, Bestellformulare für eine Vielzahl von Unternehmen und Anwendungsfällen zu erstellen, die automatisch Preise berechnen.

Erstellen Sie jetzt Ihren Preisrechner

Lassen Sie uns also ohne weitere Umschweife in die Schritte eintauchen, die Sie unternehmen müssen, um einen Preisrechner für Ihre Website zu erstellen!

So erstellen Sie einen Preisrechner für Ihre Website

Das Erstellen eines Preisrechners für Ihre Website mit WPForms ist unglaublich einfach. Befolgen Sie die folgenden Schritte, um loszulegen!

In diesem Artikel

  • 1. Installieren und aktivieren Sie das WPForms-Plugin
  • 2. Verbinden Sie WPForms mit Stripe
  • 3. Wählen Sie eine Bestellformularvorlage aus
  • 4. Verwenden Sie benutzerdefinierte Formeln für erweiterte Gesamtsummen
  • 5. Veröffentlichen Sie Ihr Rechnungs-/Bestellformular

1. Installieren und aktivieren Sie das WPForms-Plugin

WPForms ist ein großartiges Tool zum Erstellen von Formularen wie Kontaktformularen und Bestellformularen. Es verfügt über mehr als 1.300 WordPress-Formularvorlagen, die Sie verwenden können.

Um das Berechnungs-Add-on nutzen zu können, benötigen Sie WPForms Pro. Dadurch erhalten Sie weitere Funktionen wie Bestellformulare mit anpassbaren Gesamtfeldern.

the wpforms homepage

Kaufen Sie zunächst die Pro-Lizenz. Installieren Sie dann WPForms auf Ihrer Website. Wenn Sie Hilfe benötigen, befolgen Sie diese Anweisungen zum Hinzufügen eines Plugins zu WordPress.

2. Verbinden Sie WPForms mit Stripe

Nachdem Sie WPForms haben, müssen Sie das Stripe Pro-Add-on hinzufügen.

Wenn Sie möchten, können Sie das Add-on für einen anderen Zahlungsabwickler installieren, beispielsweise PayPal oder Square. Wir empfehlen jedoch Stripe für die Erstellung von Preisrechnerformularen.

Gehen Sie jedoch in Ihrem WordPress-Menü zu WPForms und klicken Sie auf Add-ons .

add new addon wpforms

Suchen Sie nach dem Stripe Pro Addon und installieren Sie es auf Ihrer Website. Klicken Sie dazu einfach auf die Schaltfläche „Installieren“ und dann auf die Schaltfläche „Aktivieren“ .

activate stripe pro addon

Gehen Sie als Nächstes zu WPForms » Einstellungen und klicken Sie auf Zahlungen . Hier können Sie die Art der Währung auswählen, die Sie verwenden möchten.

wpforms currency settings

Verbinden Sie dann Ihre Website mit Stripe, indem Sie auf die blaue Schaltfläche klicken und Ihre Stripe-Daten eingeben. Wenn Sie noch kein Stripe-Konto haben, können Sie jetzt eines erstellen.

connect with stripe

Sobald Sie eine Verbindung zu Stripe hergestellt haben, kehren Sie zu WPForms » Einstellungen » Zahlungen zurück. Sie sollten ein grünes Häkchen sehen, das anzeigt, dass Sie verbunden sind.

stripe connection status

Jetzt können Sie Ihr Bestellformular mit einer Preisrechnerfunktion erstellen und sofort Zahlungen mit Stripe erhalten!

3. Wählen Sie eine Bestellformularvorlage aus

Lassen Sie uns jetzt Ihr Bestellformular erstellen. Gehen Sie in Ihrem WordPress-Dashboard zu WPForms und klicken Sie auf die Option „Neu hinzufügen“ .

wpforms add new

Geben Sie anschließend Ihrem Formular einen Namen und wählen Sie eine Vorlage aus. Für diesen Leitfaden wählen wir das Rechnungs-/Bestellformular, um die Formularerstellung zu beschleunigen.

select billing form

Diese Vorlage verfügt über ein Feld „Mehrere Artikel“ und ein Feld „Gesamt“ . Sie können das Formular ändern, um verschiedene Produktarten hinzuzufügen und den Gesamtpreis zu ermitteln.

Änderungen am Feld „Mehrere Artikel“ vornehmen

In dieser Anleitung beginnen wir mit einem normalen Feld „Mehrere Artikel“ und ändern es so, dass es verschiedene Arten von Hemden einschließt.

Klicken Sie auf das Feld „Mehrere Artikel“ , um den Inhalt zu ändern. So können Sie das Formular für Ihr Unternehmen relevanter machen:

  • Beschriftung: Dies ist der Name für die Auswahlmöglichkeiten.
  • Artikel: Dies sind die verschiedenen Dinge, die Sie auswählen können, und deren Kosten.
  • Preis nach Artikeletiketten anzeigen: Aktivieren Sie diese Option, wenn Sie den Preis jedes Artikels anzeigen möchten.

multiple item field order form

Sobald Sie fertig sind und jemand ein Produkt auswählt, ändert sich der Gesamtpreis sofort entsprechend der Auswahl.

wpforms total amount display

Auswahl mehrerer Produkte

Vielleicht möchten Sie, dass die Leute mehr als ein Produkt auswählen. Mit verschiedenen Feldern und Anpassungsoptionen können Sie dies ganz einfach tun.

Wenn jemand beispielsweise ein T-Shirt und ein Sweatshirt kaufen möchte, kann er beides auf demselben Formular auswählen.

Gehen Sie zum Abschnitt „Zahlungsfelder“ und verwenden Sie das Feld „Checkbox-Artikel“ . Hier können Sie alle Produkte auflisten.

wpforms choose products

Wenn nun jemand mehr als ein Produkt auswählt, addiert sich der Gesamtpreis aller seiner Auswahlmöglichkeiten.

total amount multiple products

Hinzufügen eines Stripe-Kreditkartenfelds

Der wichtigste Teil eines Bestellformulars besteht darin, den Kunden die einfache Online-Zahlung zu ermöglichen, um sicherzustellen, dass Sie die Zahlungen erhalten und mit dem Versand der Bestellung fortfahren können.

Zuvor haben wir Stripe Pro hinzugefügt und es mit WPForms verbunden, damit Sie Zahlungen auf Ihrer Website akzeptieren können. Jetzt ist es an der Zeit, Stripe zu Ihrem Formular hinzuzufügen.

Um Stripe-Zahlungen in Ihrem Formular einzurichten, suchen Sie unter „Zahlungsfelder“ nach dem Feld „Stripe-Kreditkarte“ und fügen Sie es Ihrem Formular hinzu.

add stripe credit card field

Gehen Sie als Nächstes zum Abschnitt „Zahlungen“ und sehen Sie sich die Stripe- Einstellungen an. Aktivieren Sie die Option für einmalige Zahlungen.

enable one time payments stripe

Jetzt können Ihre Kunden verschiedene Produkte auswählen, den Gesamtpreis sehen und ihre Zahlungen in einem Formular tätigen!

4. Verwenden Sie benutzerdefinierte Formeln für erweiterte Gesamtsummen

Wenn Sie die Gesamtpreise, die Ihren Kunden im Bestellformular angezeigt werden, noch weiter ausbauen möchten, können Sie das Berechnungs-Add-on nutzen.

Gehen Sie zu WPForms » Addons und suchen Sie nach dem Calculations Addon . Klicken Sie dann auf die Schaltfläche Add-on installieren . Klicken Sie anschließend auf die Schaltfläche Aktivieren .

activate calculations addon

Jetzt können Sie komplexe Formeln zu Ihrem Gesamtpreis erstellen. Sie können beispielsweise ein Feld für die Menge hinzufügen oder einen Standardsteuerabzug einfügen.

Hinzufügen eines Mengenfelds

Möchten Sie, dass die Leute wählen können, wie viele Produkte sie möchten? Fügen Sie Ihrem Formular ein Mengenfeld hinzu. Verschieben Sie einfach ein Dropdown- Feld in den Formularbereich rechts.

select dropdown field

Gehen Sie als Nächstes zu den Feldoptionen für dieses Dropdown- Feld. Ändern Sie den Namen in „Menge“ und geben Sie die Zahlen ein, aus denen die Leute wählen können.

wpforms dropdown quantity field

Fügen Sie nun Ihrem Formular ein Einzelelementfeld hinzu. Sie können dies tun, indem Sie es per Drag & Drop in die Vorschau ziehen oder einfach darauf klicken.

single item field

Ändern Sie die Beschriftung dieses Einzelartikelfelds in etwas wie „Gesamtpreis“. Gehen Sie dann zur Registerkarte „Erweitert“ und aktivieren Sie „Berechnung aktivieren“ .

enable calculation option

Verbinden Sie im Feld „Formel“ das Feld „Mehrere Artikel“ mit dem Dropdown- Feld „Menge“. Sie können dies mit einer einfachen Multiplikationsformel tun.

$FX_amount * $FX

Hier ist $FX der Wert des Feldes mit der ID #X und $FX_amount der Preiswert des Zahlungsfeldes mit der ID #X.

Öffnen Sie das Feld „Mehrere Elemente“ und notieren Sie sich die Feld-ID. Sie finden dies in den Feldoptionen auf der Registerkarte „Allgemein“ .

multiple items field id

Machen Sie dasselbe für das Dropdown- Feld mit dem Namen „Menge“. Dies ist wichtig für den nächsten Schritt, da wir dort die Formel erstellen.

dropdown quantity field id

Jetzt müssen Sie nur noch diese IDs in die Formel (Produktpreis mal Menge) eingeben. Aus $FX_amount * $FX wird $F5_amount * $F10 .

Geben Sie die Formel $F5_amount * $F10 in das Formelfeld des Einzelartikelfelds „Gesamtpreis“ ein. Klicken Sie dann auf Formel validieren, um sicherzustellen, dass sie korrekt ist.

validate formula option

Wenn nun jemand ein Produkt und seine Menge auswählt, wird der Gesamtpreis dank der von Ihnen hinzugefügten benutzerdefinierten Formel automatisch berechnet!

Einfügen eines Standardsteuerabzugs

Wenn Sie Steuern ermitteln möchten, multiplizieren Sie normalerweise die Zwischensumme (Preis des Artikels mal Anzahl der Artikel) mit dem Steuersatz.

Wie Sie im letzten Schritt erfahren haben, lautet die Formel für die Summe unseres Anwendungsfalls (Preis des Artikels mal Anzahl der Artikel):

$F5_amount * $F10

Nehmen wir an, der Steuerbetrag wird als 10 % der Zwischensumme berechnet. Die Standardformel zur Steuerberechnung lautet wie folgt:

0.10 * ($F5_amount * $F10)

Die Gesamtsumme, in der die Steuer enthalten ist, wird durch Addition der Zwischensumme und der Steuer ermittelt. Das Folgende stellt die Gleichung dar:

($F5_amount * $F10) + (0.10 * ($F5_amount * $F10))

Dies kann überall dort hinzugefügt werden, wo Sie den Endbetrag anzeigen möchten. Wir verwenden das Feld „Einzelartikel“ , das wir „Gesamtpreis + Steuer“ genannt haben.

standard tax formula

Denken Sie daran, dass Sie beim Erstellen einer Formel die richtige Feld-ID verwenden müssen, damit die Mathematik richtig funktioniert. Weitere Informationen und Hilfe beim Erstellen von Formeln finden Sie in diesem Berechnungs-Spickzettel

5. Veröffentlichen Sie Ihr Rechnungs-/Bestellformular

Mit WPForms können Sie Ihr Formular ganz einfach veröffentlichen und live auf Ihrer Website veröffentlichen. Nachdem Sie mit der Erstellung Ihres Formulars fertig sind, klicken Sie auf die Schaltfläche„Speichern“ .

save form

Klicken Sie dann neben der Schaltfläche „Speichern“ auf „Einbetten“ . Sie können Ihr Formular auf einer neuen oder einer vorhandenen Seite veröffentlichen.

create new page

WPForms führt Sie zum WordPress-Editor, ohne dass Sie etwas tun müssen. Ihr Formular ist bereits auf der neuen Seite vorhanden.

Um Ihr Bestellformular und den Online-Rechner mit WPForms-Berechnungen zu aktivieren, müssen Sie lediglich auf die Schaltfläche „Veröffentlichen“ klicken.

publish form

Testen Sie nach der Veröffentlichung vorsorglich das eingebettete Formular, um sicherzustellen, dass es wie erwartet funktioniert, und um alle Bedenken auszuschließen.

form preview

FAQs zum Erstellen eines Preisrechners für Ihre Website

Berechnungen sind ein beliebtes Thema bei unseren Lesern. Hier finden Sie Antworten auf einige häufig gestellte Fragen dazu.

Wie erstelle ich einen benutzerdefinierten Rechner für meine Website?

Um einen benutzerdefinierten Rechner für Ihre Website zu erstellen, können Sie WPForms Pro mit dem Berechnungs-Add-on verwenden. Installieren Sie zunächst WPForms Pro auf Ihrer WordPress-Site.

Verwenden Sie dann den Drag-and-Drop-Builder, um Felder für Eingaben wie Mengen und Produktauswahlen hinzuzufügen, um Ihr Bestellformular zu vervollständigen.

Sobald Sie fertig sind, aktivieren Sie das Berechnungs-Add-on, um Operationen wie Addition oder Multiplikation basierend auf Benutzereingaben durchzuführen.

Wie fügt man einer Website Berechnungen hinzu?

Um Berechnungen zu einer Website hinzuzufügen, sollten Sie einen Formularersteller wie WPForms Pro verwenden, der ein Berechnungs-Add-on bietet.

Erstellen Sie nach der Installation von WPForms ein neues Formular und verwenden Sie die Berechnungsfunktion, um mathematische Operationen zu Ihren Feldern hinzuzufügen.

Sie können verschiedene Formeln mit einfachen arithmetischen oder komplexen Ausdrücken erstellen, um Werte dynamisch basierend auf Benutzereingaben zu berechnen, was ideal für Bestellformulare, Buchungsformulare und mehr ist.

Wie erstellt man eine Preisformel?

Um eine Preisformel auf Ihrer Website zu erstellen, können Sie WPForms Pro zusammen mit dem Berechnungs-Add-on verwenden.

Beginnen Sie damit, ein Formular mit Feldern für die von Ihnen angebotenen Artikel oder Dienstleistungen einzurichten. Ordnen Sie diesen Artikeln Preise zu.

Verwenden Sie dann das Berechnungs-Add-on, um eine Formel zu erstellen, die die Artikelpreise mit den Mengen multipliziert und etwaige zusätzliche Gebühren oder Rabatte hinzufügt.

Als Nächstes erfahren Sie, wie Sie einen benutzerdefinierten Hypothekenrechner erstellen

Möchten Sie einen individuellen Hypothekenrechner für Ihre Website erstellen? Mithilfe eines Online-Hypothekenrechners können Kreditsachbearbeiter die Vorabprüfung von Antragstellern schneller durchführen und den Papierkram reduzieren. Sehen Sie sich diese Anleitung an, wie Sie mithilfe einer WordPress-Vorlage einen benutzerdefinierten Hypothekenrechner erstellen.

Erstellen Sie jetzt Ihren Preisrechner

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.