Creating a Payment Form

Payment forms are the core of WP SmartPay — they appear on your site and let visitors pay you directly. This guide walks you through creating your first form from scratch in the Gutenberg editor.

Open the Forms List

Go to SmartPay → Forms in your WordPress admin sidebar. You will see a list of all existing payment forms.

Screenshot of WP SmartPay Forms list page showing existing payment forms
The Forms list shows all your payment forms with status, shortcode, and quick action links.

Start a New Form

Click Add New at the top right of the forms list. A modal appears asking how you want to begin:

Screenshot of the New Form modal showing template and blank form options
The New Form modal lets you pick a template or start with a blank form.
  • Blank Form — Starts with an empty canvas. Good for custom layouts.
  • Templates (Pro) — Pre-built forms for common use cases such as donations, product sales, and event tickets. Templates are fully editable after selection.

Set the Form Title

Once the editor opens, click the Add title field at the top and type your form name. This title appears in the admin forms list and in the shortcode tooltip but is not shown to customers at checkout unless you add a heading block to the form canvas.

The Form Editor Layout

The form editor is the standard WordPress Gutenberg block editor with SmartPay-specific sidebar panels on the right:

  • Canvas (centre) — The visual form area. The Name, Email, pricing, and Pay Now blocks are inserted by default. You can add extra blocks (text, heading, address, custom fields) above or below them.
  • WPSmartPay Form panel (right sidebar) — Form-level settings: Form Max Width, Checkout Layout, Require Login to Checkout, Goal, and Coupon.
  • Block panel (right sidebar) — Inspector for whichever block is currently selected.
Note: The customer email, name, and pay button are added to the canvas automatically. You do not need to add them from scratch.

Adding Fields with the Guide

To add more fields to your form, click the Guide button in the editor header (top-right toolbar, next to Settings). The WPSmartPay Help Guide modal opens.

Screenshot of the WPSmartPay Help Guide modal in the form editor showing Required fields and Add more fields sections
The Guide modal — click any field button to add it to your form instantly.
  • Required fields section shows Name Field and Email — these are already on the form by default.
  • Add more fields section lists optional blocks: Text Input, Text Area, Radio, Checkbox, Select, and Address. Click any button to insert that field at the bottom of the canvas.

You can also add blocks with the standard Gutenberg block inserter (+ button in the toolbar or between blocks), but the Guide is the fastest way for SmartPay-specific fields.

Configuring the Pricing

  1. In the right sidebar, click the Pricing panel to expand it.
  2. Choose Fixed to charge a set amount, or Custom Amount to let the visitor enter their own.
  3. Enter the amount in the text field. The currency symbol comes from Settings → General → Currency.
  4. Optionally add predefined amount cards (e.g., $10, $25, $50) for donation-style forms.

Choosing a Gateway

In the Payment sidebar panel, select the gateway that will process payments on this form. Only gateways enabled in Settings → Payment Gateways appear here. If only one gateway is enabled, it is selected automatically.

Publish the Form

  1. When the form is ready, click Publish in the top-right corner of the editor.
  2. WordPress saves the form and assigns it a numeric ID.
  3. Back in the Forms list, the shortcode column shows [sp_form id="123"] — copy this to embed the form on any page.
Tip: Use Preview (top-right toolbar) to see how the form looks on the frontend before publishing.

Editing an Existing Form

From the Forms list, click the form title or the Edit link under it to reopen the editor. Changes take effect immediately after you click Update.