Navigation überspringen

[Gelöst] How to create a multi-step form using Toolset

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem:
Toolset Forms are single-page forms that publish (or edit) a post all at once. Is it possible to break a long form into smaller steps that can be completed one at a time?

Solution:
This can be achieved by splitting the form fields into a series of smaller forms—containing only the fields required for that step—and then chaining the forms together using redirect hooks to advance from one form to the next.

Full details appear in the thread below.

Relevant Documentation:
https://toolset.com/documentation/programmer-reference/cred-api/#cred_success_redirect

This support ticket is created vor 2 Jahren, 6 Monaten. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

Dieses Thema enthält 1 Antwort, hat 1 Stimme.

Zuletzt aktualisiert von Nigel vor 2 Jahren, 6 Monaten.

Assistiert von: Nigel.

Author
Artikel
#2375179

Nigel
Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: Europe/London (GMT+00:00)

With Toolset Forms it's possible to create a one-page form to publish a post.

How is it possible to break a long form into smaller steps where users complete only a few fields, then advance to another page with a few more fields, continuing until all the steps are complete?

#2375259

Nigel
Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: Europe/London (GMT+00:00)

There isn't a facility to create multi-step forms directly, but the same effect can be achieved by chaining together a series of individual forms, each of which only includes the fields for that step and a button to advance to the next step (the next form).

The first form is a publish form, i.e. it creates a post. Typically, you would not want to publish the post until the last step is completed, and so the created post would have a draft status.

Each of the other steps are provided by post edit forms, which edit the newly created post, each step updating the post with additional field values.

When the first form is submitted it redirects to display the second form, which when submitted redirects to display the third form, and so on, until the last form is submitted and the post is published.

The solution relies on the normal workflow for post edit forms, namely that each edit form is hosted inside an unassigned Content Template, and the redirection from one form to the next is handled by some custom code that utilises the cred_success_redirect API hook (see https://toolset.com/documentation/programmer-reference/cred-api/#cred_success_redirect).

Implementation
For this example we'll assume we have a custom post type with many custom fields assigned, and that we want to split the post fields across four forms.

All forms should be set not to use ajax, and should redirect somewhere upon submission (e.g. choose Display the post). That is required for the custom code which overrides the redirect to run; it needs something to override. The final form can use whichever setting is appropriate.

Go to Toolset > Post Forms and add a new form, one which is to Add new content. Only include the fields you intend to be completed in the first step (which should include the post title). You may want the text for the submit button to be "Next".

Now add a new post form, this time an edit form, which should include the fields for step 2.

Go to Toolset > Content Templates and add a new template. Give it a meaningful title (e.g. "Container for submit post step 2"), and insert the edit form you just created.

Now add a new edit post form with the fields for step 3. Insert the form into a Content Template, as in the previous step.

Repeat for as many steps as are required. You may want to use "Complete" or "Publish" for the button text of the final form.

Now, you need to make a note of the form IDs for each step (you can see the IDs when listing the forms at Toolset > Post Forms), and also the IDs of the corresponding unassigned templates (which you can see at Toolset > Content Templates).

You will be editing the custom code to specify the form IDs and corresponding template IDs as arrays.

The first form does not have a corresponding template ID (it is not an edit form), so we'll use null as the first element in the array of content template IDs, e.g.

    $form_ids = array( 10, 11, 13, 15 );
    $template_ids = array( null, 12, 14, 16 );

The complete code (that can be added as a code snippet at Toolset > Settings > Custom Code) is:

/**
 *  Hook into the form redirect filter to append a content-template-id parameter
 *  which forces the edit form in the template with that id to be displayed.
 * 
 *  Edit the array $form_ids with the form steps in order and
 *  the array $template_ids with the corresponding template IDs in the same order.
 *  (The first element should be null because the first form is not an edit form
 *  and is not hosted inside an unassigned template.)
 */
add_filter('cred_success_redirect', 'ts_multipart_form', 10, 3);
function ts_multipart_form($url, $post_id, $form_data) {

    // Edit 
    $form_ids = array( 10, 11, 13, 15 );
    $template_ids = array( null, 12, 14, 16 );
    // Stop editing

    $form_id = $form_data['id'];

    if ( in_array( $form_id, $form_ids ) )
    {
        array_shift( $template_ids );
        $template_ids[] = null;
    
        $next_ids = array_combine( $form_ids, $template_ids );

        $next_id = $next_ids[$form_id];

        if ( !is_null($next_id) )
        {
            $url .= "&content-template-id=$next_id";
        }
    }

    return $url;
}

Insert the first form on a page, then visit on the front end to begin the first step of the multi-step submission.