Our forms builder has an extensive list of great features that allow you to create all sorts of forms. In this article we're going to be covering the creation of live payment order forms, such as canteen, uniform or book-list forms.
Note: This is considered an advanced guide and assumes that you have learned the basics of form creation as well as linked your STRIPE account with School Stream.
Let's get started!
To begin, we will create a new form - you can name this form anything.
With our form created, we will be placed in the editor. Here, on the left side of the screen we can see our list of fields, including the pricing fields.
It's good practice to separate items by sections to keep your form as readable as possible. We will do this by clicking the 'section' field on the left, adding it to our form body.
Let's click on this new section field in the body of our form to show its settings on the left.
Now, with the field settings visible on the left, let's rename this field to 'Shirts'.
The next thing we will do is click on the 'product' field to add this to our form body.
With our new field added we will need to click on it in the body to show its field settings on the left.
Here, we will rename the field to 'Shirts' and will begin to add the items and prices for our shirts. It's best practice to have a 'None selected' option among your items.
After adjusting the settings of our product field, we will need to drag and drop it within our 'Shirts' section. You can do this by clicking and dragging on the arrows at the top right of the field.
With our first section completed, we will repeat the steps above to create a new section and product field both named 'Pants'. Just like above, we will add our items to the new product field and will drag it into our new section.
You should now have both a 'Shirts' and a 'Pants' section, each with their own product field.
But what if we want to order two pairs of shirts? For this, we will need to use the 'Quantity' field. Let's add a Quantity field to our form now.
With our quantity field selected, let's drag into the 'Shirts' section and adjust some of its field settings. Here, we can change the default quantity, but more importantly we can select which field this quantity refers to. Let's assign this quantity field to 'Shirts' and leave the default quantity value as '1'.
Now that we've added a quantity field for our 'Shirts', let's do the exact same thing for our 'Pants'.
With our two sections complete, let's add one more field into our form. The 'Total' field.
This field can be placed at the bottom of our form.
Now is the perfect time to update our form by hitting the 'update' option at the top right of the page. After updating, let's click the 'preview' button to view our form on a new page.
Your form preview should look and function like this:
Great - we have a functioning form, now we just need to add the payment mechanics.
To continue this guide and add a payment option, please click here.