Select2

Profile Builder Pro - Select2 - Thumbnail

 

Select2 field enables you to add an improved select box, with search and filter capabilities.

Select2 field is only available in the Hobbyist, Pro and Unlimited versions of Profile Builder.

Add the Select2 Field

You will find the 2 field typesadded to the Fields List in the Manage Fields tab: Select2 and Select2 (Multiple).

Profile Builder Pro - Select2 - Manage Fields

Setting up a Select2 Field

There aren’t any special steps compared to a regular Select field. According to your needs, you can choose a field title, a description, the options and labels you want your user to select, a default selection, if the field is required or not and even a conditional logic rule.

Profile Builder Pro - Select2 - Add Field

Setting up a Select2 (Multiple) Field

Adding a Select2 (Multiple) field you’ll notice that you can now add multiple default options and also you have new settings: Maximum Selections and User Inputted Options.

Profile Builder Pro - Select2 - Add Select2 (Multiple) Field

Note – When WooCommerce plugin is activated user inputted options are not visible in the WordPress Default Edit Profile page. On Profile Builder forms user inputted options work as expected.

Front End – User Side

You can see the fields we just created in action on this Registration form.

Profile Builder Pro - Select2 - Registration Form

When users start typing in the Select box, the list is filtered automatically.

Select2

Profile Builder Pro - Select2 - Registration Form Select2

Select2 (Multiple)

Profile Builder Pro - Select2 - Registration Form Select2 (Multiple)

Now let’s add a new option in the “Topics of interest” field. You will see the warning message when you will try to enter a fourth option.

Profile Builder Pro - Select2 - Registration Form Select2 (Multiple) Restriction

How to

Advanced customization using filters

If you have a large set of data or you want to load it from a local or a external database you can use the filters for Single Select:

  • wppb_select2_options
  • wppb_select2_labels

And for Multiple Select:

  • wppb_select2_multiple_options
  • wppb_select2_multiple_labels

Here is an example:

1
2
3
4
5
6
/* Load select data using custom code */
add_filter('wppb_select2_options', 'wppbc_data_for_select2', 10, 6);
function wppbc_data_for_select2( $select2_data, $form_location, $field, $user_id, $field_check_errors, $request_data ) {
    $select2_data="Red, Green, Blue, Yellow"; // add your own data as comma separated values
    return $select2_data;
}

Select2 add-on is implemented using an open-source library. So far Profile Builder’s user interface lets you use some of its features but you can implement more features such as a template. The PHP code you need to create, for further customization, should be hooked to one of the available filters:

  • wppb_select2_arguments
  • wppb_select2_multiple_arguments

Here is a link to some examples of what can be done using Select2 library.