How to Add a Checkout Form in FlexiFunnels

What Is a Checkout Form?

Checkout Form = Form customers use to buy products and pay

Think of it like an online shopping cart + payment page combined—customers enter details and complete purchase in one place.

Checkout form includes:

• Product selection
• Customer information (name, email, etc.)
• Payment information
• Order summary
• Payment button

Why Add a Checkout Form?

Convert Visitors to Customers: ✓ Capture payment information
✓ Complete sales transactions
✓ Accept online payments

Collect Information: ✓ Customer names and emails
✓ Shipping addresses
✓ Phone numbers
✓ Custom fields

Professional Transactions: ✓ Secure payment processing
✓ Professional appearance
✓ Trust building

Business Growth: ✓ Sell digital products
✓ Sell physical products
✓ Accept subscriptions
✓ Generate revenue

Step-by-Step: Add Checkout Form

Step 1: Log In and Open Editor

• Log into FlexiFunnels
• Go to your project
• Find the page where you want checkout
• Click "Edit" to open editor
• Editor opens

Step 2: Go to Components

In the left sidebar of the editor:

• Look for "Components" section
• Or click "Components" tab
• You see available components list

Step 3: Find Order Forms Component

In Components panel:

• Look for "Others" section or category
• Or search for "Order Form"
• Or look for "Checkout" option
• Click on "Order Forms" or "Checkout Form"

Step 4: Add Checkout Form to Page

• Click on "Order Forms"
• Drag it to your page
• Or click and it auto-adds
• Checkout form appears on page

Step 5: Configure Checkout Form

Step 5A: Select Products

1. Click on checkout form
2. Look for "Products" or "Items" section
3. Click "Add Product" or "Select Product"
4. Choose products to sell:
   • Digital products
   • Services
   • Or create new product

Step 6: Set Up Payment Gateway

Before checkout can work:

• Payment gateway must be connected
• Razorpay, Cashfree, Instamojo, etc.
• Gateway settings configured in FlexiFunnels

Step 7: Configure Redirect/Success Page

After payment completes:

• Decide where customer goes
• Usually thank you page
• Or download page (digital products)

Step 8: Set Up Email Notifications

Optional but recommended:

1. Look for "Email Settings"
2. Enable order confirmation email
3. Customize email content
4. Set up admin notification email
5. Customer gets receipt automatically

Step 9: Test Checkout Form

Before going live:

1. Click "Preview"
2. See checkout form
3. Test filling form:
   • Enter test information
   • Verify all fields appear
   • Check button works
4. Don't complete payment (test mode)
5. Return to editor

Step 10: Publish

• Click "Publish"
• Checkout form is now live
• Customers can now make purchases

✓ Checkout form is ready!

Common Situations & Quick Fixes

Situation 1: "Product Won't Add to Checkout"

What's happening: Can't select product for checkout form.

Diagnostic steps:

1. Check if products exist
   • Do you have products created?
   • Go to Settings → Products
   • Create product if needed
2. Verify product is active
   • Is product published/active?
   • Inactive products won't show
   • Activate product
3. Check form type
   • Is it actually Order Form?
   • Not regular form?
   • Switch to Order Form component
4. Refresh editor
   • Close and reopen editor
   • Try adding product again

Situation 2: "Payment Not Processing"

What's happening: Customer tries to pay but payment fails.

Diagnostic steps:

1. Check payment gateway connection
   • Is gateway connected?
   • Go to Settings → Payment Gateways
   • Verify connection is active
2. Verify API credentials
   • Are credentials correct?
   • No typos?
   • Valid and active?
3. Check form configuration
   • Is payment gateway selected in form?
   • Product has price set?
   • All required fields configured?
4. Test payment in test mode
   • Use test payment details
   • Verify gateway is in test mode
   • Switch to live mode when ready
5. Contact payment gateway support
   • If issue persists
   • Provide transaction details
   • Gateway can investigate

Situation 3: "Customer Not Getting Confirmation Email"

What's happening: Order completed but customer doesn't receive email.

Diagnostic steps:

1. Check if emails enabled
   • Go to checkout form settings
   • Is "Send confirmation email" enabled?
   • Enable if disabled
2. Verify email address
   • Check customer email in form
   • Correct spelling?
   • Email address valid?
3. Check spam folder
   • Confirmation might be in spam
   • Have customer check spam
   • Add to safe senders
4. Verify email setup
   • Go to Email Settings
   • Is email configured?
   • Correct email address set?
5. Test with your email
   • Make test purchase
   • Use your email
   • Check if you receive confirmation

Situation 4: "Form Looks Bad on Mobile"

What's happening: Checkout form doesn't look good on phones.

Diagnostic steps:

1. Test on actual mobile
   • Use real mobile phone
   • Not just browser preview
   • Check responsiveness
2. Adjust form width
   • Make form narrower
   • Fits mobile screens better
   • Check layout
3. Reduce field width
   • Single column layout
   • Fields stack vertically
   • Easier on mobile
4. Simplify form
   • Only required fields visible
   • Optional fields hidden
   • Mobile friendly
5. Test all fields
   • Scroll through form
   • All fields visible
   • Easy to fill on mobile