Product field

123FormBuilder is excited to announce the release of our latest feature – the Product field! This new feature makes it easier than ever for businesses to sell products or services directly through their online forms.

With the Product field, businesses can create customized forms allowing customers to select and purchase products or services without leaving the form. This can significantly streamline the buying process and boost sales.

How it works

Let’s begin with an use case: you want to create a form through which you are collecting cake orders. You’ve added all the necessary info: Name, delivery date and time, phone number, email and address for delivery.

Now it’s time to add the products/cakes you want to sell. Simply drag and drop Product/Service field onto your form.

Once added on the form, you can easily customize the Product/Service field.

a. Product name – here you give a name to your product for your respondents to easily identify the product/service you are selling.

b. Product description – in order for your respondents to fully understand what your product/service offers, you can provide a product description.

c. Product image – this is maybe the most eye catching element for your respondents: product image. Upload a picture of your product/service so that your respondents could easily scan the products and choose the most appropriate one for them.

For our Cake Order form, we’ve created our first product: Strawberry cake!

Now we need to provide more customization to our first product. We can mark it as required – so your respondents will need to provide an answer to this field/choose this product/service or you can hide the field, if needed.

Next step would be to add a price to your product. You can do that my providing a value to Price from Payments&Calculations. The price provided by you will be displayed on your form for your respondents.

Additionally, if you did not add a payment processor on the form yet, an informative banner at the top of the page will be displayed to remind you of adding a payment processor, but we will get back to that in a second.

If you want to offer your respondents the possibility of ordering multiple items from the same product (e.g: 2 Strawberry cakes), then you have to enable the Quantity selector. Once enabled, you can establish the Unit of measure – the label you set here will appear as your unit of measure for your product (e.g: bottles, packs, lbs, kg)

The last customization that we can bring is related to Order options. Here you can change the currency, discount, taxes and add more advanced calculations.

Once you click on Order options, a pop-up will open where you can:

a. change the price of the product, if needed

b. apply a discount on the product

c. apply a tax on the product

d. set a stacked discount – which applies on top of the discount applied on each product

e. set a stacked tax – which applies on top of the taxes applied on each product

f. change the currency of the product by clicking on USD – US Dollar dropdown and selecting the currency you are interested in

For example, let’s add a discount of 10% to our Strawberry Cake. Once you input your 10% discount on Order options and click on Save, our Strawberry cake will have the price updated: we are going to show the full price and the price after the discount has been applied.

Payment processor & Order summary

In order to go further with our form, let’s add more products to it: Mousse cake & Vegan Cake. And last but not least, let’s add a payment processor on the form. You can do that by navigating to Payments from the left side panel and selecting the payment processor you want to use.

For our form, we have used PayPal. Once a payment processor has been added and enabled, you’ll notice an Order summary at the end of the form.

This table will be populated automatically based on your respondents choices for the product/service list.

Let’s test the form in Preview to see how it looks like. For our form, we have selected Strawberry cake and Mousse cake. The order summary has been automatically updated to reflect our choices.

In the Order summary you can see the product that has been selected, its price and its quantity and the total price for each product and for the entire order.

If a discount has been added to a product, for example for our Strawberry cake, the discount will be reflected in the Order summary, as Discount (x%) and also the value that is discounted.

Following the same pattern, if a tax has been applied to a product, if the product is chosen by respondents, the tax will be reflected in the Order summary as a Special tax(x%) and the value of the tax.

If you have enabled the Quantity selector, respondents will be able to provide the number of items they want to order for that product and simply click Add to cart button.

Subsequently, the Order summary will also reflect the quantity for each product.

Submissions

In order to test our form, let’s make a test submission and go to Results – Submissions. For each product added on your form, you can see the quantity:

a. Strawberry cake – 2 -> this means that 2 Strawberry cakes have been ordered

b. Mousse cake – 1 -> this means that 1 Mousse cake has been ordered

c. Vegan cake – no value -> this means that no Vegan cake has been ordered.