1. Home
  2. Functionality
  3. Custom Form Fields

Custom Form Fields

Prior to WP Simple Pay 3.3, this tab was labeled “On-Page Form Display Options”.

On the Custom Form Fields tab is where you’ll add and configure custom fields, buttons, and labels displayed in your on-page forms.

To see many of the available custom fields in action check out the custom fields demos.

To begin, simply select the type of field you’d like added to your payment form and click Add.

At this point, a new section for configuring the field you just added should appear below. For example, if you added a Text Field, you should see something like this:

This field should now appear on the page of your payment form above your Stripe button. All custom fields are assigned a unique Field ID by the system for that payment form that cannot be changed.

Within the configuration for each field, you can click “Remove Field” if you need to delete it. You can also drag and drop fields to re-arrange the order they appear in.

Basic Data Input Fields

The following custom fields are intended for collecting additional data other that is not specific to payments, billing, subscriptions, and coupons. They include:

  • Text Field
  • Dropdown Select
  • Radio Button Select
  • Date Field
  • Number Field
  • Checkbox

Basic Data Input Field Options

OptionDescriptionApplies to
Form Field LabelLabel displayed above the field on the payment form.text, dropdown, radio, date, number, checkbox
Required FieldRequire input field to be filled out, selected or checked.text, dropdown, date, number, checkbox
Default ValuePre-fill input field with a value, specific selection or checked state.text, dropdown, radio, date, number, checkbox
Stripe Metadata LabelUsed to identify this field in Stripe payment records. It is not displayed on the payment form and is limited to 40 characters. See Viewing Custom Field Values in Stripe.text, dropdown, radio, date, number, checkbox
Placeholder ValueHint displayed in the input field before the user enters a value.text, number
Multi-lineSet to a paragraph text field. Limited to 500 characters by Stripe.text
OptionsA comma separated list of options to fill the dropdown or radio button list with.dropdown, radio
Quantity or Amount FieldDropdowns and radio button lists can be used as a quantity value, multiplying the amount, or a list of amounts the user can select from. Must be valid numbers or amounts separated by commas (i.e. "2,5,10" or "5.00,7.50,10.00"). Quantity fields can also be used to multiply the number of subscriptions a user is signing up for.dropdown, radio
(Number) Quantity FieldNumber fields can also be used as a quantity field. Can also be used to multiply the number of subscriptions a user is signing up for.number

Other Form Elements

Customer Name

This field is automatically added to the payment form and set to required by default, but can be removed or made optional. The customer’s name will be saved to the Stripe payment record and card details if a value exists.

Email

This field is required for Embedded and Overlay options only as Stripe Checkout forces email capture in its overlay. The email entered by the customer will be saved to the Stripe payment record details.

Card

This field is required for Embedded and Overlay options only as Stripe Checkout forces credit card details to be collected in its overlay. It currently collects credit card details in a single line using Stripe Elements. This means you get the same security, live validation, and PCI compliance in your forms as you do with Stripe Checkout as you’re using a field originating from Stripe’s servers.

Like Stripe Checkout, you may disable verification of the postal/zip code if desired, but Stripe highly recommends collecting it to minimize fraud.

Address

This field is used for Embedded and Overlay options only as Stripe Checkout gives you the option to collect a billing and shipping address. It is not added or required by default. Like Stripe Checkout, you can specify if you want to allow the customer to fill out a shipping address in addition to a billing address.

Billing address data will be saved to the Stripe payment record. Shipping address data will be saved to the payment record metadata.

Coupon Code Field

Add this field to display an input to for the customer to enter a discount code. An “Apply” button is automatically generated on the right-hand side.

If you haven’t done so already, you’ll need to have coupons setup in your Stripe account. See Adding Coupons in Stripe. Try out coupons in action in the coupon code demos.

While in Test Mode you may only select coupons from your Stripe Test Coupons. Before switching to Live Mode, make sure the same coupons (with the exact same IDs) are created in your Stripe Live Coupons.

Custom Amount Field

Just a placeholder where the Custom Amount field, if enabled, will be displayed on the form.

Subscription Plan Select

Just a placeholder where the Subscription multi-plan select field, if enabled, will be displayed on the form. If you enabled a custom amount field within the plan selection, it will also be displayed here. See Subscription Options.

Note: Subscription capabilities are included with Business and Elite licenses only.

Recurring Amount Toggle

Display a checkbox to let the customer or donor choose between paying one-time or recurring. Also, set the interval and frequency of the recurring amount. If you set the Max Charges value, you’ll need to set up a Stripe webhook endpoint as well.

Total Amount Label

A read-only label to display the amount to be paid with an optional text label preceding. It is calculated on the fly if there are any other fields on the form that affect the amount when their data is modified.

You can also show a Recurring Total Label if the initial amount is different from the recurring amount (in the case of a free trial or setup fee).

If you charge taxes along with your payments, you can also display the Tax Amount in another label above the other total label(s). See Currency, Locale and Date Format Settings for more details.

Payment Button

Change the text on the payment button itself (defaults to “Pay with Card”). Additionally, change the text of the button while it’s in a disabled/processing state (defaults to “Please Wait…”).

The payment button will be automatically added to the form upon saving it if not already done so as it is required.

Both the payment button and coupon code “Apply” button can either inherit the Stripe button style or inherit the theme’s style and be further customized. See Style Options.

All custom fields are assigned a unique Field ID by the system for that payment form that cannot be changed.

Looking to add a checkbox with a label such as “Agree to terms” that opens new page? Read more here.

Updated on November 28, 2018

Was this article helpful?

Related Articles