Super Forms
  • Drag & Drop Form Builder for WordPress
  • Quick start
    • Installation
    • Registration
    • Starting your 15 day trial
    • Purchasing a license
    • Activating a license
    • First time setup
    • Secure file uploads
    • Creating a form
    • Adding form elements
    • Editing elements
    • Publishing your form
    • FAQ
  • Account
    • Dashboard
      • Your Invoices
      • Billing details
      • Your Licenses
      • E-mail Notification
      • Password reset
      • Cancel subscription
  • Common problems
    • Common problems
      • Email delivery problems
        • Why is my form not sending emails?
        • Why are emails going into spam folder/inbox?
      • File upload problems
      • Session expired
      • reCaptcha Troubleshooting – Fix “Not Loading” & Verification Errors
  • Elements
    • Layout elements
      • Column/Grid
      • Multi-part / step
    • Form elements
      • Calculator
      • Signature
      • File upload
      • Datepicker
      • Variable field
      • Dropdown
      • Text field
      • Autosuggest
      • Keywords
      • Radio button
      • Keyword Field
      • Button
      • Audio Recording (microphone)
    • HTML elements
      • Heading
      • HTML (raw)
      • Image
      • TinyMCE
      • Divider
      • Spacer
      • PDF page break
      • Google map element WordPress form
  • Features
    • Basic
      • Confirmations emails
      • Save Form Progression (continue later)
      • Build In Translation System
      • Populate form
      • Popups
      • Import & Export
      • Hide form after submitting
      • Hide or lock out user from your forms
      • Validation
    • Advanced
      • WordPress form with Google sheets dropdown
      • Custom registration form for WordPress
      • Custom login form for WordPress
      • Custom lost password form for WordPress
      • Update current logged in user
      • Secrets
      • Prevent duplicate entries
      • Lock & hide form
      • Password protect
      • Conditional Logic
      • Tags system
      • Address lookup/auto complete
      • Analytics Tracking
      • Conversion Tracking
      • Distance & Duration Calculation
      • If statements
      • Foreach loops
      • E-mail Reminders
      • Variable Fields
      • Form templates - Include elements into other forms - WordPress
      • Transferring data from one form to another
    • Integrations
      • PDF Generator
      • Listings
      • WooCommerce Checkout
        • Fixed price checkout
        • Dynamic price checkout
        • Variable product checkout (variations)
        • Replacing the "Add to cart" on a product page with a form
        • Hiding product from shop and order via custom form
      • PayPal
      • MailChimp
      • Mailster
      • Zapier
      • Stripe (BETA)
      • WooCommerce Instant Order (in progress)
  • Tutorials
    • WordPress Form to Google Sheet Integration
    • GDPR Consent / Terms agreement
    • How to update the plugin
    • Sending emails to specific department for WordPress contact forms
  • Example Forms for WordPress
    • Booking 24 hours ahead of time
  • Developers
    • Code Examples
      • Lookup City by Zipcode for your WordPress form
      • Audio Recording Field
      • Custom API Phone Number Validation for Your WordPress Form
      • Updating WordPress user meta data after login
      • Automatically redirecting to next step after displaying text or a progress bar
      • Dropdown with groups (categories)
      • Prevent form submission based on entered field values
      • Track form submissions with GTM (Google Tag Manager)
      • Tracking Multi-part steps with Google Analytics
      • Tracking Multi-part steps with GTM data layer (dataLayer.push)
      • Track form submissions with third party
      • Compare input field value with database value
      • Insert form data into a custom database table
      • Delete database row after contact entry is deleted in WordPress
      • Limited date availability (slots) for your WordPress booking form
      • Send submitted form data to another site
      • Exclude empty fields from emails
      • Execute custom JS when a column becomes conditionally visible
      • Toolset Plugin: Update comma separated string to Array for meta data saved via Front-end Posting
      • Toolset Plugin: Update file ID to file URL for meta data saved via Front-end Posting
      • Delete uploaded files after email has been send
      • Increase Cookie lifetime for client data such as [Form Progression]
      • Altering cookie secure and httponly parameters
      • Define fake cronjob to clear old client data if cronjob is disabled on your server
      • Define page language attribute based on page ID or URL
      • Define custom headers when doing a POST request
      • Change checkbox/radio layout to vertical on mobile devices
      • Show remaining available form submission allowed
      • Global fields / elements
      • Trim values of fields
      • Re-sending E-mails after editing entries via Listings for WordPress
      • Combine multiple field values into one column on Contact Entries page
      • Altering the attachments for E-mails via PHP code for WordPress
      • Generate dynamic columns with dates based on user selected date from Datepicker element
      • Hide `eye` icon from Listings row based on user role
      • Variable product checkout based on variation SKU
    • Data storage
    • BETA version
  • Changelog
  • Support
Powered by GitBook
On this page
  • What is a variable field?
  • When to use a variable field?
  • How to create a variable field?
  • Creating variable conditions with CSV file
  • Using {tags} with variable fields
  • Example form
  1. Features
  2. Advanced

Variable Fields

How to create a variable field for your WordPress form that gets updated dynamically based on other field values or user input

PreviousE-mail RemindersNextForm templates - Include elements into other forms - WordPress

Last updated 1 year ago

Creating the most complex forms is possible with variable fields (Hidden field). A variable field it's value can be updated dynamically on the fly based on other fields values. This allows you to have more flexibility within your final value or for doing complex calculations and speed things up when building your form.

What is a variable field?

A variable field is a Hidden field that contains a value that dynamically changes based on other field(s) values. In programming languages you also have a so called $variable. In general this will act the same way.

When to use a variable field?

You should use a variable field whenever you require to have a specific final value that can vary based on user selected options in an other field or in other fields. A simple example would be whenever you want to apply 3 different discounts based on a selected quantity.

Example use case

When a user orders 10 products 0% discount should be applied, when more than 10 products are ordered the user receives 15% discount and when 30 or more products are ordered the user receives 35% discount.

In the above example, the discount amount/value is dynamic. That's when a variable field comes into play. Based on user input you can assign the correct value to your variable field and use it to display information to your user, or to calculate the correct prices with the use of the element.

How to create a variable field?

From the Form Elements TAB drag and drop the Hidden field element in place. Edit the element and choose Conditional Variable (dynamic value) from the dropdown. Now set the Make field variable option to: Enable (make variable). Now apply the conditions and enter the value that you require when the conditions are met.

These conditions work the exact same way as Conditional Logic do except that it will update the value instead of showing/hiding elements.

Creating variable conditions with CSV file

It is also possible to use a CSV file instead of manually adding each condition for your variable field. You can do this by setting the Retrieve method to CSV file.

Let's say we need retrieve the price (our variable field) of a flyer based on the dimension in pixels. The user would choose the dimensions in pixels via two quantity fields. In this example we have a quantity field named height and width. When the user chooses a dimension of 150x10 (height x width) the price should be $1.25. the price of course being our variable field

With the above example in mind our spreadsheet would look something like the below table. this spreadsheet can then be saved as a CSV file which you can then use on your variable field

10

20

150

1.25

1.50

160

2.25

2.50

170

3.25

3.50

Once you have downloaded and edited the example, you can save it as a CSV file. Now edit your variable field, and upload the CSV file.

The last thing we will have to do is map the correct fields in your form with the Row headings and Column headings of your spreadsheet.

To map the fields correctly we have to edit the Row heading and Column heading options for our variable field. In our case we will map the height field as our Row heading, so we can enter height in Row heading. In our case we will map the width field as our Column heading, so we can enter width in Column heading.

When above steps where correctly followed your variable field should now work correctly, you can test this by adding a HTML element and retrieve the value by placing the {tag} inside the HTML

Using {tags} with variable fields

Variable fields can deal with {tags}, please read the {tags} system section for more information about tags.

Example form

You can find an example form that uses conditional logic under: Super Forms > Demos > Variable Fields

You can download the above example spreadsheet via google drive: . Please note: make sure to save it as a CSV file in order for it to work.

Calculator
https://goo.gl/s6Etgk