Creating an order form + shopping basket using Calculator

You can design your own custom shopping experience with Typeform by combining Calculator and integrated Stripe payments (the payment field).

Your customers make their selections, the ‘Price’ variable increases or decreases depending on their selections, and the payment field is automatically ready with the right price at checkout. With features like Add, Subtract, Multiply and Divide, your typeforms have never been smarter!

Read more about what makes a great order form.

Here’s an example Typeform with a shopping basket:

And this is what the Calculator settings look like from the example above…


Setting an Initial Value for the Price Variable

Before any questions have been answered, the Price variable can be given an initial value.

The initial value would be 0 (zero) if you want to do a straightforward shopping cart which adds up the total price for all items selected. But you can also use Calculator to apply a discount, for example, decreasing the price from its initial value.

You set the initial value for the Price variable on the settings screen for the Payment field:


Discount Coupons

Let’s say you’re selling an eBook which retails for $9.99, and you want to enable the coupon code “earlybird” which will reduce the price by $2.99 to $7.00.

This can be done by using Calculator with a short text field, like so:


Was this article helpful?