How to Style Your Payment Forms with Form Style

Overview

WP Simple Pay includes a built-in Form Style feature that lets you customize the appearance of your on-site payment forms — no custom CSS required. Choose from 8 pre-designed theme presets or fine-tune individual colors, typography, and layout settings to match your brand.

Form Style settings are configured per form, so you can style each payment form independently.

Note: Form styles only apply to on-site payment forms (Embedded and Overlay display types). If your form uses Stripe Checkout (off-site), these settings will not take effect. To use form styles, switch your form type to “On-site payment form” in the General settings tab.

Prerequisites

• WP Simple Pay Pro with a Plus license or higher
• A payment form using the on-site form type (Embedded or Overlay)

Accessing the Form Style Tab

1. Navigate to WP Simple Pay > Payment Forms in your WordPress admin.
2. Click on an existing form to edit it, or create a new form.
3. Click the Form Style tab in the form editor.

The Form Style tab contains four sub-tabs: Themes, Colors, Typography, and Design & Layout.

Choosing a Theme Preset

Theme presets instantly apply a complete, coordinated set of styles to your form. After applying a theme, you can further customize individual settings in the other tabs.

1. In the Form Style tab, select the Themes sub-tab (selected by default).
2. Browse the available themes. Each theme card shows a color palette preview and a mini form preview.
3. Click on a theme card to select it.
4. Click Publish or Update to save.

The following themes are available:

Theme	Description	Primary Color
Default	WP Simple Pay’s default styling	Teal
Sunset	Warm red accents with light background	Red
Forest	Fresh green theme with clean background	Green
Ocean	Calming blue palette	Blue
Monochrome	Simple black and white theme	Black
Sunshine	Bright and cheerful yellow accents	Yellow
Coral	Warm orange palette	Orange
Minimal	Clean, minimalist design	Grey

Important: Selecting a theme updates all color and style settings to the theme’s values. Any custom changes you’ve made to individual settings will be overwritten.

Customizing Colors

Click the Colors sub-tab to fine-tune individual color settings. Colors are organized into sections.

Background Colors

• Form Background — Background color of the entire form container.
• Input Background — Background color of input fields, selects, and dropdowns.

Text Colors

• General Text Color — Default color for all text elements in the form.
• Label Text Color — Color for field labels. Overrides the general text color for labels only.
• Input Text Color — Color for text inside input fields. Overrides the general text color for inputs only.

Title & Description Colors

• Title Color — Color for the form title. Falls back to general text color if not set.
• Description Color — Color for the form description. Falls back to general text color if not set.

Accent & Border Colors

• Primary (Accent) Color — Used for focus states, highlights, and other accent elements.
• Border Color — Border color for input fields and other bordered elements.

Error State Colors

• Error Border Color — Border color applied to fields with validation errors.
• Error Text Color — Text color for error messages.

Button Colors

• Button Background — Background color of the submit button.
• Button Text — Text color of the submit button.
• Button Hover Background — Background color when hovering over the submit button.

All color fields support hex colors (e.g., #0f8569) and rgba colors with transparency (e.g., rgba(15, 133, 105, 0.8)). Click the color swatch next to any field to open the color picker.

Customizing Typography

Click the Typography sub-tab to adjust font sizes and weights.

Label Typography

• Label Font Size — Size of field labels in pixels. Default: 14px.
• Label Font Weight — Weight of field labels. Options: Normal, Bold, or numeric values (100–900).

Input Typography

• Input Font Size — Size of text inside input fields in pixels. Default: 16px.

Title & Description Typography

• Title Font Size — Size of the form title in pixels. Default: 24px.
• Title Font Weight — Weight of the form title. Options: Normal, Bold, or numeric values (100–900).
• Description Font Size — Size of the form description in pixels. Default: 16px.
• Description Font Weight — Weight of the form description. Options: Normal, Bold, or numeric values (100–900).

Customizing Design & Layout

Click the Design & Layout sub-tab to adjust spacing and border radius settings.

Border Radius

• Form Border Radius — Controls how rounded the corners of the form container are, in pixels. Set to 0 for square corners.
• Input & Button Border Radius — Controls how rounded the corners of input fields and buttons are, in pixels.

A live preview next to each setting shows the effect of the current value.

Spacing

• Form Padding — Controls the internal spacing (padding) of the form container, in pixels.

Resetting Styles to Default

To reset all style settings back to their default values:

1. In the Form Style tab, scroll to the bottom of any sub-tab.
2. Click the Reset Styles button.
3. Confirm the reset when prompted.
4. Click Publish or Update to save the form.

This resets all color, typography, and layout settings. It does not change the selected theme.

Frequently Asked Questions

Why don’t I see the Form Style tab?

The Form Style tab requires a Plus license or higher. If you have a Personal license, you’ll see an upgrade prompt instead.

Why is there a warning about off-site forms?

Form styles only apply to on-site payment forms. If your form is set to use Stripe Checkout (off-site), the Form Style settings won’t take effect. Change the form type to “On-site payment form” in the General tab of the form editor.

Can I use different styles for each form?

Yes. Form Style settings are saved per form, so each payment form can have its own unique styling.

Do form styles work with overlay (modal) forms?

Yes. Form styles apply to both embedded forms and overlay/modal forms. For overlay forms, the form background color controls the background of the modal content area.

Can I still use custom CSS alongside Form Style?

Yes. Custom CSS will be applied on top of the Form Style settings.

Do form styles affect the Gutenberg block preview?

Yes. When you insert a payment form using the WP Simple Pay block in the block editor, the block preview reflects the form’s current style settings.

What happens if I leave a color field empty?

Empty fields inherit sensible defaults. For example, label and input text colors fall back to the general text color. Button colors fall back to the theme’s primary color.

What’s Next?

• Form Style Settings Reference – Complete reference of every setting and its default value
• Payment Method Display Types – Choose between Tabs and Accordion layouts