The Field Group Tabs add-on adds tabs to the single record display, record and signup forms when you add the tabs=true attribute to the shortcode. What that does is select a default tabbed template for the form, and loads the necessary javascript and CSS to show the tabs. To use a custom template with the Field Group Tabs add-on, you need to alter your custom template so that it loads the resources needed and adds the HTML to the template.
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.
The tabs add-on works by making two additions to the template. At the top, it adds some javascript, some CSS, and the tabs control html to the template. This is all added with a single function call. The other addition is the “next/submit” button near the bottom of the 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:
<?php pdb_field_group_tabs( $this ) ?>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:
[pdb_record template=custom]
Julius Lansang 
Roland Barker 
Tamsin Carter 
Scott Wellington 
Ryan Carmichael 
clayton
How do you customized the look and feel of the data entry. You know adding more spaces, making the data entry a little bit bigger, formatting the placement of fields in a two column format, and others.
Hi Julius,
I’m sorry, the plugin doesn’t have that kind of thing built into it, you will need to use your own CSS rules to make the appearance changes you want. I can’t tell you exactly what CSS rules to use, but I will say that it’s a good idea to use a CSS rule that adds some padding to the input elements. If you’re unsure how to start with that, take a look at this article:
CSS Techniques for WordPress
I had quite a few problems trying to adjust the defualt and bootstrap template copies to include tabs.
In the end, as I had not done anything to my templates yet I just restarted using the templates provided in the tabs plugin as my basis.
I made a copy of pdb-signup-tabs.php and pdb-record-tabs.php and renamed them in my custom templates folder.
This seems to have worked really nicely. Please let me know if you foresee any problem doing it this way.
Thank you
Tamsin
What you did is the correct approach, so I expect it to work without problems. If you were already using a custom template, you would usually start with that in order to add tabs to the template, but you can also do it backwards: start with the built-in tabs templates, then add your other modifications.
Hello,
I purchased the tabs add-on and by the looks I require coding experience possibly to use it. Are you able to simply add a shortcode to the page to activate the tabs?
This is explained in the plugin instructions: to enable the tabs in the pdb_single, pdb_record and pdb_signup shortcodes, you need to add “tabs=true” to the shortcode. No coding or custom template needed. For example:
[pdb_single tabs=true]More details in the link above.
This article refers to the case where you’re already using a custom template and you want to enable tabs in that template.
Roland, you supplied the code for the bootstrap theme in your example but what if we just use default? It seems the bootstrap classes are coded in there regardless as “btn btn-default” and i’m not using bootstrap so these do nothing for my theme. How do I go about changing the classes with my own template without having to modify the plugin directly? Thanks.
Classnames that are not used by the theme are usually not a problem, but if you need to change classnames you can usually do that in the custom template.
If the classnames are producing unwanted effects, it’s often much easier to add some CSS that acts on those classnames to get the desired display.
Also, the example here can be applied to any template once you understand how it’s done, I just used bootstrap because is is a common choice for people.
Hi Roland,
Do you have a support email address we can communicate through. I have followed all the steps, but I am not getting the results I am looking for.
I would like to supply you with a the code from the template I used along with the the shortcode and WP login details to see whether you can solve the issue.
Thank you
You can send it, but it is up to you to develop your own code, I can’t do that for you. Did you follow my instructions in the support post from 9/22?
You can send the template file to support@xnau.com, I can take a look at it and help you with that. I won’t log in to your site, so no need to set up a login for me.
Hi there,
Where do I find the template you are referring to. I want to apply the customization to the sign up form.
Please advise which template you are referring to.
Thank you
Hi Clayton,
Yeah, I’m sorry, I didn’t make that clear. I’ve updated the article, but the basic technique of using custom templates is explained on this page: Using Custom Templates in Participants Database
Hi Roland,
Thanks for the quick response. I followed the link to set up the template as instructed and then added the code as the above article. Now I have lost the tabs altogether.
Previously, I saw the tab-titles as bullets, but now they have been taken out, showing one long form.
My steps:
1. I am doing this for the sign up form. I could not find that plugin template, so I used “add_participant.”
2. I saved in the correct theme and renamed according to the shortcode “pdb_signup-custom.php”
3. The I added the 3 sections of code below each other.
4. Changed my shortcode to [pdb_signup template=custom tabs=true]
Perhaps I am doing something small incorrectly. Appreciate your help.
Thank you
The template you want to use is in the plugin, in the folder named “templates” You can use either pdb-signup-default.php or pdb-signup-bootstrap.php
After you create your custom template with the tabs, you only need to name the template in the shortcode, you don’t need the “tabs=true” any more.
You can’t use the add_participant.php script, it’s not a template.