Gravity Forms: Submit Form When Radio Button is Selected

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.

<script>
 jQuery(document).ready(function($) {
 $('input[type=radio]').on('change', function() {
 $(this).closest("form").submit();
     });
   });
</script>

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.

1. Form entries will be recorded
2. 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)

// Replace ID with your forms ID number.

body #gform_wrapper_ID .gform_footer input[type=submit] {
  visibility: hidden;
}

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!