Fabrik and Custom Joomla User Registration Forms

Fabrik and Custom Joomla User Registration Forms

Fabrik is a wonderfully powerful and flexible Joomla extension. In a previous tutorial, we showed you how to use Fabrik to create a contact form.

In this post, you are going to use Fabrik to create your own Joomla user registration form.

You will build it gradually. Firstly, you will build and test a basic bear-bone Joomla registration form with the Name, Username, Email and Password fields. Just to get a feel for how your Fabrik form integrates with Joomla registrations.

You will test how upon the registration form submission Joomla creates a registered user account. You will also test how it sends emails registration notification to the registered user.

Then, you will develop this form. You will add a password confirmation field and secure your form with Google's ReCaptcha.

Finally, you will learn how to set up validation for your form fields. To make sure that visitors enter valid information into them.

Step #1. Install Fabrik and Required Plugins

fabrik juser plugin

  • Install both the component and the plugin with Joomla extensions installer.
  • Go to Extensions > Plugins and enable the Fabrik Form - Create Joomla User plugin.

Enable Fabrik Form - Create Joomla User plugin

You are all set to start building your own Joomla user registration form with Fabrik.

Step #2. Create a Basic Joomla Registration Form

  • In the Fabrik control panel go to Forms > New.

Forms > New

  • You will see the Fabrik: new form page.Type Registration into the Label field.
  • Click Save.

Fabrik new form label

  • You will see the Fabrik: select content type. Just click Save & Close.

Save with default content type

Excellent! You now have a Fabrik form. Let's add the Name, Username, Email and Password fields to it.

Once you clicked the Save & Close button in your last step, you should have arrived at the Fabrik: forms administrative page with your Registration form listed.

  • In the Element column, click either Add or the + icon.

Add element

Elements are just how Fabrik calls form fields. You can create some form elements/fields in Fabrik out of the box. To create others, you will need to install a Fabrik plugin.

Once you clicked the Add link or the + icon, you will see the Fabrik: new element administrative page.

  1. Type in Name into the Label field.
  2. Select Registration from the Group field.
  3. Click Save & New.

Enter name and select group

  • Create the field with the label Username the same way. Click Save & New.
  1. For the next field, type in Email into the Label field and click the Advanced tab.
  2. Locate the Input Type setting and select the Email option.
  • Click Save & New.

Input type - Email

  • Create your last field, Password, the same way. Just make sure you selected Password for the Input Type setting.

Password input type

  • Click Save & Close.

You will see all four of your new registration fields listed by the Fabrik: elements page

09 four new fields listed

Excellent! You just created your own minimalistic Joomla user registration fields. The thing is your Joomla doesn't know anything about them. Let's take care of this issue.

Step #3. Connect Your Fabrik Registration Fields with the Corresponding Joomla Core Registration Fields

  • Open your Registration form.
  1. Click the Plug-ins tab.
  2. Click Add.

Click Plugins tab and click Add

  • For the -- do -- setting, select juser

Select juser

  • For the In setting, select Front end.

Select Front end

  • For the On setting, select New.

Select New

  • Scroll slightly down to the Binds data to a Joomla user account section. You will now connect your Fabrik registration fields with their Joomla counterparts.
  • Locate the Name field. From the drop-down list of options select the Name.

Select the Name

  • From the Username field select Username.
  • From the Email field select Email.
  • From the Password field select Password.
  • You should end up with your fields matching each other.

Four fields connected

  • Go to on the Options tab.
  • Find the Selected User Group parameter and set it to Registered. This configuration will ensure your registered users are able to log in and edit their profiles.

Set default user group to Registered

  • Click Save & Close

Good job! You are now ready to take your new form for a test drive.

Step #4. Test Your Newly Created Joomla User Registration Form

  • In your preferred menu, create a menu item by the Fabrik > Form type. Make sure you have your Registration form displayed by the Fabrik Form field.

Fabrik form menu item

  • Visit your site front end. Click on the Registration menu item to open the Registration form page.

Registration form front end

  • Fill in the form fields with dummy values for the Name and Username fields. If you created this form on a site, installed on a local server, enter a dummy email address into the Email field. 

Dummy values

  • If you installed your site on a remote hosting, then fill it the Email field with your own valid email address.
  • Click Save.

You will see the "Record Added/Updated" message:

Record Added/Updated

  • In your Joomla control panel, go to Users > Manage. You will see your new registered dummy user listed.

New registered user record created

If your site runs on a remote server and you entered a valid email address into the Email field, you will also receive a standard Joomla account creation email notification. With the "Account Creation for <username> at <site name>" as the subject.

That's it for this step. Next, you will learn how to add a password confirmation field with password strength meter to this form. This will harden your Fabrik form security.

Step #5. How to Add a Password Confirmation Field

You can not create a password confirmation field for your Fabrik Joomla registration form out of the box. By default, Fabrik doesn't have the field's plugin installed:

Available element plugins

Password element plugin download page

  • Go to Joomla Plugin Manager and enable this newly installed plugin.

Enable Fabrik element password plugin

  • In Fabrik control panel click Elements on the left-hand-side navbar.
  • Delete the Password field you created in Step #2.
  • Click Forms on the left-hand-side navbar.
  • Click Add in the Element column next to your Registration form title.
  • Type in Password into the Label field.
  • Select Password from the Plug-in field.
  • Click Save & Close.

Add password element

  • Go to your site front end and test the newly created password fields. Enter different passwords into each of the two password fields. You will see the error message:

Passwords don't match

Wonderful! By now you learned:

  • How to create a basic Joomla user registration form with Fabrik component
  • How to add a new field, password with the Fabrik Password Element Plugin to your user registration form.

In the next step, you will learn how to protect your form from spammers. 

Step #6. How to Add Google ReCaptcha to Your Form

  • Go to Fabrik site. Download, install and enable the Captcha Element Plugin.
  • Go to Fabrik control panel.
  • Click Forms on the left-hand-side navbar.
  • Click Add under the Element column.
  1. Type in Are You a Robot? into the Label field.
  2. Select captcha for the Plug-in setting.
  3. Select Nocaptcha under the Options tab.
  4. Click on the Re/NoCaptcha options tab.

Are you a robot?

  • Next, you need to copy your Google ReCaptcha Site Key and Secret Key into the Public / Site Key and Private Key fields respectively. 

Site key and Private key

If you are not familiar with how to get Google ReCaptcha Site Key and Secret Key, please visit our detailed tutorial "Add the New Google ReCaptcha to Joomla Contact Forms".

  • Click Save & Close.
  • Go back to your site front end and check your form. You should see the Google's "I'm not a robot" ReCaptcha placed underneath:

Spam protected form

Good job! Your Joomla user registration form is shaping up nicely. By now you learned how to create it from a clean slate and how to enhance it with the fields of your choice.

You added two fields to four existing ones. There are much more fields available for you to play with at Fabrik Elements Download section. Go ahead. Study their documentation. Download them and play with them.

Step #7. How to Configure the Form Buttons

So far, you had only the Save button available with your form. You can modify its text from Save to something else. Maybe to Submit. Maybe to Register. You also have a choice to include some other buttons.

Let's change the Save to Register Now. Also, let's add the Reset button as well.

  • In Fabrik control panel, go to Forms.
  • Open up your Registration form for editing.
  • You will see the Fabrik: edit form "Registration" administrative page. Click on the Buttons tab:

Fabrik edit form "Registration" administrative page

  1. Scroll down to the Save section. Type in Register Now instead of the current Save in the Submit button label field.
  2. Find the Reset group of settings and click Show.
  • Click Save & Close

Setting Register Now and Reset buttons

  • Go back to your site and check the new buttons.

New buttons

There you have it. You now know how to create a Joomla user registration form with fields of your choice using Fabrik component.

Additional Reading

What's Next?

Fabrik is an extremely flexible Joomla! component for building custom forms and web applications. Sign up for the easy to follow "How to Use the Fabrik Extension in Joomla" video class and learn how to create beautiful forms to allow your users to enter data, then display the data in lists, map, calendars, timelines, charts and more!