### [Moving to the Next Page Automatically on Multi-Page Forms](https://wpforms.com/developers/how-to-move-to-the-next-page-automatically/)

**Published:** June 29, 2022
**Author:** Umair Majeed

**Excerpt:** In this tutorial, we're going to show you how you can automatically move to the next page of your multi-page form based on a form field answer. 

**Content:**

Would you like your multi-page forms to automatically advance when users make selections? With a simple code snippet, you can create a smoother form experience by automatically moving to the next page when users select their answers. This enhancement reduces clicks and makes your forms more intuitive to complete.

This guide will show you how to automatically advance your multi-page forms based on user selections.

## Creating Your Form Structure

First, you’ll need a multi-page form with form fields and page breaks.

For the purpose of this tutorial, we’re creating a swag sheet form, there will be three **Multiple Choice** fields using **Image Choices**. Each selection will include a **Page Break**.

If you need help creating a multi-page form, please review our guide on [creating multi-page forms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms/).

## Adding the Auto-Advance CSS

Since we want the form to move to the next page automatically based on **any** selection, we’re going to add CSS to hide the **Next** buttons on this form. To achieve this, copy this CSS to your site.

```

form#wpforms-form-1000 button.wpforms-page-button {
    visibility: hidden;
}
```

Remember to replace `1000` with your form’s ID. If you need help finding your form ID, check out our guide on [how to find form and field IDs](https://wpforms.com/docs/how-to-use-the-forms-locator-in-wpforms/).

## Adding the Auto-Advance JavaScript

Next, add this code snippet to enable automatic page advancement. If you need help adding code snippets, please review our tutorial on [adding code snippets](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

**Note:** This code targets **Image Choices** using the `.wpforms-image-choices` class.
If your field uses **Icon Choices**, update the selector in **line 12** by replacing `.wpforms-image-choices` with `.wpforms-icon-choices` so the script works correctly.

The script works by targeting your specific form using the form ID (replace `1000` with your ID), listening for clicks on Image Choice inputs, and triggering the **Next** button click automatically when a selection is made.

## Customization Options

You can modify this functionality to target specific questions by adjusting the jQuery selector, add conditions for when to advance, or redirect to different pages based on answers.

Here’s an example that advances only when “**Yes**” is selected:

```

function wpf_dev_conditional_next_page() {
    ?>

**Categories:** Extending

**Tags:** Javascript, jQuery, JS, PHP

---