Create a purchase form with Webflow's Form Builder

Add the Foxy loader snippet

1. 1

   Go to the Foxy admin

2. 2

   Go to Settings > Website & Products

3. 3

   Copy the snippet from the Foxy loader.js section

4. 4

   In Webflow, go to Site settings, then Custom code

5. 5

   Paste the snippet into the Footer code field and save

Set up the purchase form

Customer and billing details (name, email, card number) are collected on the Foxy checkout, so don't add those fields here.

1. 1

   Build and design your form in Webflow as usual

2. 2

   Give each field a proper name, for example Color

Add the required product fields

Foxy needs at minimum a product name and price. Since Webflow doesn't support default values on plain input fields, use hidden select fields instead.

1. 1

   Add a select field for the product name

2. 2

   Set its field name to name

3. 3

   Set the first choice's value to your product name, for example Test Product

4. 4

   Add a second select field, name it price

5. 5

   Set the first choice's value to your product price, for example 9.99

6. 6

   Set both fields' Display Setting to None to hide them from customers

7. 7

   Repeat for any other fixed parameters

Set the form action

1. 1

   In the Foxy admin, go to Link & Form Builder

2. 2

   Build your item and generate a form

3. 3

   Copy the form's action URL

4. 4

   In Webflow, go to Form Settings and paste the URL into the Action field

5. 5

   Set Method to POST

6. 6

   Publish and test your form

Sell a subscription

Add a select field named sub_frequency. Set each choice's value to a frequency such as 1d, 2w, 1m, or 1y. Hide the field if you want a fixed frequency, or leave it visible to let the customer choose.

Accept donations

Skip the hidden price select field. Instead add a visible input field named price so donors can enter their own amount.

Add product variants

Use a select or radio field for choices like size.

1. 1

   Add the field and give it a proper name, for example Size

2. 2

   Add each option, such as Small, Medium, Large

3. 3

   Use Product Option Modifiers to adjust price, weight, category, or code per option, for example 2X-Large{p+2}

Display a quantity field

Add a field named quantity (lowercase) as an input or select field to let customers choose quantity before adding to cart.