Quantity Selector

The Quantity Selector adds a quantity picker to your form, allowing customers to purchase multiple units and automatically adjusting the total price.

Enabling Quantity Selector

In the AxleButton properties panel:

1. Ensure Axle Form is set to Yes
2. Open the Axle Form group
3. Find Quantity Selector
4. Choose a mode: Inline or Stepper

Modes

Inline

A compact number input field where customers type or adjust the quantity directly. Best for simple use cases where a minimal UI is preferred.

Quantity: [ 1        ]
Total: $10.00

Stepper

A dedicated +/- control that makes it easy for customers to tap to adjust quantity. The stepper has its own styling options (padding and border radius) independent of input fields. Best for mobile-friendly or product-focused checkouts.

Quantity: [ - ]  3  [ + ]
Total: $30.00

You can customize the stepper's appearance in the Form Styling > Stepper section. See Form Styling for details.

How It Works

When enabled, a quantity picker appears in the form (typically near the top, before custom fields).

Customer flow:

1. Form overlay opens
2. Customer sees quantity selector with default value 1
3. Customer adjusts quantity up or down
4. Displayed total price updates in real-time
5. Customer fills in custom fields (if any)
6. Customer submits form
7. Stripe checkout opens with final amount (Amount × Quantity)

Price Calculation

The final payment amount is calculated as:

Final Amount = Amount × Quantity

Example:

• Amount (top-level property): $10.00
• Customer selects quantity: 3
• Final amount charged: $30.00

The quantity multiplier applies to whatever amount you set in the top-level Amount property.

User Interface

Both modes display a quantity control above the custom form fields. The total price updates in real-time as customers adjust the quantity.

Inline mode:

• Customers type a number directly into the input field
• Lightweight, minimal UI footprint

Stepper mode:

• Customers click the - and + buttons to adjust quantity
• Can also type directly into the number field between the buttons
• More touch-friendly and visually prominent

When to Use Quantity Selector

Quantity Selector works well for:

• Physical Products — Customers want to buy multiple units

  • Example: "Coffee Mug - $12 each"

• Digital Bundles — Multiple licenses or subscriptions

  • Example: "Annual Plan - $99 per user"

• Services by Unit — Pricing based on quantity

  • Example: "Custom Website Design - $500 per page"

• Variable Pricing — Different quantities = different costs

  • Example: "Training Session - $50 per hour"

When NOT to Use Quantity Selector

Skip the Quantity Selector if:

• Single-item Products — No need for multiple units

  • Example: "Blue Widget" (sold one at a time)

• Service Packages — Fixed pricing for bundled items

  • Example: "Starter Package" (includes 10 items, can't select 15)

• Subscription — Monthly subscription (always quantity 1)

If you don't need quantity selection, leave it Off and the form will be simpler.

Combining with Form Fields

The Quantity Selector works alongside custom form fields. A typical form might look like:

┌──────────────────────────────┐
│ Quantity: [ - ]  3  [ + ]    │
│ Total: $30.00                │
├──────────────────────────────┤
│ Full Name                    │
│ [________________]           │
│                              │
│ Email Address                │
│ [________________]           │
│                              │
│ How many attendees?          │
│ [________________]           │
│                              │
│ [ ] I agree to [Terms]       │
│                              │
│ [ Continue ]                 │
│ 🔒 Secured by Stripe        │
└──────────────────────────────┘

Quantity Selector appears above all custom fields for easy visibility. The footer badge appears below the submit button.

Max Quantity

Use the Max Quantity property to limit how many units a customer can order. This control appears when Quantity Selector is set to Inline or Stepper.

The minimum quantity is always 1. Customers cannot go below 1 or above the max you set.

Examples:

• Limited edition item: set Max Quantity to 5
• Standard product: keep the default 99
• High-volume orders: increase to 999

Practical Examples

Merchandise Sale

Amount: $25.00
Currency: USD
Product Title: "T-Shirt"
Quantity Selector: On

Customer chooses quantity 2:
Final Amount: $50.00

Training Hours

Amount: $75.00 (per hour)
Currency: USD
Product Title: "Personal Training Session"
Quantity Selector: On
Form Fields: [Date preference, Fitness goal]

Customer chooses quantity 4 (hours):
Final Amount: $300.00

Event Tickets

Amount: $45.00 (per ticket)
Currency: USD
Product Title: "Conference Ticket - March 15"
Quantity Selector: On
Form Fields: [Full Name, Email, Company Name]

Customer chooses quantity 3 (tickets):
Final Amount: $135.00

Digital Licenses

Amount: $99.00 (per user)
Currency: USD
Product Title: "Annual Software License"
Quantity Selector: On
Form Fields: [Company Name, Number of Employees]

Customer chooses quantity 5 (user licenses):
Final Amount: $495.00

Data Storage

When a customer completes checkout with a quantity:

Transaction Data

• The quantity selected is stored with the transaction
• The final amount (original amount × quantity) is recorded
• The original amount is also stored for reference

Stripe

• Final amount is passed to Stripe for checkout
• Stripe records the total charge amount

Email Notifications

• Confirmation emails include the quantity selected and final amount

Best Practices

1. Clear Unit Price — Make sure your Amount and Product Title clearly indicate the unit price:

   • Good: "Coffee Mug - $12" or "Training Hour - $50"
   • Avoid: "Bundle - $100" (unclear if it's per unit)

2. Show the Calculation — The form typically shows the total as customers adjust quantity. Verify this displays correctly.

3. Set Reasonable Defaults — Quantity starts at 1 (standard). Most users won't change it if they only need one.

4. Test Different Quantities — Before going live, test the form with different quantities to ensure calculations work correctly.

5. Communicate in Product Description — If there are any notes about quantity (bulk discounts, minimums, etc.), mention them:

   • "Purchase in bulk! Discounts available for orders of 10+."

6. Mobile-Friendly — Ensure the quantity picker works well on mobile devices (easy to tap +/- buttons).

Troubleshooting

Quantity picker not appearing? — Verify that Axle Form is Yes and Quantity Selector is set to Inline or Stepper (not Off).

Wrong price calculated? — Double-check your Amount property. The final price is Amount × Quantity. For example, if Amount is "10.00" and quantity is 3, the charge should be $30.00.

Customer can't select more than expected? — Check your Max Quantity setting. The default is 99. Adjust it if you need to allow higher or lower quantities.

Next Steps

• Form Mode — Learn about the form overlay
• Form Fields — Add custom fields alongside quantity
• Property Reference — See all available properties