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!
This doesn’t seem to work on multi page forms. Ideas why or how to fix?
The script should work on a multipage form, I just tested this and it’s working. The CSS to hide the button would require a different selector. Here is an example:
body #gform_wrapper_ID .gform_body .gform_page_footer .gform_button {
visibility: hidden;
}
Be sure to change ID for your actual form ID number.
If you’re having issues with the script, you may need to perform a conflict test. You can also share the URL to your form page and I’ll take a look.
Best,
Chris
I should have been more clear. It doesn’t work if you try to place the new submit control anywhere except on the last page of the form. My project specs require a submit button for the entire form prior to the final page.
@Scott, keep in mind with a multipage form, the form can not be submitted until you get to the last page of the form, so if you have radio buttons on other pages, it will only “submit” the page, triggering the next button to move to the next page.
Ok. Unfortunately that’s what I’m trying to figure out a workaround around for.