So erstellen Sie ein mehrstufiges Zahlungsformular in WordPress mit Forminator

Möchten Sie Zahlungen auf Ihrer WordPress-Website einfacher, schneller und benutzerfreundlicher gestalten? Mit dem mehrstufigen Zahlungsformular von Forminator erstellen Sie elegante, interaktive Formulare, die Ihre Nutzer Schritt für Schritt durch den Zahlungsprozess führen. Ideal für Dienstleistungs-Websites, Kursanmeldungen, Veranstaltungsbuchungen oder einfache E-Commerce-Anwendungen.

Die kostenlose Version von Forminator bietet zahlreiche leistungsstarke Funktionen wie Drag-and-Drop-Felder, dynamische Zahlungsmethoden und Stripe-Abonnementformulare. Gleichzeitig werden häufig auftretende Probleme behoben, wie z. B. Probleme beim anfänglichen Laden des Formulars, Berechnungsfehler, ungültige Stripe-Schlüssel, Probleme mit dem Benutzeranmeldeformular und Probleme bei der Google Sheets-Integration.

In diesem Blogbeitrag zeigen wir Ihnen, wie Sie mit Forminator Ihr eigenes mehrstufiges Zahlungsformular in WordPress einrichten und heben wichtige Fehlerbehebungen und Funktionen hervor, um einen reibungslosen Ablauf zu gewährleisten.

Warum sollte man Forminator für Zahlungsformulare verwenden?

Forminator ist ein leistungsstarker und benutzerfreundlicher WordPress-Formulargenerator, mit dem sich individuelle Zahlungsformulare unglaublich einfach erstellen lassen, selbst für Anfänger.

Mit über 600.000 aktiven Installationen genießt es das Vertrauen von Website-Betreibern aus allen Branchen für alles von der Leadgenerierung bis hin zu Online-Zahlungen und -Registrierungen.

Was Forminator auszeichnet, ist seine Vielseitigkeit. Es bietet eine breite Palette an Formulartypen, darunter Zahlungsformulare, Registrierungsformulare, Anmeldeformulare, Umfragen, Quizze und vieles mehr.

Das Wichtigste ist jedoch die integrierte Unterstützung für Stripe und PayPal, die es Ihnen ermöglicht, einmalige Zahlungen, Abonnements oder Spenden direkt über Ihre Website sicher und ohne zusätzliche Plugins oder komplexe Integrationen einzuziehen.

Forminator eignet sich hervorragend zum Erstellen mehrstufiger Formulare, da Sie lange oder komplexe Formulare in kleinere, benutzerfreundliche Schritte unterteilen können. Dies verbessert nicht nur die Benutzerfreundlichkeit, sondern reduziert auch die Abbruchrate.

Mit Funktionen wie bedingter Logik, visuellen Fortschrittsanzeigen und Berechnungsfeldern können Sie fortschrittliche Zahlungsabläufe erstellen, die auf Ihre Geschäftsanforderungen zugeschnitten sind, egal ob es sich um die Buchung von Dienstleistungen, die Anmeldung zu Kursen oder den Verkauf von Produkten handelt.

Und da es sich um ein kostenloses Plugin handelt, erhalten Sie Zugriff auf all diese leistungsstarken Funktionen ohne Vorabkosten. Für Unternehmen, die eine einfache, flexible und moderne Lösung zum Erstellen von Zahlungsformularen suchen, ist Forminator eines der besten Tools auf dem Markt.

Vergleich: Square vs. PayPal

Schritte zum Erstellen eines WordPress-Zahlungsformulars mit Forminator Forms

Mit Forminator ist es einfacher denn je, ein reibungsloses Zahlungserlebnis auf Ihrer WordPress-Website zu schaffen.

Lassen Sie uns Schritt für Schritt den Prozess der Einrichtung eines dynamischen Zahlungsformulars mit erweiterten Funktionen und wichtigen Korrekturen durchgehen, die Funktionalität, Sicherheit und Benutzerfreundlichkeit verbessern.

Schritt 1: Installieren und aktivieren Sie das Forminator-Plugin

Das Wichtigste zuerst: Die Installation des Forminator-Plugins ist schnell und unkompliziert.

• Gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Plugins ⟶ Neu hinzufügen.

• Geben Sie in der Suchleiste „Forminator“ ein.

• Klicken Sie auf Installieren und anschließend auf Aktivieren.

Forminator ist ein kostenloses Plugin mit über 600.000 aktiven Installationen, das regelmäßig mit Fehlerbehebungen wie dem Test-Dashboard, der Einstellungsseite und der manuellen Aktivierung aktualisiert wird, um eine stabile Performance zu gewährleisten. Es verfügt außerdem über Korrekturen für die Formularübermittlung und die API-Methode, um eine reibungslose Backend-Verarbeitung zu unterstützen.

Schritt 2: Ein neues Formular von Grund auf erstellen

Nach der Aktivierung:

• Gehen Sie zu Forminator ⟶ Formulare ⟶ Neu erstellen.

• Wählen Sie „Leeres Formular“, um von Grund auf neu zu beginnen, oder verwenden Sie eine der in der Vorschau angezeigten Formularvorlagen mit Korrekturoptionen.

Fügen Sie Titel und Untertitel direkt im Formulargenerator hinzu. Sie können benutzerdefinierte Formatierungen anwenden oder die korrekte CSS-Syntax verwenden, um das Erscheinungsbild zu verbessern.

Forminator unterstützt erweiterte Formulare, die bedingt sichtbare Felder enthalten (dank der Korrektur der bedingten Logik) und verschiedene Formulartypen wie die Korrektur für standortübergreifende Registrierungsformulare und die Korrektur für Kursanmeldeformulare.

Der Formulargenerator verzichtet nun auf veraltete Tabellenstrukturen und beinhaltet zahlreiche Verbesserungen der Barrierefreiheit, um sicherzustellen, dass Ihre Formulare nutzbar und konform sind.

Schritt 3: Produkt- oder Dienstleistungsauswahlfelder hinzufügen

Dieser Schritt legt fest, wie die Nutzer auswählen, wofür sie bezahlen, seien es Produkte, Tarife oder Dienstleistungen.

Verwendung des Auswahlfelds (für mehrere Artikel wie Sofas): Fügen Sie ein Auswahlfeld für Produktoptionen wie Modernes Sofa, Klassisch oder Relaxsessel hinzu.

• Aktivieren Sie Mehrfachauswahl, Preisgestaltung und verwenden Sie die Formelkorrektur für Berechnungsfelder, um Summen automatisch zu berechnen.

• Das Formular unterstützt nun Korrekturen der Zahlenformatierung, Standardwerte und Zeilenumbrüche und eignet sich perfekt für Produktlisten.

Anwendungsbeispiel: Ein Möbelhändler kann mehrere Formulare für verschiedene Kategorien erstellen und die Produktpreise dynamisch verwalten. Diese Formulare vermeiden Probleme wie fehlerhafte Formularfunktionen und beinhalten Funktionen zur Zahlungsabwicklung.

Verwendung des Optionsfelds mit Bildern (zur visuellen Auswahl): Verwenden Sie das Optionsfeld, um Benutzern die visuelle Auswahl eines Produkts zu ermöglichen.

• Laden Sie für jede Option Produktbilder, z. B. von Couchtischen, hoch.

• Legen Sie eine Standardauswahl fest und verwenden Sie bedingte Logik für dynamische Abläufe.

Dank der überarbeiteten Tab- und Benachrichtigungsfeld-Designs profitieren Nutzer nun von einer flüssigeren Benutzeroberfläche. Die verbesserte Bearbeitung des Textfelds ermöglicht zudem formatierte Beschreibungen mit Produktbildern.

Select vs Radio: Verwenden Sie Select für Mehrfachauswahl oder Massenauswahl mit Berechnungen; wählen Sie Radio Buttons, wenn visuelle Auswahl und Logik für Einzelwahl wichtiger sind.

Die aktualisierte Version von Forminator behebt außerdem Probleme wie die Korrektur des PDF-Zahlungsfelds, die Korrektur der PayPal-Rechnungsdetails, die Korrektur der Verbindung zu Google Sheets, die Kompatibilität mit bestehenden Google Sheets-Dateien und die Validierung von Upload-Dateien direkt im Programm. Damit ist Forminator eine robuste Lösung für jedes Online-Zahlungsszenario.

Seien Sie gespannt auf die nächsten Schritte, in denen wir Zahlungsgateways hinzufügen, bedingte Logik anwenden und Ihr Zahlungsformular mit sicheren Funktionen zur Behebung von Sicherheitslücken und zur Sicherung geheimer Schlüsselverschlüsselung finalisieren werden.

Sie möchten eine visuelle Anleitung? Sehen Sie sich dieses Schritt-für-Schritt-Video zur Erstellung eines mehrstufigen Zahlungsformulars mit Forminator an und erleben Sie den gesamten Prozess live!

Schritt 4: Kundendaten erfassen

Sobald Ihre Nutzer die Produkte oder Dienstleistungen ausgewählt haben, erfassen Sie deren Kontakt- und Lieferdaten. Um die Übersichtlichkeit und den Nutzerfluss zu verbessern, fügen Sie einen Seitenumbruch ein, um die Produktauswahl von den persönlichen Daten zu trennen.

Empfohlene Felder zum Hinzufügen:

• Vollständiger Name: Verwenden Sie das Namensfeld (nicht nur ein einfaches Textfeld) für strukturierte Eingaben. Dieses erweiterte Feld hilft Ihnen, häufige Fehler bei der Formularkorrektur zu vermeiden, die durch falsch formatierte Namenseingaben entstehen.

• E-Mail-Adresse mit Bestätigung: Nutzen Sie die integrierte E-Mail-Bestätigungsoption. Dadurch werden Probleme mit ungültigen oder fehlerhaften Daten vermieden und die Zustellgenauigkeit verbessert. Auch die bedingte Logikkorrektur per E-Mail wird unterstützt.

• Telefonnummer: Fügen Sie ein Nummernfeld mit aktivierter internationaler Validierung hinzu, um länderspezifische Formatierung zu gewährleisten. Achten Sie darauf, eine Korrektur der Nummernformatierung einzuschließen, um Dateninkonsistenzen zu vermeiden.

• Adresse: Verwenden Sie ein mehrzeiliges Adressfeld, das folgende Angaben erfasst: Straße, Stadt, Bundesland, Land, Postleitzahl.

• Lieferdatum und -zeit: Nutzen Sie die Datums- und Zeitauswahlfelder. Diese Felder profitieren von der gleichen Zeilenkorrektur und den Aktualisierungen der CSS-Syntaxfehler, um Layout und Benutzerfreundlichkeit zu verbessern.

Diese Eingabefelder unterstützen auch die Validierung von Upload-Dateien direkt im Upload, falls Benutzer Bilder anhängen müssen (z. B. Zahlungsnachweise oder Designvorlagen).

Schritt 5: Zahlungsabwicklung einrichten

Fügen Sie vor dem Zahlungsschritt einen weiteren Seitenumbruch ein, um das Formular übersichtlich zu strukturieren. Dies verbessert die Benutzerfreundlichkeit und reduziert die Anzahl der Fehler, die durch eine unübersichtliche Benutzeroberfläche vor dem Absenden verursacht werden.

Fügen Sie das Zahlungsfeld hinzu (PayPal oder Stripe): Forminator bietet dynamische Zahlungsmethoden, sodass Sie zwischen PayPal und Stripe wählen können. Fügen Sie die gewünschte Zahlungsmethode hinzu:

• Für PayPalhat Forminator kürzlich eine Korrektur der PayPal-Rechnungsdetails eingeführt, um die Genauigkeit zu verbessern.

• Für Stripegewährleistet die neueste Lösung zur Verschlüsselung geheimer Schlüssel sichere Transaktionen.

Berechnungsfeld einfügen: Dieses Feld summiert dynamisch den Preis aller ausgewählten Produkte/Dienstleistungen. Es unterstützt nun die Korrektur der Formeln für Berechnungsfelder, wodurch fehlerhafte Summen aufgrund falscher Logik vermieden werden.

Einwilligungs-Checkbox: Fügen Sie immer eine Checkbox mit individuellen Nutzungsbedingungen hinzu. Dieses Feld profitiert von der Korrektur der Standard-Fehlermeldungen, sodass die Nutzer genau wissen, was erforderlich ist.

Zahlungskonto verbinden (PayPal oder Stripe): Gehen Sie zu Forminator ⟶ Einstellungen ⟶ Zahlungen und geben Sie Folgendes ein: Client-ID und geheimer Schlüssel

Wechseln Sie zwischen dem Sandbox-Modus für Tests und dem Live-Modus für echte Zahlungen. Die manuelle Aktivierungslösung ermöglicht einen sicheren Moduswechsel ohne erneute Eingabe der Zugangsdaten.

Schritt 6: Preisgestaltung und Berechnungen einrichten

Nachdem Ihre Produkt- und Zahlungsfelder nun bereit sind, ist es an der Zeit, Preise zuzuweisen und die Logik hinter der dynamischen Preisgestaltung Ihres Formulars zu konfigurieren.

Schritte:

Berechnungen für Produktfelder aktivieren: Gehen Sie zu jedem Feld (Auswahlfeld, Optionsfeld oder Kontrollkästchen) und aktivieren Sie die Option „Berechnung aktivieren“. Weisen Sie jeder Option numerische Werte zu.

Preise zuweisen: Werte hinzufügen, z. B.:

• Modernes Sofa: $500
• Klassisches Sofa: $350
• Relaxsessel: $600

Hierbei werden die erweiterten Formularfunktionen von Forminator genutzt, die durch die Codeverbesserungen und die Korrektur des Beitragsdatenfelds zur Erhöhung der Stabilität optimiert wurden.

Berechnungsfeld konfigurieren: Fügen Sie ein Berechnungsfeld hinzu. Verwenden Sie den Formelgenerator, um die Preise der ausgewählten Produkte zu summieren. Dank des aktualisierten Logikeditors können Sie nun Probleme mit fehlerhaften Daten und der Ajax-Übermittlungsmethode vermeiden.

Feld umbenennen: Geben Sie dem Berechnungsfeld eine eindeutige Bezeichnung wie „Gesamtbetrag“ oder „Jetzt zahlbar“. Dies beugt Verwirrung bei den Nutzern vor und ermöglicht die Korrektur von Standardwerten bei leeren Eingaben.

Schritt 7: Styling- und Anpassungsoptionen

Sobald Ihr mehrstufiges WordPress-Zahlungsformular funktionsfähig ist, ist es an der Zeit, sein Erscheinungsbild anzupassen, um ein reibungsloses und markengerechtes Nutzererlebnis zu gewährleisten.

In den Forminator-Darstellungseinstellungen können Sie zwischen Layoutstilen wie Material, Standard oder Vom Design übernehmen wählen. Sie können das Design weiter anpassen und Schriftarten, Breiten und Farben an Ihr Branding anpassen.

Nutzen Sie außerdem die Sicherheitsverbesserungen und die Sicherheitskorrekturen für Forminator-Add-ons, um sicherzustellen, dass die Formulargestaltung weder die Leistung noch die Sicherheit beeinträchtigt.

Schließlich können Sie mit den Verhaltenseinstellungen festlegen, was nach dem Absenden des Formulars geschieht, sei es eine Dankesnachricht, eine Behebung eines Seitenneuladens oder eine Weiterleitung zu einer bestimmten Seite.

Schritt 8: Veröffentlichung des mehrstufigen Zahlungsformulars

Nachdem Sie Ihr Formular erstellt und angepasst haben, veröffentlichen Sie es, indem Sie den generierten Shortcode kopieren. Fügen Sie diesen in eine beliebige WordPress-Seite mithilfe eines Shortcode-Blocks ein. Klicken Sie auf „Veröffentlichen“ und testen Sie Ihr Formular.

Stellen Sie sicher, dass das Formular reibungslos zwischen den Schritten wechselt, die Felder korrekt angezeigt werden (insbesondere die bedingt sichtbaren Felder), und die Zahlungen ohne Verzögerungen verarbeitet werden.

Die Korrektur des Fehlers in der Vorschau des schließenden Formulars gewährleistet zudem ein sauberes Beenden des Vorschaumodus und trägt so dazu bei, Verwirrung während des Testens zu vermeiden.

Schritt 9: Zusätzliche Tipps und erweiterte Funktionen

Um Ihr Formular weiter zu optimieren, sollten Sie bedingte Logik verwenden. Beispielsweise können Sie ein Lieferfeld nur dann anzeigen, wenn ein bestimmtes Produkt ausgewählt ist. Dies lässt sich dank der Funktion „Felder bedingt sichtbar“ ganz einfach realisieren.

Richten Sie E-Mail-Benachrichtigungen ein, indem Sie mehrere Empfänger hinzufügen, um sowohl den Administrator als auch den Benutzer zu benachrichtigen. Im Dashboard können Sie Konversionen verfolgen und Einsendungen einsehen – ideal für die Nutzungsanalyse.

Integrieren Sie Forminator außerdem mit Drittanbieter-Tools wie Mailchimp, Slackund Google Sheets.

Falls Formulare zuvor importiert wurden, aber nicht angezeigt werden, sorgen die Korrekturen für importierte Formulare und nicht importierte Formulare dafür, dass sie korrekt dargestellt werden. Diese Integrationen, zusammen mit der Erstellung vordefinierter Korrekturen und Korrekturen für Berichtsseiten, helfen bei der Überwachung und Automatisierung von Arbeitsabläufen.

Schritt 10: Abschließende Vorschau und Tests

Bevor Sie das Formular veröffentlichen, überprüfen Sie es in einer Vorschau, um Folgendes sicherzustellen:

• Sanfte Übergänge zwischen den Schritten

• Visuelle Konsistenz und Reaktionsfähigkeit

• Die Zahlungsabwicklung funktioniert problemlos

Achten Sie besonders auf die Unterschiede zwischen Sandbox- und Live-Zahlungsmodus, stellen Sie sicher, dass Ihre Zugangsdaten korrekt hinterlegt sind, und testen Sie beide Umgebungen. Verwenden Sie die Funktion „Upload abgeschlossen“, um zu überprüfen, ob Datei-Uploads erfolgreich abgeschlossen wurden, sowie die Funktionen „Überschreitung der Dateigröße entfernen“ und „Überschreitung der Dateigröße beheben“, um Dateigrößenbeschränkungen effizient zu verwalten.

Stellen Sie außerdem sicher, dass den Nutzern gegebenenfalls eine eindeutige Meldung über die erfolgreiche Kontoregistrierung angezeigt wird, und vergewissern Sie sich, dass die Korrektur mehrerer Formulare sowie die Erstellung mehrerer Formulare jegliche Duplikate oder Überschneidungen verhindern, wenn Sie mehr als ein Formular auf Ihrer Website einbetten.

Mit den richtigen Tests und Korrekturen wird Ihr WordPress-Zahlungsformular mit Forminator voll funktionsfähig, sicher und konversionsoptimiert sein.

Mehr erfahren: So integrieren Sie ein Zahlungsgateway in Ihre WordPress-Website

Abschluss

Mit Forminator lässt sich nicht nur einfach, sondern auch äußerst effektiv ein WordPress-Zahlungsformular erstellen. Dank des intuitiven Drag-and-Drop-Builders, der integrierten Zahlungsabwicklung und der dynamischen Feldoptionen können Nutzer mit Forminator voll funktionsfähige, mehrstufige Formulare erstellen – ganz ohne Programmierung.

Egal ob Sie ein paar Produkte verkaufen, Servicebuchungen entgegennehmen oder Zahlungen für Veranstaltungen einziehen, Forminator ist ein leistungsstarkes Tool, das sich Ihren Bedürfnissen anpasst.

Von der Handhabung von Berechnungen und Seitenumbrüchen bis hin zur Behebung häufiger Probleme wie dem Seitenneuladen, der bedingten Sichtbarkeit von Feldern und dem Abschluss des Uploads bietet dieses Plugin eine benutzerfreundliche Möglichkeit, sowohl die Formularerstellung als auch die Leistung zu verwalten.

Wenn Sie also Ihren Zahlungseinzugsprozess optimieren möchten, probieren Sie Forminator noch heute aus!

Benötigen Sie Hilfe bei der Einrichtung benutzerdefinierter Formulare oder möchten Sie weitere WordPress-Tutorials entdecken? Kontaktieren Sie unser Expertenteam bei Seahawk und lassen Sie uns gemeinsam etwas Leistungsstarkes entwickeln.