Gravity Forms Toggle Switch Premium Add-on Setup Guide

Toggle Switch adds one new field to Gravity Forms: Toggle Switch. It is the on/off switch people know from their phone, with your own on and off values and labels beside the switch that change with the state. Put it where a checkbox feels clumsy: accept the terms, subscribe to news, gift wrap this order, remember me. Switch the field to a group and you get several switches in one field, each with its own label and value.

What You Get

• A single switch that saves the on value or the off value you choose, such as Yes and No or 1 and 0.
• Labels beside the switch for the on state and the off state, a default state, three sizes and a theme or custom colour.
• Required means the switch must be on, which is what terms and consent fields need.
• A group of switches in one field, each with its own label, value and optional price.
• Conditional logic that uses a switch as a source (is on, is off) or as a target.
• Merge tags that show the saved value, or the label with the text modifier.
• Numeric on and off values that work in number field formulas.
• An amount added to the order when a switch is on: as its own line, as part of a product price, or one by one in a group.
• A real checkbox with role switch, aria-checked, Space and Enter support, a visible focus ring and a fallback that works without JavaScript.
• AJAX forms, multi-page forms, Save and Continue, the Orbital theme, legacy markup and the admin entry editor.
• No outside requests.

Requirements

• Gravity Forms 2.9 or newer (tested with 2.9 and 3.1), WordPress 6.5 or newer and PHP 7.4 or newer.
• An active license key. Without one the field turns into a plain checkbox that still saves its values, so a lapsed license never breaks a form.

Installation

1. Install and activate the add-on in the usual way.
2. Open Forms → Settings → Toggle Switch, enter your license key and activate it.
3. Open a form in the editor and add Toggle Switch from the Advanced Fields group.

The Field Settings

Select the field and open the General tab. The settings of the switch sit between the field label and the description.

Required Means On

A required checkbox normally means it must be checked. A required switch means the same: it must be on. Use it for terms of service, consent to be contacted or a privacy notice. If the visitor sends the form with the switch off, the form is refused and shows the field error. The default message is Please switch this on to continue. and you can change it under the field settings. The switch keeps its state while the page shows the error.

A switch that is not required has no such rule: both states are valid answers and the entry stores the on value or the off value.

What Is Saved

A plain checkbox that is off sends nothing, so an entry can only tell that it was left empty. The Toggle Switch saves the off value instead. With on value Yes and off value No, an entry always has either Yes or No for the switch, which makes reports, exports and notifications much easier to read.

A field that conditional logic hides saves nothing, as for every other field.

Group of Switches

Change the mode to Group of switches to put several switches in one field. The settings panel then lists the switches. For each one you set a label, a value, an optional price and whether it starts on. Add switches with the button and remove them with the cross. The value starts as a copy of the label, so you can leave it alone when you do not need a different one.

Underneath, a group is a Gravity Forms checkbox field. That means entries, exports, notifications, merge tags and conditional logic behave exactly as they do for checkboxes: every switch has its own input in the entry, and a merge tag lists the switches that are on. A required group needs at least one switch on.

Conditional Logic

A switch as the source

Use a single switch in the rules of other fields. Choose the switch, the operator is or is not, and one of its two values; the list offers both the on value and the off value. A rule on the off value works too, so you can show a field only while a switch is off, for example Tell us why not while the newsletter switch is off. A group works like checkboxes: pick the switch you want and use is.

A switch as the target

Conditional logic on the switch field itself works as on any field: show or hide it depending on other fields, including other switches. A hidden switch is not saved and does not count in calculations or totals.

Merge Tags

Use the merge tag of a switch in notifications and confirmations. By default it shows the saved value. Add the text modifier to show the label that belongs to the state.

<p>Newsletter: {Newsletter:2}</p>
<p>Shown to the customer as: {Newsletter:2:text}</p>
{all_fields}

Replace Newsletter and 2 with the label and the id of your field. The all_fields merge tag shows the saved value, and groups show the labels of the switches that are on, as checkboxes do.

Calculations

Give a switch numeric values and use it in the formula of a number field with calculation turned on. A rush delivery switch with on value 25 and off value 0 adds 25 when it is on. A double switch with on value 2 and off value 1 doubles a quantity. The result is recalculated live while the visitor flips the switches, and calculated again on the server when the form is sent.

({Base price:1} + {Rush:2}) * {Double:3}

A switch that conditional logic hides counts as zero, as other hidden fields do. Text values such as Yes and No are not numbers, so for calculations choose numeric values.

Prices

Enter an amount in Price when on and it is added to the order while the switch is on. Prices need a Gravity Forms product field in the form, because the total is calculated from the products, and a Total field to show it. The amount appears beside the label of the switch so the visitor sees what it costs.

The total field updates live. The entry, the order summary, notifications that show the order and payment add-ons use the same order lines, so what the visitor saw is what is charged.

Accessibility and Keyboard

The switch is a real checkbox with role="switch", so assistive technology announces it as a switch and reads its state. A small script keeps aria-checked in step with the state. People who use the keyboard get what they expect:

• Tab moves to the switch and shows a clear focus ring around it.
• Space toggles the switch, as on any checkbox.
• Enter toggles it too, and does not send the form while the focus is on a switch.
• The label beside the switch is clickable, and so is the switch itself.
• The state labels are real text: the one that does not apply is hidden from everybody, including screen readers.
• With forced colors or reduced motion the switch adapts: it uses system colors and does not animate.

Without JavaScript the field is still a checkbox, and the switch look comes from CSS alone. Clicking it checks the box, the label changes and the form saves the right value. Only aria-checked needs the script, and without it the native checkbox state is read as it always is.

Works Everywhere in Gravity Forms

• AJAX forms: the switches start again after a validation error and keep their state.
• Multi-page forms: the state travels between pages, back and forward, with or without AJAX.
• Save and Continue: the resume link brings back every switch, and a default of On on a page you had not reached is still On.
• Orbital theme and legacy markup: the switch looks the same in both.
• Phones: the large size is easy to hit with a thumb.

Styling

The switch follows the accent colour of your form theme. To restyle it, set the custom properties on the element with the class gets. They control size, colours and the focus ring.

.gets.gets--single {
    --gets-on: #0f766e;
    --gets-off: #94a3b8;
}

For a single field, choose a custom colour in the field settings instead of writing any CSS.

Troubleshooting

Frequently Asked Questions

Does it make requests to an outside service?

No. The switch is drawn with CSS and the script runs in the visitor browser without contacting anything.

What is saved when the switch is off?

The off value you set, for example No or 0. An unchecked checkbox sends nothing, so the add-on saves the off value once the form is sent.

Can I use text such as Subscribed and Not subscribed?

Yes. The values are any text you like. Use the labels for what the visitor reads and the values for what you store.

Can the switch be on by default?

Yes. Set the default state to On. It is on when the form loads and when a saved form is resumed on a page that was not reached.

What happens when my license expires?

The field becomes a plain checkbox. Your forms and entries stay as they are and the form keeps working.