Pricing Sliders (see example) - Is this possible with Jotform?

Hi - I would like to create a form that allows my customers to use a pricing slider type feature to select the best product options.

You can see a live example of what gave me this idea here: https://www.thehoth.com/guestpost/#pricing

And here's a screenshot of what it looks like:

As you use the slider to select different package levels, the total price changes accordingly.

Is this possible with Jotform?

And if so, can you please help me / point me in the right direction as to how to make this happen?

Thank you

Please allow me some time to take a look at this.

Thanks.

Yes, this is possible to do. Here is my demo form:

https://form.jotform.com/202698416399066

I have used the Image Radio button to insert the pricing image.

We can improve further by injecting CSS based on your requirement. Let us know if you have further questions.

Thanks.

Thank you Roneet

However, this did not answer the question about the pricing sliders...

The sliders was honestly the most important part of my question :-)

Can Jotform do these sliders?  Similar to what I included in my original post?

Thank you 

Yes, the sliders are also possible to be integrated with the form.

I have used the Sliders with Calculated Result widget and Numeric Slider in my demo form:

https://form.jotform.com/202698416399066

Feel free to clone it.

Let us know if you have further questions.

Thanks.

Thank you...

So how do I clone it?

Hi there - Here's How-to-Clone-an-Existing-Form-from-a-URL.

Hope this information helps.

Can you help me on this last step?

https://form.jotform.com/202698742419162

I'm trying to get the "Total" to produce a total $ amount.

I have the slider set to select the following quantities:

10, 25, 50, 100, 150, 200, 250, 300

And the corresponding prices / totals would be: 

$150, $350, $650, $1200, $1650, $2000, $2250, $2500

I also integrate Square as the payment app... can this form use Square so the user can actually purchase the package after selecting their desired quantity?

Thank you so much for your help!

Kindly use a condition that checks what the value of the slider is and set the Form Calculation widget's value based on user's selection.

How-to-Insert-Text-or-Calculation-into-a-Field-Using-Conditional-Logic

Then you can pass the total into your Square field by following this guide:

How-to-Pass-a-Calculation-to-a-Payment-Field

I'm super confused... and I'm clearly not doing something right.

https://form.jotform.com/202698742419162

Could you help me get this figured out so the right package price shows based on the package selected?

Again, here's the packages and corresponding prices:

I have the slider set to select the following quantities:

10, 25, 50, 100, 150, 200, 250, 300

And the corresponding prices / totals would be: 

$150, $350, $650, $1200, $1650, $2000, $2250, $2500

I have created another demo form for you: https://form.jotform.com/202700792325955

Further checking, you can actually just set the price as the value on the slider. Then on your Form Calculation widget, just add the slider field.

Lastly, you can then pass the total on the Form Calculation widget into your Square account.

How-to-Pass-a-Calculation-to-a-Payment-Field

Thank you so much for your help!

Final question... is there a way to make the dollar figures appear with a dollar sign $?

For example, if I slide all the way right to "300", it currently just shows the raw number of 2500 in 3 places.

However, this is technically the price for the 300 package which should be showing as $2,500

Is there a way to set the numbers to show as follows:  $150, $350, $650, $1200, $1650, $2000, $2250, $2500?

Thank you again for all of your help

You can simply include the dollar sign in the Slider:

To make the total appear in the comma separate format, you may use commaSeparate() function of the Form Calculation widget or Masked Input widget:

https://www.jotform.com/widgets/masked-input

Let us know if you have further questions.

Thanks.

Hi, and thank you again for all of your help...  so here's my current form:

https://form.jotform.com/202708703958159

The number underneath the word "Choose" that changes (current default set to $150), is not showing the $ sign... is there a way to add the dollar sign to that number?

I do not want a dollar sign showing next to the 10, 25, 50, etc... as this number represents the number of citations you are purchasing.

Perhaps a list showing the number of citations along with each price point would be helpful.

The first column (10, 25, etc...) is the number of citations someone would be purchasing, and the second column is the price ($) for each of those packages.

I'm trying to get the slider show only the # of citations such as 10, 25, 50, etc...

And I'm trying to get the "Total" and "My Products" to show the associated cost with $ sign such as $150, $350, $650, etc...

*** But why is the form showing both a "Total" and "My Products"... both show the total -- do both of these fields need to be present?

Again, I really appreciate your help -- thank you again for your ongoing support to help me get this form correct.

Bobby 

Ok... so I hid the "Total" field that was showing above the "Total purchase price:" field...

https://form.jotform.com/202708703958159

Is this ok to do?

Second (and maybe finally), I just need to get the pricing to show with a $ sign in front.

For example, the default price for the default package (10) is $150.

But currently the $150 price is showing just the raw number of 150.

How can I get the $ sign in front of the prices?

The number underneath the word "Choose" that changes (current default set to $150), is not showing the $ sign... is there a way to add the dollar sign to that number?

To add a $ sign:

Yes, it is ok to hide the total field. The field is added just to pass the value to the payment integration as in the payment integration only Form Calculation widget.

The USD is shown in the payment field by default:

Let us know if you have further questions.

Thanks.