How to enable all pages on page load for a multi-page form

Created by Phil Kurth, Modified on Fri, 15 Jul 2022 at 08:07 AM by Phil Kurth

When using a multi page form, each page only becomes available for navigation as the 'next' button is clicked and the pages are reached. This allows validation of each page as the form is moved through.

There currently isn't a setting or API in place for making all pages active on page load but with a little JavaScript, the form can be manipulated to support this:

jQuery(function ($) {

	// Hook into the form setup action.
	acf.addAction('af/form/setup', function (form) {

		// Get the total number of pages in this form.
		let n_pages = form.pages.length;

		// Set the max page to the number of pages minus 1. This is zero-indexed.
		form.max_page = n_pages - 1;

		// Force a form refresh to update the UI — page links will now appear clickable.
		af.pages.refresh(form);

	});
});

Place this code in your site's footer or in a custom JS file.