You are on page 1of 25

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


 Go to https://fabrikar.com/downloads and download the Fabrik component.
 Go to https://fabrikar.com/downloads/details/36/2882-form-juser-plug-in and download the Form -juser  Fabrik plugin.

pg. 1
 Install both the component and the plugin with Joomla extensions installer.
 Go to Extensions > Plugins and enable the 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.

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

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

pg. 3
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.

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.

pg. 4
 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.

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

pg. 6
 Click Save & Close.

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

pg. 7
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.

pg. 8
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.

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

 For the In setting, select Front end.

pg. 9
 For the On setting, 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.

pg. 10
 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.

 Go to on the Options tab.

pg. 11
 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.

 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.

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

 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. 

pg. 13
 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:

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

pg. 14
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:

pg. 15
pg. 16
 To install it, go to Fabrik Password Element Plugin Download page. Download the plugin and install it with Joomla extensions
installer. 

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

pg. 17
 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.

 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:

pg. 18
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.

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

pg. 20
pg. 21
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:

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.

pg. 22
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:

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

pg. 23
 Go back to your site and check the new buttons.

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

pg. 25

You might also like