[Gelöst] Multistep Forms

[Author]

Artikel

[AndreG3332]

HI guys,
I have been figuring out how to do multistep forms. I have been following the following two posts as they seem to be tied.
https://toolset.com/forums/topic/multi-page-cred-form-or-save-button-for-long-form/#post-298832
https://toolset.com/forums/topic/multi-page-form-form-type-and-post-type-do-not-match/

There are two or three issues that I am not very sure of and if you could have a look if I am on the right track.

I will explain my steps in basic:
Created a post form ( 4 one for each of the steps.
New Editors Form Step 1 (ID: 1391)
New Editors Form Step 2 (ID: 1396)
New Editors Form Step 3 (ID: 1398)
New Editors Form Step 4 (ID: 1400)

Then I Created 4 content templates
(id: 1402) new editors form step 1
(id: 1403) new editors form step 2
(id: 1404) new Editors form Step 3
(id: 1405) New Editors form step 4

/** Multistep form "Editor" profile for 4 pages*/

add_filter('cred_success_redirect', 'step2_redirect_func',10,3);
function step2_redirect_func($url, $post_id, $form_data)
{
    if ($form_data['id']==1391)
    {
       	$arr = array('content-template-id'=>1402); /*the step 2 CRED form post ID*/
        $url = add_query_arg($arr, $url);
    }
    return $url;
}
add_filter('cred_success_redirect', 'step3_redirect_func',10,3);
function step3_redirect_func($url, $post_id, $form_data)

{
    if ($form_data['id']==1396)
    {
       $arr = array('content-template-id'=>1403);  /*the step 3 CRED form post ID*/
        $url = add_query_arg($arr, $url);
    }
    return $url;
}
add_filter('cred_success_redirect', 'step4_redirect_func',10,3);
function step4_redirect_func($url, $post_id, $form_data)
{
 if ($form_data['id']==1398)
    {
       $arr = array('content-template-id'=>1404); /*the step 4 CRED form post ID*/
        $url = add_query_arg($arr, $url);
    }
    return $url;
}

I have two very specific questions about this.
Do I need to create a new empty content template for each of the post forms?
Do I use the submit button at the bottom of every form to move to the next form?
Do I create the Add new profile page and then call the template? will it then move from one template to the next on one page?
Finally there is actually a two-step registration of the editor. ( btw This is a post and not a user process) The editor will be registered on the WordPress user platform where after they will then be able to access the create editor form. The Editor will then submit an application to become editor. That is the "new editors form" that has been shown above. Then once they have paid the registration fee the admin will then change the status manually where they can then complete the whole profile that will be linked to editors CPT. (this will be a carbon copy from the process above.
This brings up my final question. When we do the "Profile completeness form" Adding all the extra fields they have to complete would the Page 1 form of the multistep form be then "edit" because the Editor profile has already been Created before?

[Christian Cox]

Do I need to create a new empty content template for each of the post forms?
Yes, a separate blank Content Template is required for each of the post forms in the workflow described in these two tickets.

Do I use the submit button at the bottom of every form to move to the next form?
Yes, the submit button at the bottom will attempt to submit the Form. If the submission is successful, the custom code snippet will handle automatically redirecting the User to the next Form in the sequence.

Do I create the Add new profile page and then call the template? will it then move from one template to the next on one page?
Let's say you create the Add new Profile page first, and you place the step 1 Form in a Content Template called "Step 1 Form". In the post editor screen for the Add New Profile Page, find the Content Template sidebar panel. You should select the Content Template "Step 1 Form" here. When the Add New Profile Page is displayed, the step 1 Form will be displayed automatically. The custom code snippet will handle the transitions between templates as each Form is submitted. The URL sequence will be something like this:
Step 1 Form: /add-new-profile-page
Step 2 Form: /add-new-profile-page?content-template-id=123
Step 3 Form: /add-new-profile-page?content-template-id=456
Step 4 Form: /add-new-profile-page?content-template-id=789
The first step will be displayed at the standard Page URL. Each subsequent step will be displayed at the standard Page URL with a content-template-id URL parameter applied.

When we do the "Profile completeness form" Adding all the extra fields they have to complete would the Page 1 form of the multistep form be then "edit" because the Editor profile has already been Created before?
Yes, assuming a post already exists and you want step 1 in this process to begin editing that post, the step 1 form would be an Edit Form instead of a Create Form. Since the Editor post already exists at this point, you would already have a URL set up for that Editor Post, something like /editors/my-unique-editor-post-slug/. The Content Template applied to Editor posts by default might display that Editor post content as normal, but you would include the step 1 Edit Post Form in a different, blank Content Template. You would direct the Editor User to edit their Editor Post at the Editor Post URL with the content-template-id URL parameter applied like /editors/my-editor-slug?content-template-id=12345. When the Editor User clicks that link, they would be shown the step 1 Form to edit their own Editor Post. From there, the custom code snippet would handle redirecting the User to each step of the editing process.

How do you determine the Editor post URL for each Editor User? One way is to use Views. A View of Editor Posts, filtered by post author, where the author is the same as the current logged-in User, would be appropriate. Assuming the Editor User is only allowed to publish one Editor post, this View would display information about the Editor Post corresponding to the current logged-in User. You could use a Fields and Text block to insert an Edit Post Link in the loop of this View, or you could create your own custom HTML link to the appropriate URL with a URL parameter applied manually, something like:

<a href="[wpv-post-url]?content-template-id=12345">Edit My Editor Post</a>

How do you prevent Editor Users from creating more than one Editor post with Forms? One way is to use a View to determine whether or not such a post already exists. If so, display nothing. If not, display the Form to create the Editor post. See the FAQ of this related article for information about limiting the number of posts a User can publish with Forms and Views:
https://toolset.com/course-lesson/how-to-create-custom-searches-and-relationships-for-users/#how-do-i-prevent-users-from-creating-more-than-one-contractor-post

[AndreG3332]

HI Christiaan,

Thx for your comprehensive answer. I have just run into one more problem. After adding the template to the add new editor page the first-page form shows correctly. However once I have opened the page it shows the first "page" correctly, but after I have added the editor Profile name and surname and I submit, and it creates the record but it still stays on the same form IE page1
Here is a list of all the forms and content templates as well as the code in the functions file.
Created a post form ( 4 one for each of the steps.
New Editors Form Step 1 (ID: 1391)
New Editors Form Step 2 (ID: 1396)
New Editors Form Step 3 (ID: 1398)
New Editors Form Step 4 (ID: 1400)

Then I Created 4 content templates
(id: 1402) new editors form step 1 (use 1391)
(id: 1403) new editors form step 2(use 1396)
(id: 1404) new Editors form Step 3(use 1398)
(id: 1405) New Editors form step 4(use 1400)

add_filter('cred_success_redirect', 'step2_redirect_func',10,3);
function step2_redirect_func($url, $post_id, $form_data)
{
    if ($form_data['id']==1391)
    {
       	$arr = array('content-template-id'=>1403); /*the step 2 CRED form post ID*/
        $url = add_query_arg($arr, $url);
    }
    return $url;
}
add_filter('cred_success_redirect', 'step3_redirect_func',10,3);
function step3_redirect_func($url, $post_id, $form_data)

{
    if ($form_data['id']==1396)
    {
       $arr = array('content-template-id'=>1404);  /*the step 3 CRED form post ID*/
        $url = add_query_arg($arr, $url);
    }
    return $url;
}
add_filter('cred_success_redirect', 'step4_redirect_func',10,3);
function step4_redirect_func($url, $post_id, $form_data)
{
 if ($form_data['id']==1398)
    {
       $arr = array('content-template-id'=>1405); /*the step 4 CRED form post ID*/
        $url = add_query_arg($arr, $url);
    }
    return $url;
}

I would appreciate it if you could have a look at the code and form references and give me a shout if you pick up on something.

I also have Two further questions, please. When I update the add profile form (1391), it does update the database but it adds it as a cred named field. Would it be possible to use the name and surname from the Add Profile form to name the entry?

Oh yes it is a matter of stature.

For this I will have to give you a bit of background. The site is about professional content editors that can showcase their work and get new customers. This site is the site for the controlling body of the editors. The editors will create a WordPress user. Once the User has been created it should open the profile form (issue above) (post type) complete the form. The Editor must then pay the annual fee for the registration and once they have provided the proof of payment they can then complete the profile and they will then be registered on the site.

My question I did make the profile details and the profile completeness two different post types because it is done at different times. I used this approach for the profile and profile content.
https://toolset.com/course-lesson/how-to-create-custom-searches-and-relationships-for-users/

Would you combine the two posts in one cpt or then split it as I did? There will always just be one full entry of the profile details vs the add new editor profile.

[AndreG3332]

Hi Christian

Ok I have encountered another issue but I am sure it has something to do with the " functions" text generated.

I wanted to start doing more formating while waiting for your reply and then I ran into this issue. I am using a test page and setting the test page template to "New Editors Form Step 2 " However what I do this I am getting the error "Form type and post type do not match" So first I thought I might have something to do with the fact that step one does not automatically move over to step. As a debugging option, I went to comment out the added functions. However, I am still getting the "Form type and post type do not match"

Thx

[Christian Cox]

However once I have opened the page it shows the first "page" correctly, but after I have added the editor Profile name and surname and I submit, and it creates the record but it still stays on the same form IE page1
The code looks okay, so the next thing to check is the configurations for what to do after the Form is submitted. You must set the step 1 Form to redirect to a different post after the Form is submitted. It does not matter which Page you choose, because the code will override that setting, but you must choose one of the options that will trigger a redirect. If you choose one of the options to stay on the same page or display a message, the redirection hook will not be triggered.

If the Form is already configured to redirect and the code still is not working as expected, I'll need to take a closer look.

When I update the add profile form (1391), it does update the database but it adds it as a cred named field. Would it be possible to use the name and surname from the Add Profile form to name the entry?
Yes, you can delete the title field from the Form (if one currently exists), then use the Forms API cred_save_data to create a custom code snippet that will automatically set the post title using information captured in the Form fields. There are several similar tickets in the forum that have example code you could use as a starting point. Search for "automatically generate post title from custom fields" and you'll find tickets like this one:
https://toolset.com/forums/topic/create-post-title-for-cpt-from-two-custom-fields/
If you need more guidance, let's split off a new ticket to discuss this separately from the general multistep Form setup.

Would you combine the two posts in one cpt or then split it as I did?
I would not base my decision so much on the process involved to create and edit the post details, as I would base my decision on the logical organization of the information in the front-end and the back-end of the site. If it makes sense to have the information contained in one post editor screen in wp-admin, and it makes sense to have all the information displayed on a single post on the front-end, I would combine the two post types. That will make searching for content easier (both on the front-end and in the back-end), it will consolidate editing later, it will make it easier to display all the data in a single page on the front-end (one post, one template), and it could help limit the amount of custom code required to manage existing content later. If your concern is about splitting up the data entry process into separate entry Forms, that wouldn't heavily factor into my post/field organization decision because it is possible to create multiple partial entry Forms that enable your Users to create a post with limited input fields, or edit a post with limited input fields, so that only specific portions of a single post are managed in each Form. Any fields that do not exist in a new post Form will be left empty in the new post, and the existing contents of any fields that are not included in an edit post Form will remain unchanged when the Form is submitted.

I am using a test page and setting the test page template to "New Editors Form Step 2 " However what I do this I am getting the error "Form type and post type do not match"
Right, if the test page is a WordPress Page, and the Form is designed to edit any post type other than Pages, you will see this error if the Form is not explicitly configured to edit a specific post. My guess is that is happening here. Without explicitly setting a post to edit, the Form can only assume you are want to edit the post where the Form is displayed (a test Page). That is the mismatch of post types mentioned in the error message. When you insert the Edit Post Form using a Form block, you can use the sidebar configurations to explicitly set a specific post, which will prevent this problem. Or if you insert the Edit Post form using a shortcode, you can apply a post ID in the shortcode attributes as explained in the cred_form shortcode documentation:
https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/
Otherwise, you could create a View of posts with filtering in place so that the post you want to edit is displayed in the loop, then replace the loop contents with a Form block displaying your Edit Post Form. The Form will know which post should be edited inherently, based on the loop context.

[AndreG3332]

Hi Christiaan,

Ok i did redirect to page /and post and still, I am getting the post and page error.

[Christian Cox]

Ok i did redirect to page /and post and still, I am getting the post and page error.
It's probably best for me to log in and take a look at everything in wp-admin. Can you provide an admin login here in the private reply fields, and let me know the URL where you see the error about the post type and form mismatch?

[Christian Cox]

Ok i did redirect to page /and post and still, I am getting the post and page error.
The redirection you have established after step 1 is sending the User to this URL:
versteckter Link
That is the Contact Us page, with Content Template #1403 applied to that post. This template includes the Step 2 Form as a shortcode:

[cred_form form='new-editors-form-step-2']

However, there is nothing here that tells the step 2 Form which post to edit. Without any post ID specified in the shortcode, the Form has no idea which Editor Profile post you are attempting to edit here. There is no inherent connection between Forms, so the post created by step 1 is completely unknown to the next step form. By default, an Edit Post Form assumes you are trying to edit the post or page where the Form is displayed. In the case of the step 2 Form, it is displayed on the Contact Us Page. That's why you see a mismatch between post types. The Form is trying to edit a Page, but it is configured to edit Editor Profile posts.

To fix this, you need a way to explicitly tell the Form which post to edit. There are several options. The first two are the most common solutions:
- Instead of configuring the Step 1 Form to redirect to the Contact Us Page, configure it to redirect the User to the Editor Profile post they just created. Content Template 1403 will be applied to that post URL automatically by the custom code, and the Form will correctly assume you want to edit the current Editor Profile post. No error will be displayed. Each step Form should be configured to redirect to the post being created or edited in this scenario. This option works best with Forms that create posts in Published status. I see yours creates posts Pending Review. One thing to be careful of here is your Users must be capable of Previewing this post status. If not, you may have issues with redirecting to the post or page created by the Form, since the URL for a Pending Review post is only a preview URL, not the true permalink.
- In Content Template 1403, create a View of Editor Profile posts, filtered by post author equal to the current User. This will effectively include the User's Editor Profile post in the View results. Move the Step 2 Form shortcode into the Loop of this View. The Form will inherently know which post to edit based on the View's loop.
- Using custom PHP, create a custom shortcode that returns the post ID of the current User's Editor Profile post. Register that shortcode in Toolset > Settings > Front-end Content > 3rd-party shortcode attributes, then insert it in the post attribute of the cred_form shortcode used to display the step 2 form:

[cred_form form='new-editors-form-step-2' post='[your-custom-shortcode][/your-custom-shortcode]']

That specifies a post by ID, and the From will know which post to edit.

[AndreG3332]

HI Christiaan,

I think I have the hang of it now. I misunderstood one of your earlier answers, and that was what caused the error with the contact us page.

I have tried now following your first solution, and at face value, it does seem that I understand it now. I would like to keep the ticket open for a day or two until I have finished both the multistep forms I have to make to complete this project. If all goes well I believe we should be able to close this ticket by Monday the 26Th.

In advance, I want to thank you for your patience in working this through with me.

[Christian Cox]

Okay great, I'll stand by for your updates. If you get stuck feel free to post here and I'll try to give you some feedback. I'm out Fridays and Saturdays and generally available Sunday - Thursday.

[AndreG3332]

Hi Christiaan,
i have implemented everything you told me to and on Friday it was working. Now i am getting an error again

When i tried to do the first entry i got.the "Form type and post type do not match" error again. I went back to the step forms and i noticed that
New Editors Form Step 1 shows the error as per the attachment. I am not sure if i did anything wrong. You should still have access to previous credentials.
Sorry I found the problem. Cancel this comment please

[Christian Cox]

I've trashed your previous comment, and will continue to stand by for your updates. I hope everything is working as expected now.

[AndreG3332]

HI Christiaan,

Here is the next round of problems. The first multi-step form is now working perfectly. Now I need to do a second multistep form based on the entry made with the first. The first multi-step form is for editors that want to register on the site. The first form gives information for the admin to approve or decline the application.
Once the application has been approved the second multistep form must be completed. The entry will edit the information completed with the first form.

I did follow the steps I did for the first form except for form 1 (update-editors-profile-step-1) this time around was to edit the post instead of adding a new post. I did the template also and linked it to the Profile Completeness page.

It was at this stage I picked up two points that I need to have cleared up.
Edit Post Form - Update Editors Profile Step 01 form where it states "After visitors submit this form:"
I selected "go to specific post" , Editors-profile, select post link to current user post.

The first point I picked up was that when I click the drop-down it show only entries that was created with cred. Is this correct?
The second and more concerning issue is that when I click on the select post it creates a critical error when I try to link in the specified post. After I disabled the access plug in the critical error goes away but so does the post in that listing. I then had to go to the specific post and resave before it would work again.

I have brought the system state back to a workable form with the access plugin activated.
The previous credentials are still in place

Thz

[Christian Cox]

The first point I picked up was that when I click the drop-down it show only entries that was created with cred. Is this correct?
Not quite, the dropdown should show any published post in the Editor Profile post type. If the only published posts are created by Forms, then those are the only posts that will be visible. I see that only one published post exists, and that post was created by Forms. So it seems that only Forms posts are visible, but that is just a coincidence.

The second and more concerning issue is that when I click on the select post it creates a critical error when I try to link in the specified post.
If you want to redirect to the current User's post, you should choose the option "After visitors submit this form: Display the post".

[AndreG3332]

HI Chritiaan ,

Thank you for your fast reply. The first point, There are two entries in the editor's profile, the one that start with cred was done with post form. However, the second one was created directly in the backend. And the posting form doesn't seem to pick it up.

The second point goes about multistep form. according to your post 2121137 where you stated that the post must refer to the post just created. remember I am there editing a post that was created with the multistep form we discussed before and now it must be completed. Furthermore, I am getting the "Form type and post type do not match" error again.

The edit Post Form - Update Editors Profile Step 01 is just the first step in a 9 step form that I am now trying to get to work.