Order Forms & Checkout Pages

Learn how to create custom order forms and checkout pages that allow clients to purchase your services directly through branded, professional-looking pages.

Overview

Order forms are customizable checkout pages that:

Display your services in a professional layout
Allow clients to purchase without logging into the portal
Support multiple payment methods
Can be embedded on your website
Provide a seamless purchase experience

What are Order Forms?

Order forms serve as standalone checkout pages that:

Showcase Services: Display selected services with descriptions and pricing
Collect Information: Gather client details and service requirements
Process Payments: Handle secure payment processing
Create Accounts: Automatically create client accounts upon purchase
Generate Requests: Convert purchases into actionable requests

Creating Order Forms

Prerequisites

Permission: create_order_forms
At least one active service in your catalog
Payment processing configured (Stripe)

Step-by-Step Guide

Navigate to Order Forms
- Go to Order Forms in the main navigation
- Click Create Order Form button

Basic Information

Required Fields:
- Name: Internal name for the order form
- Description: Brief description of the form's purpose

Optional Fields:
- Custom URL slug: Customize the form URL
- Header text: Text displayed at the top of the form
- Footer text: Text displayed at the bottom

Service Selection
- Choose services to include in the order form
- Only active services that are shown in catalog are available
- Services display with their configured pricing and descriptions

Design Customization

Appearance Options:
- Header color and styling
- Button colors and text
- Form layout and spacing
- Custom CSS (advanced users)

Form Fields Configuration
- Each selected service's form fields are included
- Standard fields: Name, email, organization
- Service-specific fields: Based on service configuration
- Custom fields: Additional information gathering

Payment Settings

Payment Options:
- Accept credit/debit cards
- Payment processing fees
- Currency settings
- Tax configuration (if applicable)

Confirmation Settings

After Purchase:
- Redirect URL (optional)
- Confirmation message
- Email notifications
- Account creation options

Order Form Features

Multi-Service Support

Service Catalog Display

Show multiple services on one form
Clients can select which services to purchase
Dynamic pricing based on selections
Service descriptions and images

Bundle Options

Create service bundles with discounted pricing
Package related services together
Encourage larger purchases

Client Data Collection

Automatic Account Creation

Creates client accounts upon first purchase
Sends welcome email with portal access
Assigns clients to appropriate organizations

Custom Form Fields

Collect specific information for each service
Conditional fields based on service selection
File uploads for briefs and requirements

Payment Processing

Supported Payment Methods

Credit and debit cards via Stripe
Support for multiple currencies
Secure payment processing
PCI compliance

Pricing Display

Show service pricing clearly
Calculate totals dynamically
Display taxes and fees
Support discount codes (if configured)

Managing Order Forms

Order Form Status

Draft

Form is being created or edited
Not accessible to clients
Can make unlimited changes

Published

Form is live and accessible via URL
Clients can view and purchase services
Changes require republishing

Unpublished

Form was published but is now hidden
Existing links become inactive
Preserves form configuration

Order Form Actions

Preview

View form as clients see it
Test form functionality
Check appearance and layout

Edit

Modify form settings and configuration
Update services and pricing
Adjust appearance and fields

Duplicate

Create copy of existing form
Useful for creating similar forms
Maintains all configuration except name

Publish/Unpublish

Control form availability
Instant activation/deactivation
Preserves submission history

Delete

Permanently remove form
Cannot delete forms with submissions
All data is preserved

Viewing Submissions

Submission Overview

See all form submissions
Track conversion rates
Monitor form performance

Submission Details

View complete submission data
See client information
Review service selections and requirements

Submission Status

Pending: Payment processing
Completed: Successfully processed
Failed: Payment or processing failed
Refunded: Payment was refunded

Embedding Order Forms

Direct Links

Share order form URLs directly:

Standard URL: https://yourworkspace.com/order/form-slug
Custom Domain: https://yourdomain.com/order/form-slug

Website Embedding

Iframe Embedding

<iframe 
  src="https://yourworkspace.com/order/form-slug" 
  width="100%" 
  height="800px" 
  frameborder="0">
</iframe>

JavaScript Widget

<script src="https://yourworkspace.com/js/order-form.js"></script>
<div id="order-form" data-form="form-slug"></div>

Custom Integration

API Integration

Use order form API endpoints
Create custom checkout flows
Integrate with existing websites
Maintain brand consistency

Advanced Features

Conditional Logic

Service-Based Conditions

Show/hide fields based on service selection
Dynamic pricing calculations
Progressive form disclosure

Field Dependencies

Chain field visibility
Create complex form flows
Reduce form complexity

Custom Styling

Theme Customization

Match your brand colors
Custom fonts and typography
Logo and branding integration

CSS Override

/* Custom styling examples */
.order-form-header {
  background-color: #your-brand-color;
}

.service-card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}