Forms, Elementor & Shortcodes

Build conversion-focused checkout and donation forms in four flexible ways — standalone visual builder, native Gutenberg block, universal shortcode, or Elementor Pro Forms integration.

Visual Form Builder

Navigate to GatewayKit → Payment Forms and click Add New Form (or choose a pre-built starter template).

Starter Templates

• Donation Form: Donor name, email, preset tier donation buttons ($10, $25, $50, $100), custom amount field, and donor comment.
• Product / Service Checkout: Fixed-price single product purchase with customer billing fields.
• Event Registration: Attendee fields with tiered ticket pricing (Early Bird | 25, VIP Pass | 100).
• Blank Canvas: Build any custom checkout workflow from scratch.

13 Drag-and-Drop Field Types

• Contact & Details: Text, Email (required for automated PDF receipts), Phone, Number, Textarea, Date.
• Selections: Dropdowns, Radio Buttons, Single Checkbox, Checkbox Group.
• Layout Elements: Section Headings, Visual Dividers, Hidden Fields.
• Pro Field: Discount Coupon — allows buyers to apply promotional discounts directly before checkout.

Pricing Modes & Dynamic Calculations

1. Fixed Amount: Charge a static price (e.g. $49.00).
2. Customer-Entered Amount: Allow donors or clients to enter any amount, with optional minimum threshold.
3. Preset Tier Buttons: Quick-click buttons (e.g. $10, $25, $50, $100) alongside a custom amount input.
4. Dynamic Option-Based Pricing: Assign prices directly to dropdown or radio options using the pipe syntax Label | Price:

   Standard Ticket | 50
   VIP Pass | 100
   All-Access Bundle | 175

Embedding Forms: Gutenberg & Shortcodes

Method A — Native Gutenberg Block

1. Edit any post or page in the WordPress Block Editor.
2. Add the GatewayKit Payment Form block (search for /gatewaykit).
3. Select your form from the dropdown to preview it live.

Method B — Universal Shortcode

Copy the shortcode from the forms list and paste it into any page builder (Bricks, Divi, Beaver Builder) or classic editor:

[gatewaykit_form id="123"]

Elementor Integration (Free & Pro)

GatewayKit integrates natively with both Elementor Free and Elementor Pro:

• Elementor Free: Drag the GatewayKit Form widget onto your canvas and select any created form.
• Elementor Pro Forms: Connect existing Elementor Pro form widgets via Actions After Submit:

1. Edit an Elementor form and open Content → Actions After Submit.
2. Add Payment Gateway to the list of actions.
3. Open the new Payment Gateway panel in the form settings:

Payment Receipts & Invoices

Create a page titled Payment Result and place the universal receipt shortcode:

[gatewaykit_receipt]

This shortcode reads the secure transaction token (?gatewaykit_receipt=XXXXXX-YYYYYY) and displays:

• Live payment status badge (Completed, Pending, Failed).
• Transaction reference ID and amount in your store currency.
• One-click Print Receipt button (formatted for clean printouts).
• One-click Download PDF Invoice button for customer records.

Shareable Payment Links

Under GatewayKit → Payment Links, generate quick Stripe checkout URLs without creating a form:

• Ideal for sending quick invoices by email, SMS, WhatsApp, or Telegram.
• Enter the amount, currency, and service description to generate an instant link.

Transaction Dashboard

Manage all payments under GatewayKit → Transactions:

• Filter transactions by date range, gateway, or status (pending, completed, failed, refunded).
• Search by customer email, authority code, or receipt token.
• Add private internal notes to transactions for follow-up tracking.
• Export transaction records to CSV (Pro).