How to Automatically Submit a Form with a Field Choice

Interested in automating form submission based on a field choice? Picture this: a straightforward ‘Was this helpful?’ question with a simple yes or no option that, when selected, automatically submits the form. In this tutorial, we’ll guide you through the surprisingly simple process, step by step, using PHP and a touch of CSS.

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.

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.

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.

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.

Automatically submit the form

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.

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.

Reference Action

wpforms_wp_footer_end