Creating a Pricing Table in Webflow

Article author
Josh Lopez
  • Updated

In this article, I’ll walk you through the steps to set up a form exactly like this one.

Step 2 will show you how to create paid plans and step 3 will focus on creating a free plan.

Screen_Shot_2022-06-30_at_3.58.44_PM.jpg

Step 1 → Create or Clone a pricing table in Webflow.

Click here to clone a free Webflow Pricing Table

Step 2 → Create your paid plan(s)

  1. Click the green “Add a plan” button.

    Screen_Shot_2022-06-30_at_3.59.16_PM.jpg

  2. Select Paid Plan & click Next.

    free_or_paid.gif

  3. Fill in a plan name, give it a description (optional), and click “Create Plan”

    Screen_Shot_2022-06-30_at_4.11.21_PM.jpg

  4. Once you have a plan, it’s time to create some prices. Click “Prices” and then “Add a price” to get started. 🚧 You may need to Connect to Stripe before you can continue.

    create_a_price_-_06_22.gif

  5. Give your price a name (e.g. Basic Monthly, Basic Yearly, Basic Legacy, etc.) Select recurring or one-time. Enter a price amount and select a billing interval. Click “Additional options“ if you need to add a setup fee, trial period, or expiration. Click “Create Price” to save your work.

    Screen_Shot_2022-06-30_at_4.58.48_PM.jpg

  6. Nice! You have a plan with a price. Before you touch any additional settings, I recommend you grab the price ID and drop it into your pricing table button. Your data attribute should look like data-ms-price:update + your price ID.

    add_a_price_ID_06_22.gif

  7. If you’re solely using Webflow you can skip the Permissions section. Use Gated Content to grant access to members-only content on your site. Redirects to send members to different pages on signup, login, or log out, and signup rules to restrict sign-ups to particular domains.

    no_permissions.jpg

Step 3 → Create your free plan(s)

  1. Click the green “Add a plan” button

    Screen_Shot_2022-06-30_at_3.59.16_PM.jpg

  2. Select Free Plan & click Next.

    free_or_paid.gif

  3. Fill in a plan name, give it a description (optional), and click “Create Plan”

    Screen_Shot_2022-06-30_at_4.11.21_PM.jpg

  4. Nice! You have a plan. Before you touch any settings, I recommend you grab the plan ID and drop it into your signup button. Your data attribute should look like data-ms-plan:add + your plan ID. You'll also want to add the attributes data-ms-price:remove="all" so that any previously selected prices are removed. 

    plan_ID.gif

  5. Since the example Starter plan is a free plan, you can skip the Prices & Permissions and jump straight to Gated Content, Plan level Redirects, or Signup Rules.

    Screen_Shot_2022-06-30_at_4.36.01_PM.jpg

Step 4 → Testing

By default, Memberstack projects are in test mode until you add a live domain to the Settings Page.

So! Assuming you haven’t already done that your site is ready for testing.

App_Domains.jpg

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.