In this tutorial, I’ll show you how to use a Radio field to submit a form built with Gravity Forms. I will also demonstrate how to use conditional logic Confirmations to vary the action when the form is submitted.
How it works
With this solution, you will be replacing the need for the submit button on your form.
Instead of using the submit button, each choice in your radio field will complete the action of submitting the form.
You can use a single radio button or have a list of several radio buttons and use confirmation conditional logic to control what happens when that form is submitted.
What you’ll need
In order for this to work you will need the following.
- Gravity Forms
- Code Snippet Plugin (optional – recommended)
- Code Snippet (provided below)
Usage
The snippet below will create the magic.
Place the code directly in the form inside an HTML block.
Putting this JS code in the an HTML field will prevent this function from being triggered by another form on your site.
The Conditional Logic
This radio button has four different confirmation results.
- select ‘WP Simple Pay’ = redirect to https://wpsimplepay.com
- select ‘WooCommerce’ = redirect to https://woocomerce.com
- select ‘SamCart’ = redirect to https://samcart.com
- select ‘None’ = default Confirmation message
Will The Entries Still Be Recorded?
Yes. The submission action will work the same as it would if you were to use a button.
- Form entries will be recorded
- Confirmation action performed (message, page, redirect)
Removing the Form Button
In this case, it makes sense to remove the form button because I want the submission to be created by the radio button choice. So we will need a simple CSS snippet, shared below.
Be sure to replace ID, with your form ID number (i.e #gform_wrapper_12)
Put this code in your themes style.css file or in the Customizer in Appearance => Customize => Additional CSS
Learn how to add the code to your site using a functionality plugin.
Important: Do NOT Enable Ajax
When adding the form to you page, it is important that you do NOT enable Ajax. This will break the radio button magic.
When using the Gravity Forms shortcode, make sure ajax=”false”:
Questions? Issues?
For assistance with this, please use the comments below!