Verwendung des Zahlungsformular-Blocks

Lesezeit: 4 Minuten | Schwierigkeit: Anfänger

Übersicht

Der WP Simple Pay – Zahlungsformular-Block ist die empfohlene Methode, um ein Zahlungsformular in einen Gutenberg-Beitrag oder eine Seite einzufügen. Er bietet eine Live-Vorschau des Formulars im Editor, stellt Anzeigeoptionen in der Block-Seitenleiste bereit und rendert dasselbe Formular auf der Seite, das ein Kunde sehen würde – ohne dass Sie jemals einen Shortcode kopieren müssen.

Der Block ist funktional äquivalent zum Shortcode, ist aber leichter zu finden und bietet Editor-Vorschauen, die die aktuellen Formularstil-Einstellungen des Formulars widerspiegeln.

Voraussetzungen

• WP Simple Pay (jede Stufe – der Block wird mit dem kostenlosen Plugin geliefert)
• Eine WordPress-Website, auf der der Block-Editor (Gutenberg) ausgeführt wird
• Mindestens ein veröffentlichtes Zahlungsformular

Schritt 1: Block einfügen

1. Bearbeiten Sie den Beitrag oder die Seite, auf der das Formular erscheinen soll.
2. Klicken Sie auf den + Block-Inserter.
3. Suchen Sie nach WP Simple Pay oder Zahlungsformular.
4. Klicken Sie auf den Block WP Simple Pay – Zahlungsformular.

Ein Platzhalter erscheint und fordert Sie auf, ein Formular auszuwählen.

Schritt 2: Formular auswählen

Verwenden Sie das Dropdown-Menü im Block-Platzhalter, um auszuwählen, welches veröffentlichte Zahlungsformular gerendert werden soll. Sobald ausgewählt, ersetzt der Block den Platzhalter durch eine Live-Vorschau des Formulars, einschließlich Titel, Beschreibung, Felder und der Senden-Schaltfläche – formatiert mit den aktuellen Formularstil-Einstellungen des Formulars.

Wenn Sie den Formularstil eines Formulars nach dem Einfügen des Blocks ändern, wird die Vorschau beim nächsten Neuladen des Editors aktualisiert.

Schritt 3: Anzeigeoptionen konfigurieren

Wenn der Block ausgewählt ist, zeigt die Seitenleiste mit den Blockeinstellungen auf der rechten Seite zwei Schalter an:

• Titel anzeigen – Wenn aktiviert (Standard), wird der Titel des Formulars über den Feldern angezeigt. Deaktivieren, um den Titel auszublenden – nützlich, wenn die umgebende Seite bereits eine Überschrift hat.
• Beschreibung anzeigen – Wenn aktiviert (Standard), wird der Beschreibungstext des Formulars über den Feldern angezeigt. Deaktivieren für kompakte Layouts.

Wenn Sie beides deaktivieren, wird die Titel-/Beschreibungs-Wrapper-Einheit vollständig unterdrückt, sodass kein überflüssiger Leerraum übrig bleibt.

Der Block unterstützt auch die zentrierte Ausrichtung über die Standard-Blockwerkzeugleiste. Wenn zentriert, werden das Formular, die eingebettete Überschrift und die Senden-Schaltfläche horizontal innerhalb der Inhaltsbreite der Seite zentriert und der Überschriftenbereich ist auf eine maximale Breite von 400 Pixel beschränkt.

Schritt 4: Veröffentlichen und Vorschau

Speichern oder veröffentlichen Sie die Seite. Zeigen Sie sie im Frontend an, um das Formular in seinem gerenderten Zustand zu sehen. Der Block verwendet dieselbe Rendering-Pipeline wie der Shortcode, sodass das Verhalten im Frontend identisch ist.

Block vs. Shortcode

	Block	Shortcode
Editor-Vorschau	Live, gestylt	Keine — nur Platzhalter
Anzeige-Umschalter	UI-Kontrollkästchen	Shortcode-Attribute manuell bearbeiten
Ausrichtung	Block-Werkzeugleiste	In HTML/CSS einwickeln
Funktioniert im klassischen Editor	Nein	Ja
Funktioniert in Widgets	Ja (Block-Widgets)	Ja
Funktioniert in Page Buildern	Abhängig vom Builder	Ja (universell)

Wann der Block verwendet werden sollte: Moderne Gutenberg-Beiträge und -Seiten, FSE-Vorlagen, blockbasierte Widgets.

Wann der Shortcode verwendet werden sollte: Klassischer Editor, Page Builder ohne native Blockunterstützung, benutzerdefinierte Theme-Vorlagen, bei denen Sie do_shortcode() direkt aufrufen.

Häufig gestellte Fragen

Die Formularvorschau wird angezeigt, aber Kunden können nicht bezahlen — warum?

Der Block rendert dasselbe Formular für die Editor-Vorschau wie für Besucher. Wenn die Vorschau das Formular anzeigt, aber die Einreichungen fehlschlagen, liegt das Problem bei der Formular-Konfiguration selbst (fehlende Zahlungsmethode, ungültige Stripe-Schlüssel, fehlendes Pflichtfeld) und nicht beim Block. Überprüfen Sie WP Simple Pay > Zahlungsformulare und die Registerkarten „Allgemein/Zahlung“ des Formulars.

Kann ich mehrere Zahlungsformular-Blöcke auf derselben Seite verwenden?

Ja — jeder Block kann ein anderes Formular rendern. Die Frontend-Assets des Plugins sind intelligent genug, um mehrere Formulare auf derselben Seite ohne Konflikte zu verarbeiten.

Warum stimmt die Editor-Vorschau nicht mit dem überein, was ich im Frontend sehe?

Die Editor-Vorschau spiegelt den gespeicherten Zustand des Formulars zum Zeitpunkt des Ladens des Editors wider. Wenn Sie Änderungen am Formular in einem anderen Tab vorgenommen haben, speichern/aktualisieren Sie den Editor, um sie zu sehen. Das Frontend rendert immer die zuletzt gespeicherte Version.

Funktioniert der Block in Full Site Editing (FSE)-Vorlagen?

Ja. Der Block kann in jeden blockfähigen Kontext eingefügt werden, einschließlich FSE-Vorlagen, Vorlagenteilen und wiederverwendbaren Blöcken/Mustern.

Kann ich das eingebettete Formular pro Seite unabhängig gestalten?

Das Formularlayout ist pro Formular und nicht pro Block. Um verschiedene Stile auf verschiedenen Seiten zu verwenden, erstellen Sie mehrere Formulare und fügen Sie den entsprechenden Block auf jeder Seite ein.

Was ist der Unterschied zwischen diesem und dem WP Simple Pay Button-Block?

Der Zahlungsformular-Block bettet das gesamte Formular inline ein. Der Button-Block zeigt nur einen Button an, der das Formular beim Klicken in einem Overlay (Modal) öffnet – nützlich für Landingpages, auf denen Sie eine klare Handlungsaufforderung anstelle eines sichtbaren Formulars wünschen. Siehe Verwendung des Zahlungsbutton-Blocks.

Was kommt als Nächstes?

• So gestalten Sie Ihre Zahlungsformulare mit dem Formularstil – Passen Sie das Aussehen des eingebetteten Formulars an
• Verwendung des Abonnementsverwaltung-Blocks – Ermöglichen Sie Abonnenten die Verwaltung ihrer Pläne
• Allgemeine Einstellungen eines Zahlungsformulars konfigurieren – Konfigurieren Sie das Formular selbst