### [How to Conditionally Show the Submit Button](https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/)

**Published:** February 17, 2021
**Author:** Umair Majeed

**Excerpt:** This tutorial will show you how to conditionally show the submit button based on answers to your form questions. 

**Content:**

Would you like to automatically show or hide the Submit button based on form field responses? With a simple code snippet, you can control the visibility of your form’s Submit button using conditional logic.

This guide shows how to add a code snippet and set up conditional logic to control your Submit button’s visibility.

## Setting Up the Form

To begin, open the form builder by [creating a new form](https://wpforms.com/docs/creating-first-form/) or editing your existing one.

For this example, we’ll create a donation form with a Multiple Choice field that shows Yes/No choices. All other additional fields in the form will be revealed only if **Yes** is selected using conditional logic.

The Submit button will appear only when **Yes** is selected, and users will be redirected to a Thank You page if **No** is selected.

**Note:** Make note of your form’s ID as you’ll need these when adding the code snippet. If you need help finding these IDs, check our guide on [how to find form and field IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).

![Create the form and add your fields](https://wpforms.com/wp-content/uploads/2024/10/donation-form-multiple-choice.png)### Setting the Conditional Logic

Before we add the code for the Submit button, we need to set up conditional logic for the other fields in your form. These fields should remain hidden until the user selects “Yes” from the Multiple Choice field.

To achieve this, open each field’s settings and configure conditional logic to show the field when your Multiple Choice field equals **Yes**. This ensures these fields remain hidden by default and only appear when needed.

![](https://wpforms.com/wp-content/uploads/2024/10/enable-conditional-logic-2-1024x452.png)**Note:** If you need help understanding how conditional logic works in WPForms, please see our detailed [guide on conditional logic](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/).

## Creating the Thank You page

Since our form offers users a Yes/No choice, we want to provide a good experience even when “No” is selected. Instead of just hiding the Submit button, we’ll redirect the users to a dedicated Thank You page.

To do this, create a new page in WordPress and name it **Thank You** (or any other name you prefer). This is where users who select “No” will be automatically redirected.

Make note of the page’s URL path as you’ll need this for the redirect in our code snippet.

## Adding the Code Snippet

The following code snippet will control your Submit button’s visibility based on form responses:

This snippet first uses CSS to hide the Submit button when the page initially loads. Then, it sets up a JavaScript event listener that watches for changes to your form’s Multiple Choice field options.

When a user selects “Yes”, the script adds a CSS class that makes the Submit button visible. If they select “No”, the script automatically redirects them to your Thank You page.

**Note:** If you need help adding code snippets to your site, please see our tutorial on [adding code snippets](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/) safely.

## Customizing the Code

You’ll need to customize several key values in the code snippet for your specific form:

- On **line 12** and **line 16**, locate the CSS selector `#wpforms-form-1000` and replace `1000` with your actual form ID.
- On **line 30**, in the jQuery selector `form#wpforms-form-1000`, replace `1000` with your form ID once more.
- On **line 33**, you’ll find the redirect URL path `/thank-you`. Update this to match the actual URL path of your Thank You page. 
    - For example, if you named your page “Thanks”, you would change it to `/thanks`.

## Testing Your Implementation

Once you’ve added and customized the code snippet, it’s essential to thoroughly test the functionality:

- Start by loading your form fresh and verify the **Submit** button is hidden by default.
- Next, select **No** in your form and confirm you’re immediately redirected to your Thank You page.
- Then test the “Yes” path – select **Yes** and verify that not only does the Submit button appear, but also that all your conditionally hidden fields become visible.
- Finally, complete and submit the form with **Yes** selected to ensure the entire process works as expected.
- 

## Frequently Asked Questions

#### Q: Can this be used for a Single Line Text field?

A: Absolutely! Here’s a code snippet that works with a Single Line Text field.

```

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 */
 
add_action( 'wp_head', function () { ?>

**Categories:** Extending

**Tags:** Javascript, JS, PHP

---