So erstellen Sie ein WordPress-Angebotsformular mit Stripe-Zahlungen

Starten Sie im Formularbildschirm des Plugins und oeffnen Sie den KI-Assistenten. Beschreiben Sie das Geschaeftsmodell, die Pakete, die benoetigten Felder und die Zahlungsabsicht. In diesem Beispiel fragt der Prompt nach einem Website-Projekt-Angebotsformular, das Online-Website-Pakete verkauft.

Ziel ist nicht, das KI-Ergebnis blind zu veroeffentlichen. Nutzen Sie es, um schneller einen strukturierten ersten Entwurf zu erhalten: Paketauswahl, optionale Services, Kontaktfelder, eine finale Zusammenfassung und einen Zahlungsschritt.

Pruefen Sie nach der Generierung den Builder, bevor Sie Zahlungseinstellungen anfassen. Der erste Durchlauf sollte bereits die Hauptschritte der Kaeuferreise enthalten: Paketwahl, Projektdetails, Optionen, Kontaktdaten und Checkout.

Benennen Sie Beschriftungen um, entfernen Sie unnoetige Fragen und richten Sie das Formular auf ein klares Angebot aus. Ein Stripe-Angebotsformular konvertiert besser, wenn der Besucher genau versteht, was er reserviert oder bezahlt.

Kehren Sie zur Formularliste zurueck und bestaetigen Sie, dass das neue Formular unter einem erkennbaren Namen gespeichert ist. Das ist wichtig, wenn die Website mehrere Angebotsformulare, Demos oder kundenspezifische Rechner hat.

Im Artikelbeispiel heisst das Formular Website-Projekt-Angebot & Anzahlung, damit der Zahlungszweck im Admin klar bleibt.

Oeffnen Sie den Builder erneut und bestaetigen Sie, dass die Kundenreise logisch ist. Ein gutes Angebots-zu-Zahlung-Formular sollte keine Zahlung verlangen, bevor der Besucher Angebot und Summe verstanden hat.

In diesem Beispiel kommen Paket- und Optionswahlen zuerst, dann erscheint der Zahlungsmethoden-Schritt nach der Berechnung der Summe, und die finale Zusammenfassung erscheint vor dem Oeffnen des Stripe-Modals.

Oeffnen Sie die Formulareinstellungen, dann Zahlung und den Stripe-Tab. Aktivieren Sie Stripe-Zahlung verwenden, nutzen Sie zuerst den Sandbox- oder Testmodus, fuegen Sie die oeffentlichen und geheimen Stripe-Testschluessel ein, waehlen Sie die Waehrung und legen Sie die Option Zahlbetrag fest.

Fuer diese Anleitung ist Zahlbetrag auf Prozentsatz des Gesamtpreises mit 30 im Prozentfeld gesetzt. Das ist fuer Anzahlungen nuetzlich, weil der Kunde das Projekt reservieren kann, ohne die gesamte Schaetzung im Voraus zu zahlen.

Erstellen oder bearbeiten Sie die WordPress-Seite, die das Angebotsformular hosten wird. Fuer einen fokussierten Angebots-Funnel betten Sie das Formular im Vollbildmodus ein, damit die Kaeufererfahrung nicht visuell mit dem umgebenden Theme konkurriert.

Verwenden Sie den Formular-Shortcode und fuegen Sie das Vollbild-Attribut hinzu.

Oeffnen Sie die oeffentliche Seite und starten Sie als normaler Besucher. Der erste Bildschirm sollte das Angebot offensichtlich machen und nicht wie ein generisches Kontaktformular wirken.

Fuer ein Website-Angebotsformular sollten Paketnamen und Preise vor optionalen Fragen sichtbar sein. Das gibt dem Besucher genug Kontext, um fortzufahren.

Waehlen Sie ein Paket und bestaetigen Sie, dass sich die Live-Summe sofort aktualisiert. Das ist der Kernvorteil eines Angebotsformulars gegenueber einem normalen Kontaktformular: Der Kaeufer sieht die Preisfolge jeder Wahl.

Wenn die Summe nicht den Erwartungen entspricht, korrigieren Sie die Preise der Formularelemente, bevor Sie Stripe testen. Zahlungseinstellungen sollten die letzte Ebene sein, kein Workaround fuer falsche Angebotslogik.

Gehen Sie weiter zum Zahlungsmethoden-Schritt und bestaetigen Sie, dass die Option fuer sichere Kartenzahlung nach der Angebotsberechnung erscheint. In diesem Beispiel zeigt das Formular weiterhin die volle Angebotssumme von 2.400 $ im Schritt.

Die 30-%-Regel wird beim Oeffnen des Stripe-Modals angewendet, wo die faellige Anzahlung 720 $ betraegt. Diese Trennung ist wichtig: Die Formularsumme bleibt die Angebotssumme, waehrend Stripe den konfigurierten Zahlbetrag erhaelt.

Pruefen Sie vor dem Oeffnen des Stripe-Modals die finale Zusammenfassung. Eine gute Zusammenfassung hilft dem Kunden zu verstehen, was er gewaehlt hat, und gibt dem Unternehmen einen saubereren Lead- oder Bestelldatensatz.

Stellen Sie sicher, dass erforderliche Kontaktfelder ausgefuellt sind und die Zusammenfassungszeilen dieselben Auswahlen und Preise wie zuvor im Formular widerspiegeln.

Klicken Sie auf den Stripe-Zahlungsbutton und bestaetigen Sie, dass sich das sichere Stripe-Modal oeffnet. In dieser Demo zeigt das Modal eine Anzahlung von 720 $ aus der 30-%-Regel. Die Kartendaten sollten von Stripe verarbeitet werden, nicht von gewoehnlichen Formularfeldern.

Verwenden Sie im Testmodus nur Stripe-Testkarten. Pruefen Sie nach einem erfolgreichen internen Test Bestaetigungs-E-Mails, Bestelldatensaetze, Analytics-Ereignisse und Anzahlungs- oder Rueckerstattungstexte, bevor Sie das Formular auf Stripe-Live-Schluessel umstellen.