[Resolved] How to build a multistep form with the brand new ajax capability?

[Author]

Posts

[carletto0282]

Hi guys,

trough the blog announcements of the latest release of CRED I see you added ajax capability to submit forms and you suggest it could be used to build a multistep form ("Build multi-step processes – if you want one thing to trigger another, with your custom workflow, the AJAX submission is the way to go. Use CRED hooks to add your logic and display the next steps according to the state of the form submission.")

Actually I'm not able to realize how this can be done?

Let's say I create two forms that are step-1 and step-2: step-1 is a content creation form while step-2 a content edit form.

Once I set step-1 form and activate ajax capability I'm not able to figure out how should I set the "step" from step-1 to step-2.

Would you please help?
Thank you

Best regards
Carlo

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

Actually, with CRED Ajax the thing is that it will not reload the whole form but the thing is that its making ajax call to save the CRED entry. To implement multi-part form with another form is not possible right now as it needs redirection to load another form with same entry.

However, this feature is already requested by other users and our developers are working on this in order to implement this feature in near future.

You need to use same redirection method as you were using before:

Could you please try following steps:

1)
Create two pages with title "step1" and another page with "step2"
=> Create your CRED form for "step1" with Ajax
+ Within section "Form Settings"
- Choose what to do after visitors submit this form: Select "Create" content"
- Choose what to do after visitors submit this form: Select "Go to a Page" and select page "step2"
- Add your CRED form fields

2)
=> Create another CRED form for "step2" with Ajax
+ Within section "Form Settings"
- Choose what to do after visitors submit this form: Select "Edit content"
- Choose what to do after visitors submit this form: Select "Go to a Page" and select page "step2"
- Add your CRED form fields

3)
=> Add CRED form to page step1 and step2 respectively.

4)
Add the following code to your current theme's functions.php file

add_filter('cred_success_redirect', 'step2_redirect_func',10,3);
function step2_redirect_func($url, $post_id, $form_data){
   if ($form_data['id']==366){
        $arr = array('cred-edit-form'=>368,'cred-post-id'=>$post_id); //the step 2 CRED edit form id and created $post_id
        $url = '<em><u>hidden link</u></em>'.$_SERVER[HTTP_HOST].'/step2/';
        $url = add_query_arg($arr, $url);
                         
    }
    return $url;
}

Where:
366 is your step1 CRED Create form ID.
368 is your step2 CRED Edit form id.

Now, load page step1 and fill out the form and submit, it will redirect you on step2 page with your step2 CRED form.