Create a purchase form with Webflow's Form Builder

In this article we show you how to use Webflow's form builder to setup a purchase form to sell any type of product or service. We'll cover how to handle different product types later in the article.

Note

This article assumes you have a good understanding of how Webflow forms work. If this is your first time using Webflow's form builder, please visit this page.

Add Foxy Code Snippet

To display the sidecart when a customer adds a product to cart and to store customer sessions, you must first load the needed Foxy loader file into your website.

In the Foxy admin, click on the Sample Code link under the Store column in the navigation at top.
Copy the code snippet from Step 1.
In Webflow, go to your Site Settings and click on the Custom Code link at top.
Paste the copied code snippet into the Footer Code section and save changes.

Setup Purchase Form

Please note that when designing your purchase form, customer and billing information (ex: name, email, credit card #) will be collected on the checkout page, so there is no need to add those fields to your form.

Using Webflow's form builder, build and design your purchase form as desired.
Give each form field a proper name. For example, "Color".

Add Foxy Specific Fields

To create a legitimate product, Foxy requires (at minimum) the product name and price. The following steps will show you how to add these hidden fields using a select field since setting a default value for input fields is not currently allowed in Webflow.

Once you've added all of your fields, add an additional select field. This field will be used for your product name.
In the Input Settings, set the field name as name
In your select field's choices, set the first choice value as your product name. For example, "Test Product".
Add another select field and give it the name price . This field will be used for your product price.
In your select field's Choices, set the first choice value as your product price. For example, "9.99".
For both the name and price select fields, set the Display Setting to "None". This will hide these fields from customers.
Repeat steps for any additional fields you want hidden.

Set Form Action

By default, form data is submitted to Webflow's servers. The following steps will show you how to send data to Foxy.
Go back to the Sample Code page in the Foxy admin. Copy the form action url from the Step 2 section.
In Webflow, go to your Form Settings. Paste the form action URL into the Action field.
Change the Method to POST
Publish changes and test purchase form to ensure it works as expected.

Different Product Types

You can use Webflow's form builder to sell any type of product. Below are extra steps required for the different product types.

Subscriptions (recurring payments)

Add a select field to your form
In the form field settings, set the field name as sub_frequency
In the choices settings for this field, set the value of the first choice as desired frequency (ex: 1d, 2w, 1m, 1y)
Hide the select field using Webflow's visibility settings or by applying styling (ex: display: none)
Alternatively, you can keep the select field visible and assign a different frequency value to each choice.

Donations

Remove the hidden select field with the name price
Add an input field to your form, where you want donors to be able to input their donation amount.
Set the input field name as price

Product Variants

For certain products you may need to allow the customer to choose from different variants (ex: Size). We recommend using select and/or radio fields.

Add select or radio field to your form.
In the input settings, give the field a proper name (ex: Size).
Add each option as needed (ex: Small, Medium, Large, X-Large, 2X-Large)
Using Foxy's Product Option Modifiers you can modify the product price, weight, category, and code based on the option your customer chooses.
For each option that has a modifier, add the proper syntax to the option value. An example would look like this: 2X-Large{p+2)

Display A Quantity Field

Quantity can be modified once a product is in the cart, but if you want to allow customers to choose a quantity before adding a product to cart, simply add a form field with the Name set as "quantity" (lowercase q). This can be an input field, select field, etc.