How to Automatically Submit a Form with a Field Choice

Introduction

Would you like to automatically submit a form based on a field choice? Perhaps you want a simple “Was this helpful?” question that will just display a yes or no question and once selected will automatically submit the form for you. In this tutorial, we’re going to show you how incredibly easy this is step by step using PHP and a little CSS.

If you’d like to give your users an opportunity to share their feedback without automatically submitting the form after selection, please take a look at the tutorial How to Create a Post-Review Form. That tutorial is very similar to this one but allows you to collect feedback if users would like to provide further feedback in their form submission.

Creating the form

We’ll begin by creating a new form. First, add a Layout field to the form. Inside each column of the Layout field, add a single Checkbox field in each column.

For the purpose of this tutorial, we only want to give two choices in our form. A single checkbox in the first column of the Layout field and the same for the second column. One will be for a “yes this was helpful” selction and the other will be a “no, this was not helpful”.

We also are going to add a Hidden Field so we can capture the page title of where the user was on our site when they submit the form.

begin by creating your form and adding 2 checkboxes and a hidden field

If you need help with creating your form, please review this helpful guide.

Setting the icon choices

Next, we’re going to set up the Checkbox field so it only has one selection and use the Icon Choices for this field.

set your checkbox to use icon choices

If you need help in setting up your Icon Choices, please review this documentation.

Our Checkbox field has a single option Yes. We’ve enabled the Use icon choices, our Icon Color is #066aab with our Icon Size of Large. We’ve also set the Icon Choice Style to Classic. We selected the face-smile for the Yes checkbox and face-frown icon for the No checkbox.

We also want to hide the label for our Checkbox fields. In order to do this, click the Advanced tab of each checkbox and click the Hide Label button to hide our field labels.

click the button to hide the label on each checkbox field

Adding a Smart Tag to the Hidden Field

For the Hidden Field, we’re going to add the Smart Tag to capture the page title when the form is submitted. To learn more about built-in Smart Tags with the WPForms form builder, you can review this documentation.

We’ve added the Smart Tag {page_title} to Default Value of the Hidden Field.

add the page title smart tag to the hidden field default value

Adding the snippet

Now it’s time to add the snippet to your site. If you need help in how to add snippets to your site, please check out this tutorial.

/**
 * Trigger submit from checkbox click
 *
 * @link https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/
 */
 
function wpf_dev_automatic_submit_form( ) {
?>
 
<script type="text/javascript">
	
jQuery(function($){
 
        var event = jQuery.Event( "submit" );
	
        jQuery("input:checkbox").change(
            function()
            {
				// when any checkbox is checked, trigger this function
                if( jQuery(this).is(":checked") )
                {
					// only run this function for the form ID 3046
                    jQuery("#wpforms-form-3046").submit();
                }
            }
        )
 
    });
 
    </script>
 
<?php
}
 
add_action( 'wpforms_wp_footer_end', 'wpf_dev_automatic_submit_form', 30 );

This snippet will only run on the form ID 3046, when either of the Checkbox fields are checked, it will trigger this function and automatically submit the form.

You’ll need to update this form ID to match your own form ID. If you need assistance in finding your form ID, please review this guide.

In this tutorial, our form ID is 3046.

Adding the CSS

Because we don’t want users to have to click the Submit button, there are a few CSS tweaks we want to make which includes hiding the Submit button.

In order to do this, we need to add some custom CSS. If you need help with how and where to add custom CSS, you can review this tutorial.

button#wpforms-submit-3046 {
    display: none;
}

form#wpforms-form-3046 span.wpforms-icon-choices-label {
    font-size: 0;
}

ul#wpforms-3046-field_3 li label:hover, ul#wpforms-3046-field_4 li label:hover, ul#wpforms-3046-field_3 li.wpforms-selected label, ul#wpforms-3046-field_4 li.wpforms-selected label  {
	box-shadow: none;
}

form#wpforms-form-3046 ul.wpforms-icon-choices .wpforms-icon-choices-item label{
	margin:0 auto;
	padding:0;
}

div#wpforms-3046-field_4-container {
    width: 20%;
    float: left;
}

div#wpforms-3046-field_3-container {
    width: 20%;
    float: right;
}

@media screen and (max-width: 600px) {
	
div#wpforms-3046-field_4-container {
    width: 50%;
    float: left;
}

div#wpforms-3046-field_3-container {
    width: 50%;
    float: right;
}

form#wpforms-form-3046  .wpforms-layout-column {
    width: 50%;
}
	
form#wpforms-form-3046  .wpforms-field-layout-columns {
		flex-direction: unset;
	}
	
}

This CSS is hiding the labels for our fields as well as the button to submit the form. But we’re also making a few other tweaks to position our icons a little neater for our form.

You’ll need to update the form ID for these CSS rules to make sure that it’s targeting the correct form and field IDs.

Our form ID for the purpose of this documentation is 3046. Our first checkbox is the field ID 3 and the second checkbox is field ID 4.

Now whatever option your visitors selects, the form will automatically submit.

with this snippet, once the user makes a selection it will automatically submit a form

And that’s it! Now when your visitors click either icon choice, the form will automatically submit. Would you like to show or hide your submit button conditionally based on an answer from your form? Please check out the tutorial on How to Conditionally Show the Submit Button.

Action Reference: wpforms_wp_footer_end