Turn long ACF front-end forms into smaller multi-steps forms!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
fields
src
README.md
acf-multiforms-example.php

README.md

Multi-steps form with ACF

General concept

Advanced Custom Fields natively handles front-end forms, but multi-steps forms are not supported out of the box.

This proof-of-concept has been created in order to explain how to use multiple ACF fields groups to display a multi-steps front-end form.

Head to the class-shortcode.php file to discover the main logic behind this. This is the main file in charge of outputting our [acf_multiforms_example] shortcode and doing the necessary magic when processing the form with acf/save_post. It is heavily documented to explain how things work.

Demo

Form on the front-end

The form displayed below uses an enhanced version of acf_form(); it has a total of 3 steps.

The first step is composed of two ACF fields groups, while the two other steps display only one single field group each.

(Click the image below to see a slower video showing the final result in back-office.) Watch a detailed video

Post data in the back-office

Nothing new here actually :) In the back-office, ACF acf_form() takes care of saving form data in the proper post meta fields.

Notice that the first two metaboxes below are the ones displayed in the first step of the front-end form.

Post back-end