The Field Group Tabs add-on adds tabs to the single record display, record and signup forms when you add the
This feature as added to Field Groups Tabs as of version 1.6, so make sure you are using the latest version of Field Group Tabs.
If you are not familiar with the use of custom template in Participants Database, read this article before proceeding: Using Custom Templates in Participants Database
Altering Your Custom Template to Show the Tabs
For this tutorial, we will be using a template for the record edit shortcode, but the procedure is the same for the signup form template. It’s also the same for the single record template, although there is no submit button, so you can skip that part for the single record template.
At the Top of the Template
The tabs add-on uses this code to add the tab control and everything needed to make the tabs work:
The Submit Button
To place the next/submit button, you must replace the default submit button with a function that shows either the next or submit button, depending on the plugin settings and which tab is active. This is the code that prints out the next/submit button:
The tricky thing is, this button has to go inside the group <fieldset> so that each tab has it’s own button. We also have to remove the original <fieldset> for the submit button, since we won’t need it anymore.
This is a section of the default bootstrap record template where the submit button is shown:
We want to eliminate the whole final <fieldset> and place our button inside the group fieldset, like this:
I hope that is clear, it’s a little complicated, I know.
Now, Using the Custom Template
Now, we have our custom template, you’ll need to upload it to the templates folder in your theme directory (or wherever you have your plugin templates). In the shortcode, make sure you have the
tabs=true attribute as well as the
template=custom attribute to select your template. The “custom” in that attribute is the name of your template, make sure it matches the name you used when you saved your template. This is all explained in the Using Custom Templates article. For example: