Do you want to use a slider to set the value of a Gravity Forms Product field (Price Field)? This is easy to implement as you use the Slider Field value in a Product Field calculation.
Slider fields can be added using our GravityWP – Advanced Number Field Add-On. Custom units are also supported by this add-on.
Demo Form featuring a Product Field with a range slider
Here is a demo featuring the range slider, linked to the Product field (Price Field). It also shows the custom unit feature.
1. How to configure the Range slider
Add a number field to your form, and turn it into a slider by ticking the ‘Show as Slider’ checkbox in the Number Field settings. Define the minimal and maximal value and the range step.
Note we are using the GravityWP – Advanced Number Field settings here. These add-on should be installed and active on your site. It might also work with other plugins adding a slider feature. If you want to customize the style the slider check out the Styling (range) Slider Gravity Forms tutorial.
2. How to configure the Product field (Price Field) to reflect the range slider value
Add a Product Field to your form. Check the ‘Disable Quantity field’ box and select ‘Calculation’ as Field Type. Enter the calculation. Here you can use the Number Field Range Slider value as a merge tag, like {Range slider value:1}, and multiply it with a certain factor if you like. The price value is automatically updated when the slider value changes.
Our Premium add-ons for Gravity Forms
List Number Format
With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.
Advanced Merge Tags
This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.
List Text
Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.
All Entries
All your new Gravity Forms entries in one central place. Stop navigating between multiple forms to find new entries. Get immediate oversight and full control with a powerful, unified dashboard.
Read tutorials about
Show Previous Gravity Forms Submissions Using Advanced Merge Tags
This step-by-step tutorial shows how to use GravityWP Advanced Merge Tags to count previous Gravity Forms submissions and calculate total submitted value based on a matching email address.
Gravity Forms LeadConnector Integration with OAuth 2.0
This documentation-based tutorial explains how to connect Gravity Forms to LeadConnector/HighLevel with OAuth 2.0, search contacts by email, and map returned CRM values back into form fields using GravityWP API Connector.
Gravity Forms Zoho CRM Integration: How to Auto-Populate Form Fields by Email
Learn how to auto-populate Gravity Forms from Zoho CRM using GravityWP API Connector. This tutorial shows how to search Zoho Contacts by email and fill form fields with the returned data.
How to Create a Public Submission Business Directory in WordPress (Gravity Forms + GravityView)
Build a moderated business directory where users submit listings through a form, admins approve entries, and approved businesses appear in a searchable GravityView directory.
