How to Build a Single Item with Quantity Order Form

Written by Formstack on August 31, 2011

Posted in Form Hacks

Yesterday, I blogged about how to create a fixed price order form.  Today, we’re going to go over how to build a single item order form that also contains a quantity.  In the following weeks, I’m going to continue to blog about order forms, slowly getting into more complicated forms as we go along.  Eventually, these blog posts will probably be used to create a new “Example Form” chapter in our documentation, as building order forms seems be something many of our users have issues with.

single1

Okay, to build a single item order form where the user chooses a quantity of the item you are selling and a price is calculated, we’ll start by creating a new form and giving it a name.  For this example form, we’re going to be selling copies of a book, so I named it “Book Order Form”.

single2

Next, we add fields for Name, Email, Mailing Address and whatever other fields you need to collect the info needed to process each order.

single3

After that, we want to add a Price field by clicking on Add Field and choosing a Number Field.  We’ll call this field “Price Per Book”.  Since the user doesn’t need to see this field, you can check the Hidden checkbox to make it hidden on the form.

single4

In the default value box of the Price field is where we’ll type in the actual price per book.  For this example, the price is “20”.

single5

After saving the Price field, we also need to add a Quantity field.  For this field, click the Add Field button and choose a Select List field.  Type in “Quantity” as the label.  Next, click on the red text that says “click to add options”.

single6

Our options will be “1, 2, 3, 4, 5,” with each number on a separate line.  You could, of course, add more numbers to the list if you like.

single7

Now that we have our form built, we need to add a third-party payment processor.  They all work about the same, so for this example, I’ll use PayPal Website Payments Standard.  To add a PayPal integration, click on Settings > 3rd Party Integration > Payment Processors & Subscriptions and then hit the Add button next to PayPal.

single8

You can ignore all the extra options on the PayPal settings page.  All you need to map for this order form are the Price and Quantity fields.  The Price field you will map to “Price Per Book” and the Quantity field you’ll map to your Quantity field.  Click Save Settings and your form is done!

single9

Here’s an example of what your form will look like (above).  Notice that the Price field is hidden.

single10

When I choose a Quantity of 3 and submit the form, I’m redirected to PayPal and my correct total of $60 ($20 a book x 3 books) is displayed.