Form Style Settings Reference
In This Document
Reading time: 4 minutes | Difficulty: Intermediate
Overview
This is a complete reference of every Form Style setting available in WP Simple Pay. Use this alongside the main Form Style guide for detailed setup instructions.
Prerequisites
- WP Simple Pay Pro with a Plus license or higher
- A payment form using the on-site form type (Embedded or Overlay)
Theme Presets
| Theme ID | Name | Primary | Secondary | Text | Background |
|---|---|---|---|---|---|
default |
Default | #0f8569 |
#0e7c62 |
#32325d |
#ffffff |
sunset |
Sunset | #e74c3c |
#c0392b |
#2c3e50 |
#ecf0f1 |
forest |
Forest | #27ae60 |
#219955 |
#2c3e50 |
#f9f9f9 |
ocean |
Ocean | #3498db |
#2980b9 |
#2c3e50 |
#ecf0f1 |
monochrome |
Monochrome | #333333 |
#555555 |
#333333 |
#ffffff |
sunshine |
Sunshine | #f1c40f |
#f39c12 |
#34495e |
#ffffff |
coral |
Coral | #e67e22 |
#d35400 |
#2c3e50 |
#f9f9f9 |
minimal |
Minimal | #bdc3c7 |
#95a5a6 |
#2c3e50 |
#ffffff |
When you select a theme, the primary color maps to the button background and accent color, the secondary color maps to the button hover state, the text color maps to general text and label colors, and the background color maps to both the form and input backgrounds.
Color Settings
All color settings accept:
- Hex colors:
#0f8569,#fff - RGB/RGBA:
rgba(15, 133, 105, 0.8) - HSL/HSLA:
hsl(160, 80%, 29%) - Empty value (inherits default or falls back to a parent setting)
| Setting | Description | Fallback Behavior |
|---|---|---|
| Form Background | Form container background | Transparent (inherits page background) |
| Input Background | Input field background | Transparent |
| General Text Color | All text elements | Browser default |
| Label Text Color | Field labels only | Falls back to General Text Color |
| Input Text Color | Text inside inputs | Falls back to General Text Color |
| Title Color | Form title | Falls back to General Text Color |
| Description Color | Form description | Falls back to General Text Color |
| Primary (Accent) Color | Focus states, highlights | Theme default |
| Border Color | Input and element borders | Theme default |
| Error Border Color | Validation error borders | Red default |
| Error Text Color | Error message text | Red default |
| Button Background | Submit button background | Primary color |
| Button Text | Submit button text | White |
| Button Hover Background | Submit button hover state | Darker primary |
Typography Settings
| Setting | Description | Accepted Values | Default |
|---|---|---|---|
| Label Font Size | Field label size | Positive integer (pixels) | 14 |
| Label Font Weight | Field label weight | normal, bold, 100–900 |
— |
| Input Font Size | Input text size | Positive integer (pixels) | 16 |
| Title Font Size | Form title size | Positive integer (pixels) | 24 |
| Title Font Weight | Form title weight | normal, bold, 100–900 |
— |
| Description Font Size | Form description size | Positive integer (pixels) | 16 |
| Description Font Weight | Form description weight | normal, bold, 100–900 |
— |
Design & Layout Settings
| Setting | Description | Accepted Values | Default |
|---|---|---|---|
| Form Border Radius | Form container corner rounding | Positive integer (pixels) | 0 |
| Input & Button Border Radius | Input/button corner rounding | Positive integer (pixels) | 4 |
| Form Padding | Form container internal spacing | Positive integer (pixels) | 0 |
Applicability
| Form Type | Styles Applied? |
|---|---|
| On-site Embedded | Yes |
| On-site Overlay (Modal) | Yes |
| Stripe Checkout (Off-site) | No |
| Payment Page (On-site) | Yes |
What’s Next?
- Styling Payment Forms with Form Style – Step-by-step setup guide
- Payment Method Display Types – Choose between Tabs and Accordion layouts
Still have questions? We're here to help!
Last Modified: