Wenn Preise nicht auf der Seite stehen, fragen Besucher nicht – sie raten hoch und klicken weg. Je schneller sie eine Zahl sehen, desto unwahrscheinlicher ist es, dass sie zuerst zum Kontaktformular eines Mitbewerbers wechseln.
Wenn Ihre Preise von Variablen abhängen — Quadratmeter, Stunden, Add-ons, Menge — kann eine statische Tabelle das nicht anzeigen, und ein “Angebot anfordern”-Formular ist zu langsam. Die zuverlässigste Lösung für einen Preisrechner auf Ihrer Website ist ein eingebettetes Widget: Legen Sie Felder und Formel in einem visuellen Editor fest und fügen Sie dann einen einzigen Code-Schnipsel in die Seite ein. Kein Entwickler nötig, keine Tabellen-Hacks.
Der Elfsight Calculator macht genau das: Er ist ein Drag-and-Drop-Website-Rechner-Baukasten mit einer echten Formel-Engine, einem optionalen Lead-Erfassungsformular und einem Einbettungscode, der auf jeder Website funktioniert. In diesem Leitfaden erfahren Sie, wie Sie einen Schnellangebot-Rechner erstellen, ihn so konfigurieren, dass Leads erfasst werden, und ihn einbetten — plus Alternativen, damit Sie die passende Lösung für Ihren Anwendungsfall auswählen können.
- Der schnellste Weg, einen Preisrechner zu erstellen und einzubetten.
- Wie aus einer Kostenschätzung ein Lead wird
- Welcher Aktionstyp passt besser zu Sofortpreisgestaltung oder Angebotsanfragen
- Formel- und Feldkonfiguration, Schritt-für-Schritt
- Alternativen – und wo sie versagen.
Schnellstart: Erstellen Sie einen Preisrechner für Ihre Website
Hier ist der gesamte Prozess in vier Schritten, bevor wir auf die Details jedes einzelnen eingehen:
- Öffnen Sie den Kalkulations-Editor und wählen Sie eine Vorlage.
- Legen Sie Ihre Eingabefelder und die Formel fest.
- Klicken Sie auf „Kostenlos zur Website hinzufügen“, um den Einbettungscode zu erzeugen.
- Füge den Code in den Backend-Bereich deiner Website ein und veröffentliche ihn.
Erstellen Sie Ihren Preisrechner im interaktiven Editor unten ↓
Beliebte Wege, einen Preisrechner in Ihre Website zu integrieren.
Es gibt mehrere Wege, einen funktionsfähigen Preisrechner für kleine Unternehmen auf eine Seite zu integrieren – je nach Aufwand, Flexibilität und dem, was passiert, nachdem der Besucher seine Zahl gesehen hat.
| Methode | Erforderliche Fähigkeiten | Anpassung | Lead-Generierung | Kosten |
|---|---|---|---|---|
| Rechner-Widget (Elfsight) | Ohne Code | Hoch | Integriertes Formular | Kostenloser Plan / Bezahlversion |
| Von Hand geschriebenes JavaScript | Entwickler | Unbegrenzt | Sie bauen es | Entwicklungszeit |
| Spreadsheet-Einbettung (Google Sheets) | Basis | Niedrig | Keine | Kostenlos |
| Allgemeines Formular-Plugin mit Mathe-Funktionen. | Basis – Moderat | Mittel | Nur Formular | Kostenlos / Bezahlt |
Hier liegt der Kompromiss zwischen Kontrolle und Aufwand. Von Hand codiertes JavaScript bietet volle Flexibilität, erfordert aber laufende Entwicklung und Wartung, während eine Google Sheets-Einbettung schnell und kostenlos ist – jedoch begrenzt und unausgereift bleibt. Widgets und Formular-Plugins liegen dazwischen – weniger flexibel als eigener Code, aber deutlich leichter zu verwalten.
Richten Sie Ihren Rechner ein, um Kosten zu schätzen und Leads zu erfassen
Bevor Sie loslegen, legen Sie fest, was passieren soll, sobald ein Besucher seinen Preis sieht. Ein Website-Rechner kann drei Aufgaben separat erledigen: Eine Preisfrage beantworten, Lead-Informationen für das Follow-up erfassen und zur Checkout- oder Buchungsseite weiterleiten. Keiner ist grundsätzlich besser – es kommt darauf an, ob Ihr Ziel Transparenz, Lead-Erfassung oder Konversion ist.
Keine Aktion, Lead-Formular oder Weiterleitung: Welche Option passt zu Ihrem Ziel?
Jede Aktionsart beendet die Besucherreise auf unterschiedliche Weise. Ordnen Sie sie daher so zu, dass der Besucher als Nächstes genau das tut, was Sie möchten. So vergleicht man die drei Optionen – inklusive des jeweiligen Hakens, der mit jeder einhergeht:
| Aktionsart | Was passiert nach dem Ergebnis?? | Verwenden Sie es, wenn | Der Kompromiss |
|---|---|---|---|
| Keine Aktion | Der Besucher sieht nur den Preis – nichts weiter. | Sie möchten transparente Selbstbedienungs-Preise und weniger Preisabfragen per E-Mail | Sie erhalten keinerlei Kontaktdaten – keine Möglichkeit, jemanden nachzufassen, der sich nicht gemeldet hat. |
| Lead-Formular | Es erscheint ein Popup-Formular, das die Daten der Besucher sammelt. | Sie möchten Leads, und eine Zahl allein reicht nicht — Sie fassen nach, um den Abschluss zu erzielen. | Verursacht Reibung; einige Besucher, die nur eine grobe Orientierung wollten, füllen es nicht aus. |
| Weiterleiten | Ein CTA-Button führt sie zu einer anderen Seite weiter | Der nächste Schritt ist festgelegt — Checkout, Online-Terminbuchung, Produktseite | Leiten Sie sie weiter; übergeben Sie sie direkt an den nächsten Schritt, statt sie zuerst zu erfassen. |
Für einen Angebotsrechner ist in der Regel das Lead-Formular die richtige Wahl. Der Besucher erhält seinen Kostenvoranschlag; danach erscheint ein Formular in einem Overlay-Popup, um seine Daten zu erfassen, sodass du den Lead genau dann erfasst, wenn er am meisten interessiert ist – und die geschätzte Summe bereits vorliegt.
Es folgt derselben Logik wie der Einsatz eines KI-Chatbot zur Lead-Generierung: Begegnen Sie dem Besucher dort, wo seine Absicht am stärksten ist.
Über 300 Rechner-Vorlagen entdecken
Schritt-für-Schritt: Preisrechner erstellen und einbetten
Sobald der Aktions-Typ festgelegt ist, bleibt nur noch der Rechner im Editor über die vier Registerkarten – Build, Action, Style, Settings – zusammenzustellen und anschließend einzubetten. Legen wir los.
Schritt 1: Vorlage auswählen oder eine mit KI generieren
Wenn Sie ein neues Rechner-Widget erstellen, öffnet sich zuerst eine Vorlagenanzeige. Es gibt 100+ Vorlagen, gruppiert nach Anwendungsfall. Für eine Preisgestaltung finden Sie vorkonfigurierte Startpunkte in der Kategorie Kostenrechner. Wählen Sie diejenige, die Ihrem Anwendungsfall am nächsten kommt – später können Sie sie anpassen.
Wenn nichts sauber passt, ist der KI-Rechner-Generator der schnellste Weg. Beschreiben Sie, was Sie preislich festlegen, in einfachen Worten – dann erstellt er Felder, Bezeichnungen und Formeln für Sie. Betrachten Sie das Ergebnis zunächst als Entwurf zur Verifizierung, doch es erspart Ihnen, alles von Hand zu verknüpfen.
Beispiel-Aufforderung für einen benutzerdefinierten Taschenrechner:
Erstellen Sie einen interaktiven Preisrechner auf der Website einer Webdesign-Agentur. Der Rechner schätzt die Projektpreise basierend auf den Nutzerauswahlen und aktualisiert den Gesamtpreis in Echtzeit. Verwenden Sie ein klares, modernes Layout, das sich gut in eine Geschäftswebsite einbetten lässt.
Fügen Sie diese Felder und Preisregeln hinzu:
1. ...
2. ...
3. ...Schritt 2: Fügen Sie Ihre Eingabefelder hinzu
Starte die Konfiguration mit Feldern — das sind die Bausteine, mit denen der Besucher interagiert, die Variablen, von denen dein Preis abhängt. Im Build Tab klickst du +Feld hinzufügen und wählst einen Typ. Für Preisgestaltungen greifst du vorwiegend zu diesen:
- Anzahl (Menge oder Stunden)
- Schieberegler (eine Skala, z. B. Quadratmeter)
- Dropdown (Stufen oder Service-Level),
- <strong>Auswahl</strong> (Add-ons als Radiobuttons oder Kontrollkästchen)
Weisen Sie Ihrem Preismodell Felder zu, bevor Sie etwas hinzufügen: Jede Zahl, die den Endpreis beeinflusst, benötigt ihr eigenes Feld. Ein häufiger Fehler zu Beginn ist, mehrere Variablen in einem Dropdown zu bündeln — halten Sie sie getrennt, damit die Formel jede einzelne sauber referenzieren kann.
Jedes Feld (außer dem Überschrift-Feld) unterstützt ebenfalls bedingte Logik. Verwenden Sie das Überschrift-Feld, um einen langen Rechner in beschriftete Abschnitte zu gliedern – es ist dekorativ und hat keinen Wert, daher beeinflusst es die Mathematik nicht.
Schritt 3: Erstelle die Formel, die einen Preis berechnet
Dies ist der Kern eines interaktiven Rechners für Ihre Website – der zeitaufwändigste Schritt. Planen Sie hier Ihre Zeit ein.
Klicken Sie auf +Berechnung hinzufügen und bauen Sie die Formel im Editor zusammen, indem Sie Felder, Operatoren, Funktionen und eingetragene Zahlen kombinieren. Das Widget unterstützt SUM, ROUND, MAX, MIN, IF/THEN-Bedingungen und logische Operatoren.
Unterhalb der Formel geben ein paar Steuerelemente vor, wie sich das Ergebnis verhält. Schalte Ergebnisse anzeigen ein oder aus, um diese Berechnung anzuzeigen oder auszublenden, und markiere sie als ein Primäres oder Sekundäres Ergebnis (Primär ist die Überschrift, Sekundär die ergänzenden Details). Wie bei Feldern hat jede Berechnung eine eigene bedingte Logik, sodass du ein Ergebnis nur dann anzeigen kannst, wenn bestimmte Eingaben erfüllt sind.
Es gibt außerdem einen Mit KI generieren-Button im Formel-Editor, der eine Formel aus einer Beschreibung in natürlicher Sprache ableitet, aber alle Felder müssen zuerst vorhanden sein.
Schritt 4: Kopfzeile und Ergebnisbereich formatieren
, “Get Your Cleaning Estimate”) and an optional Caption to set expectations in a single line.”>Unter Berechnungen können Sie die Kopfzeile Ihres Rechners und die endgültige Schätzung konfigurieren. Beginnen Sie mit der Kopfzeile — sie enthält den Titel des Rechners (z. B. , “Erhalten Sie Ihre Reinigungs-Schätzung”) und eine optionale Beschriftung, um Erwartungen in einer einzigen Zeile festzulegen.
Hier finden Sie auch die Funktionen für Angebotsdokumente. Aktivieren Sie Druck-Schaltfläche anzeigen und Download-Schaltfläche anzeigen — Drucken öffnet den Druckdialog des Browsers, und Download erzeugt eine PDF, die die Eingaben und Ergebnisse des Besuchers enthält.
Unter dem Dokumentkopf, fügen Sie Ihr Logo und Ihre Firmeninformationen hinzu, damit das Ergebnis wie ein echtes Markenangebot aussieht statt eines bloßen Ausdrucks:
Das ist wichtiger, als es klingt: Ein herunterladbares Angebot kann von einem Besucher an einen Entscheidungsträger weitergeleitet werden – und so Ihre Reichweite unbemerkt erweitern.
Schritt 5: Aktion konfigurieren – Lead erfassen
Hier wird aus der vorherigen Entscheidung eine Einstellung. Die Aktionsregisterkarte öffnet sich mit einem Drei-Wege-Toggle — Weiterleitung, Lead-Formular und Keine Aktion — und bei einem Kostenvoranschlagsrechner ist Lead-Formular fast immer die richtige Wahl.
Mit ausgewähltem Lead-Form legen Sie den Text für die Schaltfläche „Formular öffnen“ fest und bestimmen die Formularfelder. Die Standardwerte sind alle bearbeitbar: Felder hinzufügen, entfernen oder neu ordnen – und halten Sie es kurz. Jedes zusätzliche Pflichtfeld senkt die Abschlussraten. Es stehen dreizehn Feldtypen zur Verfügung, darunter Datum, Dateiupload und Versteckt (nützlich fürs Tracking).
Unterhalb der Felder befinden sich fünf Konfigurationsbereiche, die die eigentliche Arbeit einer Lead-Pipeline erledigen:
- Senden-Schaltfläche — Legen Sie den Text der Schaltfläche fest und eine Aktion nach dem Absenden fest: eine Erfolgsmeldung anzeigen (benutzerdefinierter Titel, Text, optionaler Button), zu einer URL weiterleiten oder nichts tun.
- E-Mail-Benachrichtigungen — Notify Me benachrichtigt Sie bei jeder Übermittlung; Notify Respondents senden dem Besucher automatisch eine Antwort, mit Logo- und Signatur-Unterstützung.
- Integrationen — Übermitteln Sie Einsendungen an Google Sheets, Zapier, Make.com, Mailchimp oder Webhooks.
- Zahlung — Verbinden Sie Stripe, um bei der Übermittlung eine Zahlung zu verlangen; es funktioniert nur innerhalb des Lead-Formular-Flows und benötigt ein verbundenes Konto, daher ist es ein Zahlung-bei-Übermittlung-Schritt, kein eigenständiger Checkout.
- Spam-Schutz — ein unsichtbarer reCAPTCHA-Schalter; bei Aktivierung wird der gesetzlich vorgeschriebene Text von Google in die Fußzeile des Widgets eingefügt (übersetzbar, aber nicht entfernbar).
Schritt 6: Stilisieren Sie Ihren Rechner
Im Stil-Reiter beginnen Sie mit einer der visuellen Vorlagen im Karussell oben — das ist eine schnelle Methode, um einen stimmigen Look zu erzielen, bevor Sie Feinheiten anpassen. Sechs Steuerelemente übernehmen den Rest – stimmen Sie sie auf Ihre Marke ab; der Rechner sollte als Teil Ihrer Website wahrgenommen werden, nicht als Aufsatz.
- Schriftart – Wählen Sie aus der Dropdown-Liste oder bleiben Sie bei Standard. Verwenden Sie dieselbe Schriftfamilie wie den Fließtext Ihrer Website, damit der Rechner nicht wie ein eingebettetes iFrame wirkt.
- Hintergrund — Legen Sie eine Farbe oder ein Bild für das gesamte Berechnungsfeld fest. Eine einfarbige Farbe, die zum Hintergrund Ihres Abschnitts passt, schlägt in der Regel ein überladenes Bild, das mit den Eingabefeldern um Aufmerksamkeit kämpft.
- Textfarbe — die globale Textfarbe für Beschriftungen und Feldtexte. Prüfen Sie den Kontrast zum Hintergrund, insbesondere bei dunklem Panel verwenden.
- Feld-Akzentfarbe — Die Farbe interaktiver Elemente wie Slider-Spuren und Fokuszustände. Sie signalisiert „das ist anklickbar.“ Verwende daher deine Markenfarbe für Handlungsaufrufe, statt eines gedämpften Tons.
- Ergebnis-Hintergrundfarbe — das Panel hinter dem berechneten Preis. Geben Sie ihm einen leichten Kontrast zum Haupthintergrund, damit sich das Ergebnis visuell von den Eingaben abhebt — es ist die Zahl, die die Besucher sehen sollen.
- Farbe des Aktionsbuttons — Die Farbe des CTA-, Absende- und Weiterleitungs-Buttons. Halte sie konsistent mit den primären Buttons an anderer Stelle deiner Website, damit der Call-to-Action des Rechners vertraut wirkt.
Schritt 7: Kalkulator-Einstellungen anpassen
Unter Einstellungen legen Sie Ihre Tausender- und Dezimaltrennzeichen fest (wichtig für Preisformate außerhalb der USA), die Breite des Rechners und die Anzeigesprache. Die Felder für benutzerdefiniertes CSS und JS stehen zur Verfügung, falls die Steuerelemente nicht alles abdecken – allerdings läuft benutzerdefiniertes JS nur auf Ihrer Live-Website, nicht im Editor.
Für fortgeschrittene Integrationen gibt es außerdem die Möglichkeit, den Calculator per API zu verwenden.
Schritt 8: Den Rechner in Ihre Website einbetten
Klicken Sie auf Kostenlos zur Website hinzufügen, kopieren Sie den generierten Einbettungscode und fügen Sie ihn in einen benutzerdefinierten HTML-Block auf Ihrer Seite ein.
Der Code funktioniert auf jeder Plattform, die benutzerdefiniertes HTML akzeptiert, einschließlich WordPress, Shopify, Wix, Squarespace und Webflow. Die Einrichtung unterscheidet sich je nach Plattform leicht – folgen Sie den Links für CMS-spezifische Schritte. Änderungen, die Sie nach dem Bearbeiten im Editor vornehmen, gehen automatisch live — Sie müssen den Code nicht erneut einfügen.
Schneller Fehlerbehebungs-Check
- Formel lässt sich nicht validieren: Sie haben einen Feldnamen eingegeben, statt ihn aus der Dropdown-Liste auszuwählen. Fügen Sie ihn erneut aus der Feldliste ein.
- Benutzerdefiniertes JS bewirkt nichts: Es läuft nur auf der Live-Website, nicht in der visuellen Editor-Vorschau.
- Druckausgabe wirkt fehlerhaft: Überprüfen Sie die Einstellungen des Abschnitts Ergebnisse und der Kopfzeile des Dokuments – das Druckverhalten ist dort festgelegt.
- Widget-Größe passt nicht: Passen Sie die Rechnerbreite in den Einstellungen und die Container-Breite auf Ihrer Plattform an.
Andere Möglichkeiten, einen Rechner in Ihre Website einzubetten
Ist ein Widget nicht die passende Lösung? Hier sind die gängigsten Alternativen – inklusive der jeweiligen Vor- und Nachteile jeder Option.
Manuell codierter JavaScript-Rechner
Dieser Ansatz macht Sinn, wenn Sie Funktionen benötigen, die über das hinausgehen, was ein Widget bietet – z. B. API-Integrationen, benutzerdefinierte Logik oder eine vollständig maßgeschneiderte Oberfläche. Von Grund auf neu zu bauen, schenkt Ihnen maximale Flexibilität und keine wiederkehrenden Gebühren, bedeutet aber auch, dass Sie Entwicklung, Wartung und Updates selbst übernehmen.
- Schreiben Sie das HTML-Formular für Ihre Eingabefelder.
- Schreiben Sie eine JavaScript-Funktion, die die Eingaben ausliest und das Ergebnis berechnet.
- Gestalten Sie es mit CSS so, dass es zu Ihrer Website passt.
- Fügen Sie es Ihrer Seite hinzu und übernehmen Sie Validierung und Randfälle selbst.
Eingebetteter Google Sheets-Rechner
Wenn Ihre Preiskalkulation bereits in einer Tabelle steckt, ist das Veröffentlichen im Web eine schnelle, kostenlose Möglichkeit, sie online zugänglich zu machen. Es funktioniert gut als Übergangslösung, doch Besucher arbeiten mit rohen Tabellenzellen, und es gibt keine integrierte Möglichkeit, Leads zu erfassen.
- Erstellen Sie Ihre Formel-Logik in einem Google Sheet.
- Veröffentlichen Sie das Blatt bzw. den relevanten Bereich im Web.
- Binden Sie es über das generierte iFrame in Ihre Seite ein.
Formular-Plugin mit Berechnungs-Add-on
Wenn Sie bereits ein Formular-Plugin wie Gravity Forms oder WPForms verwenden, können dessen Berechnungsfunktionen einfache Preisrechner abdecken und alles in einem Tool behalten. Die Einschränkung ist, dass diese Plattformen primär für Formulare gedacht sind, sodass fortgeschrittene Berechnungslogik schnell mühsam wird.
- Installieren Sie ein Formular-Plugin, das arithmetische Felder unterstützt.
- Zahlenfelder hinzufügen und ein Berechnungsfeld.
- Die Formel in der Plugin-Oberfläche konfigurieren.
Optimierungstipps für Ihren Kostenvoranschlagsrechner
Setup abgeschlossen — so holen Sie das Maximum heraus: Das trennt ein Tool, das von Nutzern ignoriert wird, von einem, das konvertiert.
- Zu Beginn die einfach zu beantwortenden Felder verwenden. Beginnen Sie mit den leichtesten Eingaben (Menge, Dropdown), damit Besucher Momentum entwickeln, bevor sie sich Schwierigerem zuwenden. Die Absprungrate ist beim ersten schweren Feld am höchsten.
- Zeige zuerst ein Ergebnis, bevor Kontaktdaten abgefragt werden. Mit Lead Form erscheint zuerst die Schätzung, dann das Pop-up. Behalten Sie diese Reihenfolge bei — das Verstecken der Telefonnummer hinter dem Formular senkt die Abschlussquoten.
- Interne Berechnungen ausblenden. Verwenden Sie den Schalter „In Ergebnissen anzeigen“, um Margen- oder Kostenbasisberechnungen vor dem Besucher zu verbergen, während sie weiterhin in der endgültigen Formel verwendet werden.
- Nutzen Sie bedingte Logik, um es kurz zu halten. Zeigen Sie erweiterte Felder nur bei Relevanz (z. B. zeigen Sie „Anzahl der Räume“ erst, nachdem „Dienstleistungstyp = Reinigung“ ausgewählt wurde), damit der Rechner von Anfang an nicht einschüchternd wirkt.
- Tausender- und Dezimaltrennzeichen je Markt festlegen. In den Einstellungen passen Sie Tausender- und Dezimaltrennzeichen Ihrem Publikum an – ein europäischer Besucher interpretiert „1,000“ anders als ein US-Besucher.
- Automatische Antwort mit dem Kostenvoranschlag. Aktivieren Sie Notify Respondents, damit Einsender ihre Nummer sofort per E-Mail mit Ihrem Branding erhalten — so bleiben Sie präsent, während Sie eine echte Nachverfolgung vorbereiten.
Häufig gestellte Fragen
Wie füge ich meiner Website einen Preisrechner hinzu – ganz ohne Programmierung?
Kann ein Angebotsrechner Leads generieren, bevor das Ergebnis angezeigt wird?
Funktioniert das Rechner-Widget auch mobil?
Kann ich Zahlungen über den Rechner abwickeln?
Warum berechnet sich meine Formel nicht richtig?
Fazit
Ein Preisrechner verwandelt die vage Frage “Wie viel würde das kosten?” in eine Zahl, die der Besucher selbst erhält – und, wenn Sie ihn so einrichten, auch zu einem Lead mit dem bereits angehängten Kostenvoranschlag. Der von Ihnen zu Beginn gewählte Aktionstyp (sofortiges Ergebnis, Lead-Formular oder Weiterleitung) übernimmt den Großteil der Arbeit bei der Entscheidung, ob der Rechner Besucher informiert oder konvertiert.
Wenn Sie bereit sind zu bauen, öffnen Sie das Kalkulator-Widget und beginnen Sie mit einer Vorlage, die zu Ihrem Preismodell passt. Stellen Sie die Aktion auf Lead-Formular, bekommen Sie eine Formel von Anfang bis Ende zum Laufen, und betten Sie es zunächst auf einer einzigen Seite ein – den Rest verfeinern Sie, sobald echte Einsendungen eingehen.
