Product List: Allowing users to insert the Product Price

  • joaocmscoop
    Asked on September 3, 2024 at 12:11 PM

    I need to create a Product List with no Price, where the user will be able to insert the price of the product he chooses. Is It possible?

    When I choose " Purchase Order Tool" and "Valeu Defined By User" I can't add products to the list. 😭

    Is there a way when users select the produt he can insert the price he wants to pay?

  • Joseph Christian JotForm Support
    Replied on September 3, 2024 at 1:52 PM

    Hi João,

    Thanks for reaching out to Jotform Support. Currently, it's not possible to add products when using the User-defined amount payment type. However, as a workaround, you can sell products and allow users to input any price amount by modifying the Quantity option to be a Text Box field instead of a dropdown. Let me show you how to set that up:

    1. In Form Builder, click on the Cart Icon of the Product list.

    2. Under the Products tab, hover your mouse over the product and click on the Pencil icon to edit.

    3. Change the Price to $1.

    Product List: Allowing users to insert the Product Price Image 1 Screenshot 40

    4. Go to the Options tab, hover your mouse over the Quantity option, and click on the Pencil icon to edit. If you don't have a Quantity option yet, click on Add a Quantity Selector +Add button to add.

    5. On the Show Quantity on the Form dropdown menu, select Text Box.

    6. And you can put a label such as "Enter Amount"

    7. Then, click on Save Quantity at the bottom.

    Product List: Allowing users to insert the Product Price Image 2 Screenshot 51 Here's my result:

    Product List: Allowing users to insert the Product Price Image 3 Screenshot 62 Here's my demo form. You can also clone it for your reference.

    Give it a try and let us know how it goes.

  • joaocmscoop
    Replied on September 3, 2024 at 2:56 PM

    Hi Joseph, how you doing? Thanks for helping me!

    But I also need the user inform the Quantity! Is there another workaround? Can I add 2 Quantity options?

  • Joseph Christian JotForm Support
    Replied on September 3, 2024 at 3:43 PM

    Hi João,

    Unfortunately, it's currently not possible to add two separate quantity fields for a single product. However, you can try to add sub-options and label them Quantity and still allow users to enter a custom price amount. Let me show you how to set that up:

    1. In Form Builder, click on the Cart Icon of the Product list.

    2. Under the Products tab, hover your mouse over the product and click on the Pencil icon to edit.

    3. Go to the Options tab, and click on the Add a Product Option +Add button.

    4. Enter the Label such as "Qty" and toggle On both Create Sub Products from Options and Special Pricing Per Option.

    Product List: Allowing users to insert the Product Price Image 1 Screenshot 30 Here's my result:

    Product List: Allowing users to insert the Product Price Image 2 Screenshot 41 Give it a try and let us know if you need any more help.

  • joaocmscoop
    Replied on September 3, 2024 at 4:29 PM

    Hi Joseph,


    The last solutions It's not viable, the quantity range starts from 1 to 100.

    I tried using "Configurable List Widget", with a field for Product (dropdown list), a field for quantity (input number) and a field for price (input text), but I have around 200 products so I need a way the for the user to search for Product name or code. Is there any workaround to achieve that?

    I know there is an "Autocomplete Widget" but I need the "add product" function that "Configurable List widget" has.

  • Joseph Christian JotForm Support
    Replied on September 3, 2024 at 5:11 PM

    Hi João,

    I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

    Thanks for your patience, we appreciate it.

  • Joseph Christian JotForm Support
    Replied on September 3, 2024 at 5:42 PM

    Hi João,

    To achieve this, I recommend adding the Autocomplete widget to enable users to quickly search through your large product list as this widget provides suggestions while you type into the field. Also, you can use the Number fields for the Price and Quantity inputs. Then, we can implement the Form Calculation widget to automatically compute the Total Amount by multiplying the Price and Quantity. After the total amount is calculated, you can pass the value to the payment field. Let me show you how to set that up:

    First, add the Autocomplete widget for your product selection.

    1. In Form Builder, click on Add Form Element on the left side of the page.
    2. Under the Widgets tab, search for Autocomplete and add it to your form.
    3. Click on the Gear settings and under the General tab, list your products in the Items field.

    Product List: Allowing users to insert the Product Price Image 1 Screenshot 70 Second, let's add two Number fields for Price and Quantity inputs.

    1. Click on the Add Form Element on the left side of the page.
    2. Under the Basic tab, add two Number fields.
    3. Label them "Quantity" and "Price Amount".

    Product List: Allowing users to insert the Product Price Image 2 Screenshot 81 Now, let's add a Form Calculation widget and implement a formula to calculate the Total amount.

    1. Click on the Add Form Element on the left side of the page.
    2. Under the Widgets tab, add Form Calculation widget.
    3. On the right side panel, click on the Add Field button and add the two number fields with a multiply sign in between.
    4. Label it as "Total Amount".

    Product List: Allowing users to insert the Product Price Image 3 Screenshot 92 Lastly, let's add a Payment field and use it to capture the value from the Form Calculation widget. I'll use Stripe as an example.

    1. Under the Payments tab, select Stripe.

    Product List: Allowing users to insert the Product Price Image 4 Screenshot 103

    2. Click on the Wand icon and connect your account.

    3. Set the Payment type to User Defined Amount

    4. Under the Get Price From option, select the Form Calculation widget.

    Product List: Allowing users to insert the Product Price Image 5 Screenshot 114 Here's the result:

    Product List: Allowing users to insert the Product Price Image 6 Screenshot 125 That's it. Let us know if you need any more help.

Your Answer