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 a 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 the Product/Service field onto your form.

Add product field onto the form

Once added to 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.

Product name

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

Product description

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

Product image

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

Product/Service field

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.

Required/Hide field

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

Additionally, if you have not added a payment processor to the form yet, you will notice an informative banner at the top of the page. This is a reminder to add a payment processor, but we will get back to that in a second.

Price product field

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).

Quantity selector product field

The last customization that we can bring is related to Order options. Here you can change the currency, discount, and 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 – click on the USD – US Dollar dropdown and select the currency you are interested in

Order options Product field

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.

Discount Product field

Payment processor & Order summary

Moving forward with our form, let’s add more products to it: Mousse cake and Vegan Cake. And last but not least, let’s add a payment processor to 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.

Order summary

Let’s test the form in Preview to see what 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 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%). We also display the value that has been discounted.

Discount order summary

Following the same pattern, if a tax is applied to a product, the tax will be reflected in the Order summary as a Special tax(x%) along with the value of the tax.

Tax order summary

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 the Add to cart button.

Quantity product field

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

Quantity order summary

Submissions

In order to test our form, let’s make a test submission and go to ResultsSubmissions. 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.

Submission product field

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?