Add Repeater Fields to User Registration and Edit Profile Forms with Profile Builder

One of the heavily requested features by Profile Builder users was the ability to add multiple fields or groups of fields dynamically to front-end forms, without having a predefined number.

The user should be able to repeat a certain field or set of fields, when registering or editing his profile in the front-end. Most of the requests were regarding the upload of multiple files or PDF documents, or multiple images for creating user galleries.

That’s how the Repeater Fields Module was born. It makes adding Repeater Fields to User Registration and Edit Profile Forms fast and easy.

How to use Repeater Fields

Repeater Field can be used when you need your users to insert similar information from your users, such as: add multiple phone numbers, upload multiple pdf, images or another type of files.

To activate the Repeater Fields in your back-end, you have to go to Modules tab, inside Profile Builder and there select “Active”.

Under the Manage Fields tab, you have a field type called “Repeater” that will give you full control over the repeater fields that appear on the front-end register and edit profile forms.

Once you have selected the Repeater field you will need to set out several Field properties, such as Field Title, Limit, then simply click “Edit field group” button and select which fields should be repeated.

The number of fields generated by users in the front-end forms can be also limited from the back-end by adding a general limit or one per User Role.

In the example bellow, for the upload of user pictures, we chose a General Limit of three and with a default pop-up message “To add up to 7 pictures, join us to become a contributor!”. Also, we added another two limitations, up to 7 user pictures for Contributors and unlimited for Editors.

To manage your Repeater Fields you have to click the Edit field group. From there a secondary interface will open and you will manage the fields or group of fields that you want to duplicate.

For this example, I have added a Heading field with the title “Upload Picture” and an Upload field with the title “Select picture”.

How Repeater Fields look like

In the front-end of your Registration Form or Edit Profile Form, you will have your Repeater Fields displayed. Here we have the three entries, where users can upload several pictures.

We also set a general limitation of three pictures for uploading, with a custom message when the limit has been reached.

Displaying the Repeater field in User Listing

Now that we have a Repeater field and we uploaded a few pictures, let’s see how we can display them using Profile Builder’s User Listing module.

If you don’t already have a user listing, simply create a new page where you place this shortcode: [wppb-list-users name="userlisting"].
Make sure that the User Listing module is active in the Profile Builder -> Modules tab.

From the Profile Builder -> User Listing tab, edit your listing entry. We’re going to modify the Single-Userlisting Template, to include the repeated upload field.
The variable names for our repeater field example are:

{{#meta_upload-pictures}}
   {{meta_select_pic}}
{{/meta_upload-pictures}}

Using the following syntax, we have added the user’s avatar, first name, and uploaded pictures. Make sure you get the correct variable names from the Available Variables tab.

<p style="text-align:center;">{{{avatar_or_gravatar}}}</p>
<p><strong>User:</strong> {{meta_first_name}} </p>
<p><strong>Uploaded pictures:</strong>
  {{#meta_upload-pictures}}
    <div style="clear:both; padding-bottom: 20px; overflow: hidden;">
       <img src="{{meta_select_pic}}" style="max-width: 300px; display:block; margin-right:auto; margin-left: auto;"/>
    </div>
  {{/meta_upload-pictures}}
</p>

Then, update the User Listing.

This is the final result when viewing John Doe’s user list profile. As you can see, John Doe is just a subscriber, so he gets to upload only 3 cat pictures.

Conclusions

This repeater fields module represents an effective way to easily duplicate a field in the front-end registration and edit profile forms.

The main advantage of this module is that new and existing users can easily add several pieces of information of the same type without a predefined number, things like uploading various documents or images, all without leaving the front-end page.

How are you using Repeater Fields in your front-end forms? Let us know in the comments section below.

The post Add Repeater Fields to User Registration and Edit Profile Forms with Profile Builder appeared first on Cozmoslabs.