One of the many CB Conditional features is the ability to transform your CB registration form into a tabbed step based process.

When your use case registration form calls for the completion of many fields, then grouping and presenting these fields in a tabbed format is very appropriate.

In this tutorial we will be presenting how to use Community Builder and the CB Conditional plugin (Professional/Developer membership needed to download) to make a 3 step tabbed registration form.

First of all you need to make sure that your CB Configuration -> User Profile : Use new div or old table based views parameter is set to 'Use divs (tableless output)' as this is outlined in figure 1. This is needed to enable the css functionality used by the CB Conditional plugin.

 Figure 1: CB Configuration -> User Profile: Use divs parameter setting

Initially your CB Registration page on a clean CB 1.9 installation without any extra fields and with the CB Configuration -> General : Name Style parameter configured for 'First and Last Name Field' will look like the figure 2 screenshot.

Figure 2: CB Registration form without CB Conditional steps enabled

If you install and publish the CB Conditional plugin (using the CB Plugin manager) and configure the set the CB Conditional Configuration -> Registration : Step by Step parameter to 'Enable' you will see that the CB registration form now is formated as a single tab 'Step 1' form as shown in the figure 3 screenshot.

Figure 3: CB Registration form with CB Conditional plugin enabled and set to Step by Step mode

Every CB Tab that has registation fields in it will appear as a separate step in the tabbed registration form.

In figure 4 we have created a new CB Tab that has a single CB birthdate field in it and is presented as a separate Step 2 tab that we have optionally renamed via the language string method to 'Additional info'.

Figure 4: CB Registration form with 2 step tabs

The 'Step 1', 'Step 2', etc. tab names can be optionally renamed by adding new language strings to your cbteamplugins_language.php file in the form of:

CBTxt::addStrings( array(
// language strings for step registration tabs
'Step 1'    =>    'User info',
'Step 2'    =>    'Additional info',
'Step N'    =>    '...'
));

Note that you should not modify the default_language cbteamplugins_language.php file as you will risk losing your changes when you upgrade CB in the future. Instead you need to download and install the CB language plugin for your language (e.g., the English CB language plugin) and make your language string changes there.