Posted on by

Creating Multiple-page Forms in Participants Database

Version 1.5.2 introduced the ability to create forms spread across multiple pages. Each page of the form is a separate submission, each with it’s own submit button which submits the data and takes the user to the next page.

The way multiple-page forms work is each page submits the information to the database, then goes to another form on another page with a different set of fields. The whole series of forms all save their data to the same record. This is accomplished using a session cookie, so the application knows which record the user is filling out.

In Participants Database, each form page is going to have it’s own shortcode which determines which fields are shown on that page. By defining the “action” attribute in each shortcode, the user is taken to the next form page after the form is submitted. Each page shows a different part of the form by setting the fields or group to show in the shortcode on that page.

You may find it convenient to group your fields according to the page they are on. For long, complex forms, it helps orient the user if each section has a title defining the subject the form fields on that page are related to.

Building Your Multi-Page Form

Here is a step-by-step breakdown of how that is done.

  1. In this example, the form fields are set up so that they are organized into groups with each group corresponding to a page.
  2. On the first page, add a signup shortcode that defines the group of fields to show on that page. Put the name (slug) of the next page in the action attribute:
    [pdb_signup groups="main" action="signup-page-2" submit_button="Next"]
  3. On page “signup-page-2” put in a record shortcode showing the second page of form controls. Don’t use another “signup” shortcode here, it must be a “record” shortcode:
    [pdb_record groups="address" action="signup-page-3" submit_button="Next"]
  4. On the third form page, add another record shortcode with the action attribute set to the “thank you” page where the [pdb_signup_thanks] shortcode is:
    [pdb_record groups="personal" action="thanks" submit_button="Complete the Signup"]
  5. There must be a “thank you” page at the end of the series to complete the submission. Place the “thanks” shortcode on this page:[pdb_signup_thanks]

The “thanks” shortcode completes the form submission, and any notification emails are sent when that page is loaded.

The user can go forward or back through the form pages (using the browser back or forward buttons) as long as they don’t hit the final submit that takes them to the thanks page. They can even leave the site completely and come back to the form and the fields that were submitted will be filled in (because of the session cookie). The submission can then be completed from that point. If a form is abandoned partway through, the submitted fields will be in the database, but no notifications will be sent.

You can have as many pages as you want, just add more pages with a “record” shortcode.

When organizing your form fields, you can put more than one group per page by specifying the set of groups for that page in the shortcode: groups="main,address". You can also simply list the fields to include on each page using the “fields” attribute in the shortcode.

The “action” attribute can take a relative or absolute path, page slug or post ID.

Allowing the User to Complete the Form in Multiple Sessions

Since each page of a multi-page form is submitted separately, the user can leave the form while it is in progress and return to complete it later.

It is very important the user understand they must submit the form on each page in order to keep what they have entered so far.

If the multi-page form is a signup form, and the plugin is configured to do this, the user willl recieve an email with their private link when they submit the initial page (which has the [pdb_signup] shortcode) and this gives them a way to return to the form to complete it.

The difficulty arises when you want to make it possible for the user to return to a specific page. When the signup reciept email is sent to the user, the page the private link goes to will be set in the plugin configuration (Participant Record Page) so it is possible to set that to the second page of the multi-page form. When the user uses the private link provided in the email, it will then take them to the second page of the form.

If the user completes one or more of the pages after the initial page, they may want to go to the next page they need to complete. It is possible to do this with custom code in a custom record shortcode template, but without custom code, they will need to submit each page again to get to the unfinished page.

Any page of a multi-page form can be reached by the user if the URL has the private ID in it.

A Few Things to Know about Multi-Page Forms in Participants Database

Duplicate Record Preference

All multi-page forms use the “Show Validation Error” preference, no matter what setting is selected for that preference. This is for security reasons and to prevent accidental duplicate submissions.

The security consideration is because if an “update” preference was allowed, it would be possible to expose another record if you knew which value to use. For instance, if the duplicate field was “email” and a malicious user wanted to see another user’s data, they could do so if they knew the person’s email.

The duplicate submission problem could happen if someone left the form and came back to it to complete it. A new record would be created for the second session, even though the user intended for the record created in the first form to be completed.

45 thoughts on “Creating Multiple-page Forms in Participants Database

  1. I am using your Plugin. However, instead of sending the Private Link through email. I have a set of editor role users, who manage the participant database. I require them to edit the participant records. But I cannot set it up as there is no option to fetch editable records other than through email. Please suggest

    1. Take a look at this article, explains how to set up a list with links to edit records:

      Adding an Edit Record Link to the Frontend List

  2. Roland, I’m new to your plugin and have a need similar to Hoi Ung from Aug, 2017. Before I fully dive into the plugin, which is activated and demonstrating it can handle most of my needs, I need to know if it can handle this requirement: A registered client fills my custom fields which follow the Research and Development Corporation (RAND) 36-item Short Form Health Survey (SF-36) for pre- and post-detox treatment for comparison scores. These two tests are performed approximately 60 days apart.
    I’d like for these to be in the same record with enumerated field names (i.e. Q23A and Q23B for Question 23 A=pre-treatment , B=post). Can this be done where the user is resent the link to their first responses and then can redo the RAND SF-36 for comparison? TIA

    1. If I am unserstanding your question, yes, it is possible…when the user uses the private link to get to the form, it will have all the previously entered data there.

      Now, if they are filling out the same form a second time and you want to do a comparison to what was entered previously, that will be more difficult, because the second submission will overwrite the first. Probably the easiest way to do that is to have a duplicate set of inputs that are used for the second set of data, then the two sets can be compared.

      1. Thank you. Yes, I’m on the path to make a multi-page, multi-group form for their inputs.
        I’m very happy with what I’m getting so far with your plug-in!
        What is frustrating me at this point is the user interface or form layout. Specifically, at this point, is trying to get the radio inputs to stack vertically due to the very long labels. This link is what I’m trying to mimic as best I possibly can: https://www.rand.org/health-care/surveys_tools/mos/36-item-short-form/survey-instrument.html
        Any CSS or HTML advice you can give me would be greatly appreciated!

        1. The are stacked vertically when I view the page.

        2. I have already set up the templates (with the Custom Templates Plugin), and have succeeded in improving the layout somewhat. For example, I now have the TH on its own row and the form is using 100% space available. But getting the TD to stack the radio buttons has eluded me!!

        3. Roland that link is to the page I am trying to mimic/reproduce. It is not my page.

        4. OK, well if you want to force the radio buttons to stack vertically, you need to apply the “display:block” rule to the “label” element that wraps each button/label pair. On the example site, they are using a “p” element for that purpose, which is a block-level element. Labels are not normally block-level elements, but you can make it behave like one.

        5. Roland, thank you for that response. I saw that example too, but I’m having difficulty with the table aspect of the output. The radio buttons are all inline until they max out the width to start a new line. Can you offer code, please?

        6. Try this:

          .radio-group label {
              display: block;
          }

          I’d suggest you use your Browser Developer Tools to inspect the element so you can understand how that works.

        7. Roland, thank you! That worked and I’m sure others will find value in this fix!

  3. hello Roland Barker
    Have created form for one table and it is successful but the problem is creating form for the other table have added the fields to the group but can’t find where i can point to the page i want to display the next form eg.
    Have marriage records which is very much okay i have another record which have added to group but now i cant figure out how i can reflect to page,

    1. I don’t understand your use of the word “table” in this context, so it’s hard for me to answer.

      The “next page” for the form is defined in the shortcode…this is explained in the article…you add the name of the next page to the shortcode in the “action” attribute. This is explained in the article under “Building Your Multi-Page Form”

  4. Hi Roland, let me thank you for the gr8 plugin. I am trying to implement multiple forms but the email link sent after sign up yields empty records either through the sign up page approach or going directly to the multiple form. With a single form its fine. My groups are Applicant Info (main) Personal, Education and Work Experience. This means the user is not able to complete or edit the form. I will be grateful for your assistance

    1. I’m missing some details here, but how this should be set up is the page they go to with their private link (known as the Participant Record Page in the settings) must have the [pdb_record] shortcode on it, so you are starting your multiple-page form with that shortcode.

      Another option to consider is the Field Group Tabs add-on, which will provide a tabbed interface for breaking the form up into groups instead of using a separate page for each one.

      1. Thanks a lot, i will try that. Yes i am considering that too and hopefully I can buy it together with Login plugin this week.

  5. May I know whether it is possible to move to another page using another link instead of just the “next” button? I’m pretty sure I somehow managed it but I don’t know what I did to cause it to not work again.

    For example, I put a link that links to [pdb_record groups="address"] on the first record landing page, shouldn’t the cookie remember the user’s ID?

    1. While it is possible to send the user to any page by setting the “action” attribute in the shortcode, it can have unexpected results as far as the form remembering the record ID for the user. The cookie is set when the user completes the first page of the form, and if the user goes to other pages on your site and returns to the second page of the form, it will remember the ID of the record they were on…however, it will be reset if they visit the first page because it is assumed it is a new user or they are starting over again.

      I hope this explanation is clear, best thing to do if you want to experiment with this kind of thing is to test it.

      1. That makes sense. Thank you!

  6. Is there a way for the ‘action’ part of the shortcode to link to a tab within the same page, rather than a new page?

    I tried the following: /add-to-wall-of-names/#tab-5af6c160d93de0abdcd

    But it just refreshes the page.

    1. No this is not possible because the action parameter just points to the page URL, it will not include the tab information.

  7. Hi Roland, thank you for a great plugin.

    I thought multi-page forms might work for me but I have a different requirement. I’m hoping to use a fiels of type: radio buttons to hide/show a table record in the form. For example a participant would select a county or nationality with radio button, and a certain input text field would be hidden or excluded from the signup form.

    Is this currently possible with some css and template scripts?

    Thanks,
    Robert

    1. This is certainly possible with a custom template that includes some Javascript for your show/hide logic. That is a pretty easy way to get it done, but you will need to figure out how to handle required fields in the hidden form elements. Best to do your validation on the client side for a setup like that.

      Using Participants Database Custom Templates

  8. Hi Roland,
    this is a great plugin.
    I’m trying to create a multi-participants page form registration or a multi-participants registration on multi-pages form.
    What is the best way to do this?

    Regards,
    Jacques

    1. It looks like you are on the right page for that. Did you try following the instructions found in the Creating Multiple-page Forms in Participants Database article?

      1. Thanks for your reply Roland

        I understand that the multiple-page forms concern the registration to fill one record (one participant). I am trying to create a form to register multiple participants (multiple records).

        Jacques

        1. Oh, I see. That is not possible in a single form. The only way to allow a user to create multiple records is to have them do it one at a time. They will have to submit the form for each record they will create.

  9. Dear Roland,

    Is there a way I can disable the submit button of my online signup form once I reached 20 inscribers? And can I show how many inscribers have already signed up to the form?

    nice greetings,
    Michael

    1. There are several ways to do this, I’ve got an example of a plugin that sets this up, or you can do it in a custom template if you prefer.

      The plugin example I’ve got doesn’t disable the submit button as you suggest, you’d have to use a custom template to do it that way, this one just shows a message instead of the signup form once the limit is reached.

      https://gist.github.com/xnau/230371e3d71d2506b1a84acec436de09

      1. Thank you for your plugin.

        I’ve uploaded the plugin in wordpress, probably
        for my signup form:
        [pdb_signup template="bootstrap" groups="common,naschools,naschools_mk"]
        I can’t find any information which shortcode I need to add

        and what kind of custom temp)late I need to use, do I need to program it myself in php, or can I add a short php code into your plugin to disable the submit button?

        1. You don’t need to use a custom template if you use the plugin I gave in the example, also you won’t need to change the shortcode. Just activate it, and it will work.

          You’ll need to make some modifications to it to conform to your needs, it’s only an example.

        2. I activated your plugin but in the signup form page I don’t see the plugin work, no limitation, no count
          and can I set up the shortcode the limitation depending on different signup forms, for ex. for students sign up it would be max. 25 and for the teachers signup form max. 10?

          And can you please help me how i could disable the submit button once the limitation is reached.
          thank you Roland

        3. Hi Michael,

          I’m sorry, there are a couple of spelling errors in the plugin code. Line 7 should be:

          add_filter( 'pdb-signup_shortcode_output', 'xnau_limit_signups' );

          Also line 17 should be:

          $signup_limit = 100;

          (I’ve updated it in the gist if you just want to re-install it.)

          The example I provided is just to show you how it can be done, you will need to have some coding skills to adapt it to your specific purpose. If you want it to count only certain kinds of records, you can use a “filter” in the [pdb_total] shortcode that is used to count the records.

          List Shortcode Filters

        4. thank you, it is working

          I have some programming skills but I still need some help:

          If I alter your plugin, how can your plugin detect which sign-up form is used so I can use the right filter to display the right count ?

          and if i would disable the submit button what is the right code line I need to add?

          Sorry for my many question, hope you can help me further.
          greetz
          Michael

        5. Hi Michael,

          What you want to do is not simple, the filter receives raw HTML, so in order to identify which form is in use, you’d need to find the information in that string. The form has a hidden field name “shortcode_page” that tells which page the form is on, so you can use that to determine which form it is. It’s kindof doing it the hard way, but passible.

          To disable the submit button, you could alter the HTML to set the submit button to “disabled” but again, tricky because you’ve got to find it in the HTML string.

  10. Is multi-form the same as one record multiple sub-record?

    I’m trying to create a system to report bad social behaviours. One record of a person may have multiple complaints, all recorded under their names.

    A user submits a report of bad behaviour, but someone else may have made a complain too about the same person who is frequently misbehaving.

    Person 1 reports, Genghis Khan for lewd behaviour.
    Person 2 tries to submit a report but finds that Genghis Khan has a record and would like to add a sub-record under his name.
    Person 3 also had problems with Genghis Khan and filed a report on him.

    Is it possible to match records and collate all these records under him?

    1. Yes, if each complaint is a separate record. Then you can list or search based on the person the complain is about.

      1. Cool! Let’s say I did implement it this way. Is there a way to display in list form in a column how many complaints a person the complaint about has?

        Then output a filter in list format in sequential order with people with highest complaints at the top of the list. Is this possible without much hacking?

        1. Yes it’s possible, but you will need to know a bit of HTML and PHP to set up a custom template.

          Using Participants Database Custom Templates

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

45 thoughts on “Creating Multiple-page Forms in Participants Database

  1. I am using your Plugin. However, instead of sending the Private Link through email. I have a set of editor role users, who manage the participant database. I require them to edit the participant records. But I cannot set it up as there is no option to fetch editable records other than through email. Please suggest

    1. Take a look at this article, explains how to set up a list with links to edit records:

      Adding an Edit Record Link to the Frontend List

  2. Roland, I’m new to your plugin and have a need similar to Hoi Ung from Aug, 2017. Before I fully dive into the plugin, which is activated and demonstrating it can handle most of my needs, I need to know if it can handle this requirement: A registered client fills my custom fields which follow the Research and Development Corporation (RAND) 36-item Short Form Health Survey (SF-36) for pre- and post-detox treatment for comparison scores. These two tests are performed approximately 60 days apart.
    I’d like for these to be in the same record with enumerated field names (i.e. Q23A and Q23B for Question 23 A=pre-treatment , B=post). Can this be done where the user is resent the link to their first responses and then can redo the RAND SF-36 for comparison? TIA

    1. If I am unserstanding your question, yes, it is possible…when the user uses the private link to get to the form, it will have all the previously entered data there.

      Now, if they are filling out the same form a second time and you want to do a comparison to what was entered previously, that will be more difficult, because the second submission will overwrite the first. Probably the easiest way to do that is to have a duplicate set of inputs that are used for the second set of data, then the two sets can be compared.

      1. Thank you. Yes, I’m on the path to make a multi-page, multi-group form for their inputs.
        I’m very happy with what I’m getting so far with your plug-in!
        What is frustrating me at this point is the user interface or form layout. Specifically, at this point, is trying to get the radio inputs to stack vertically due to the very long labels. This link is what I’m trying to mimic as best I possibly can: https://www.rand.org/health-care/surveys_tools/mos/36-item-short-form/survey-instrument.html
        Any CSS or HTML advice you can give me would be greatly appreciated!

        1. The are stacked vertically when I view the page.

        2. I have already set up the templates (with the Custom Templates Plugin), and have succeeded in improving the layout somewhat. For example, I now have the TH on its own row and the form is using 100% space available. But getting the TD to stack the radio buttons has eluded me!!

        3. Roland that link is to the page I am trying to mimic/reproduce. It is not my page.

        4. OK, well if you want to force the radio buttons to stack vertically, you need to apply the “display:block” rule to the “label” element that wraps each button/label pair. On the example site, they are using a “p” element for that purpose, which is a block-level element. Labels are not normally block-level elements, but you can make it behave like one.

        5. Roland, thank you for that response. I saw that example too, but I’m having difficulty with the table aspect of the output. The radio buttons are all inline until they max out the width to start a new line. Can you offer code, please?

        6. Try this:

          .radio-group label {
              display: block;
          }

          I’d suggest you use your Browser Developer Tools to inspect the element so you can understand how that works.

        7. Roland, thank you! That worked and I’m sure others will find value in this fix!

  3. hello Roland Barker
    Have created form for one table and it is successful but the problem is creating form for the other table have added the fields to the group but can’t find where i can point to the page i want to display the next form eg.
    Have marriage records which is very much okay i have another record which have added to group but now i cant figure out how i can reflect to page,

    1. I don’t understand your use of the word “table” in this context, so it’s hard for me to answer.

      The “next page” for the form is defined in the shortcode…this is explained in the article…you add the name of the next page to the shortcode in the “action” attribute. This is explained in the article under “Building Your Multi-Page Form”

  4. Hi Roland, let me thank you for the gr8 plugin. I am trying to implement multiple forms but the email link sent after sign up yields empty records either through the sign up page approach or going directly to the multiple form. With a single form its fine. My groups are Applicant Info (main) Personal, Education and Work Experience. This means the user is not able to complete or edit the form. I will be grateful for your assistance

    1. I’m missing some details here, but how this should be set up is the page they go to with their private link (known as the Participant Record Page in the settings) must have the [pdb_record] shortcode on it, so you are starting your multiple-page form with that shortcode.

      Another option to consider is the Field Group Tabs add-on, which will provide a tabbed interface for breaking the form up into groups instead of using a separate page for each one.

      1. Thanks a lot, i will try that. Yes i am considering that too and hopefully I can buy it together with Login plugin this week.

  5. May I know whether it is possible to move to another page using another link instead of just the “next” button? I’m pretty sure I somehow managed it but I don’t know what I did to cause it to not work again.

    For example, I put a link that links to [pdb_record groups="address"] on the first record landing page, shouldn’t the cookie remember the user’s ID?

    1. While it is possible to send the user to any page by setting the “action” attribute in the shortcode, it can have unexpected results as far as the form remembering the record ID for the user. The cookie is set when the user completes the first page of the form, and if the user goes to other pages on your site and returns to the second page of the form, it will remember the ID of the record they were on…however, it will be reset if they visit the first page because it is assumed it is a new user or they are starting over again.

      I hope this explanation is clear, best thing to do if you want to experiment with this kind of thing is to test it.

      1. That makes sense. Thank you!

  6. Is there a way for the ‘action’ part of the shortcode to link to a tab within the same page, rather than a new page?

    I tried the following: /add-to-wall-of-names/#tab-5af6c160d93de0abdcd

    But it just refreshes the page.

    1. No this is not possible because the action parameter just points to the page URL, it will not include the tab information.

  7. Hi Roland, thank you for a great plugin.

    I thought multi-page forms might work for me but I have a different requirement. I’m hoping to use a fiels of type: radio buttons to hide/show a table record in the form. For example a participant would select a county or nationality with radio button, and a certain input text field would be hidden or excluded from the signup form.

    Is this currently possible with some css and template scripts?

    Thanks,
    Robert

    1. This is certainly possible with a custom template that includes some Javascript for your show/hide logic. That is a pretty easy way to get it done, but you will need to figure out how to handle required fields in the hidden form elements. Best to do your validation on the client side for a setup like that.

      Using Participants Database Custom Templates

  8. Hi Roland,
    this is a great plugin.
    I’m trying to create a multi-participants page form registration or a multi-participants registration on multi-pages form.
    What is the best way to do this?

    Regards,
    Jacques

    1. It looks like you are on the right page for that. Did you try following the instructions found in the Creating Multiple-page Forms in Participants Database article?

      1. Thanks for your reply Roland

        I understand that the multiple-page forms concern the registration to fill one record (one participant). I am trying to create a form to register multiple participants (multiple records).

        Jacques

        1. Oh, I see. That is not possible in a single form. The only way to allow a user to create multiple records is to have them do it one at a time. They will have to submit the form for each record they will create.

  9. Dear Roland,

    Is there a way I can disable the submit button of my online signup form once I reached 20 inscribers? And can I show how many inscribers have already signed up to the form?

    nice greetings,
    Michael

    1. There are several ways to do this, I’ve got an example of a plugin that sets this up, or you can do it in a custom template if you prefer.

      The plugin example I’ve got doesn’t disable the submit button as you suggest, you’d have to use a custom template to do it that way, this one just shows a message instead of the signup form once the limit is reached.

      https://gist.github.com/xnau/230371e3d71d2506b1a84acec436de09

      1. Thank you for your plugin.

        I’ve uploaded the plugin in wordpress, probably
        for my signup form:
        [pdb_signup template="bootstrap" groups="common,naschools,naschools_mk"]
        I can’t find any information which shortcode I need to add

        and what kind of custom temp)late I need to use, do I need to program it myself in php, or can I add a short php code into your plugin to disable the submit button?

        1. You don’t need to use a custom template if you use the plugin I gave in the example, also you won’t need to change the shortcode. Just activate it, and it will work.

          You’ll need to make some modifications to it to conform to your needs, it’s only an example.

        2. I activated your plugin but in the signup form page I don’t see the plugin work, no limitation, no count
          and can I set up the shortcode the limitation depending on different signup forms, for ex. for students sign up it would be max. 25 and for the teachers signup form max. 10?

          And can you please help me how i could disable the submit button once the limitation is reached.
          thank you Roland

        3. Hi Michael,

          I’m sorry, there are a couple of spelling errors in the plugin code. Line 7 should be:

          add_filter( 'pdb-signup_shortcode_output', 'xnau_limit_signups' );

          Also line 17 should be:

          $signup_limit = 100;

          (I’ve updated it in the gist if you just want to re-install it.)

          The example I provided is just to show you how it can be done, you will need to have some coding skills to adapt it to your specific purpose. If you want it to count only certain kinds of records, you can use a “filter” in the [pdb_total] shortcode that is used to count the records.

          List Shortcode Filters

        4. thank you, it is working

          I have some programming skills but I still need some help:

          If I alter your plugin, how can your plugin detect which sign-up form is used so I can use the right filter to display the right count ?

          and if i would disable the submit button what is the right code line I need to add?

          Sorry for my many question, hope you can help me further.
          greetz
          Michael

        5. Hi Michael,

          What you want to do is not simple, the filter receives raw HTML, so in order to identify which form is in use, you’d need to find the information in that string. The form has a hidden field name “shortcode_page” that tells which page the form is on, so you can use that to determine which form it is. It’s kindof doing it the hard way, but passible.

          To disable the submit button, you could alter the HTML to set the submit button to “disabled” but again, tricky because you’ve got to find it in the HTML string.

  10. Is multi-form the same as one record multiple sub-record?

    I’m trying to create a system to report bad social behaviours. One record of a person may have multiple complaints, all recorded under their names.

    A user submits a report of bad behaviour, but someone else may have made a complain too about the same person who is frequently misbehaving.

    Person 1 reports, Genghis Khan for lewd behaviour.
    Person 2 tries to submit a report but finds that Genghis Khan has a record and would like to add a sub-record under his name.
    Person 3 also had problems with Genghis Khan and filed a report on him.

    Is it possible to match records and collate all these records under him?

    1. Yes, if each complaint is a separate record. Then you can list or search based on the person the complain is about.

      1. Cool! Let’s say I did implement it this way. Is there a way to display in list form in a column how many complaints a person the complaint about has?

        Then output a filter in list format in sequential order with people with highest complaints at the top of the list. Is this possible without much hacking?

        1. Yes it’s possible, but you will need to know a bit of HTML and PHP to set up a custom template.

          Using Participants Database Custom Templates

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.