Skip to content

Turn long ACF front-end forms into smaller multi-steps forms!

Notifications You must be signed in to change notification settings

psaikali/acf-multiforms-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Turn long ACF front-end forms into smaller multi-steps forms!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages