course header 2000x350

In this article, we will create a Custom Log In page. First, we will create an email based self registration process. We will then review how to replace the email confirmation step with a more reliable confirmation process. Third, we will use the Fordson theme to add some custom elements to our custom log in page.

Moodle Default Login Page
The default Moodle Log in page is pretty basic:

01

What is surprising about this form is that there is no link to an account self registration page for those who do not already have an account to your Moodle website. This is because, by default, Moodle only allows what it calls Manual Authentication - which means that you as the Administrator or your staff have to manually add each user.

Turn on Self Registration
It is important to understand that in Moodle Account Creation and Course Enrollment are two different things. If you want your learners to create accounts on your site and have access to your courses, then you first need to enable Email based self registration so they can create an account. You then need to enable self enrollment within your course(s) so students can self enroll to your courses. We will review Moodle enrollment processes in a later article. Here we will focus solely on the student self registration process. The email-based self-registration authentication method enables users to create their own accounts via the 'Create new account' button on the login page. They then receive an email at the address they specified in their account profile to confirm their account. By default, Moodle email-based self-registration is turned off. To allow your users to sign up to your site via email, you need to enable the option.

Log in to your Moodle site as an admin user. Then click Site Administration, Plugins, Authentication, Manage Authentication. The table at the top of the page shows Email based Self Registration is enabled if there is an Eye in the row. But scroll down the page to Common Settings and you will see that Self Registration is actually disabled. Change this to Email based self registration. Also check Allow log in via email. Scroll down the page to note the ReCAPTCHA site key box. We will add ReCAPTCHA to our registration form later. Click Save Change. Then click on the Log In page again:

02

Click on Create a New Account.

03

Students need to create a username, secure password and add their email address. Then click Create my new account. Here is a link to the New Account Registration page:

https://collegeintheclouds.com/login/signup.php?

Then create a new test user with a real email address.

04

Go Site Administration, Users, List of users to see the new user:

05

Click Confirm to manually confirm the new user.

Next try a real email address.

06

Then log into your Protonmail account to view the confirmation email.

07

After confirming, this screen appears:

08

Click Continue. This now logs us into the back end of Moodle but as a student rather than an administrator. Scroll down to the course and click on it. The screen explains that the student can not enroll themselves into the course. Log out of this user account.

Drawbacks of the Email Self Registration Process
There are several drawbacks to the Email Self Registration process. The most obvious is that some older or younger students may not have an email address to register with. You can solve this problem by having them register with a fake email address. The most common is This email address is being protected from spambots. You need JavaScript enabled to view it.. You can then manually confirm their registrations in your Moodle Users list.

Even if your users all have email addresses, the confirmation email may not actually be transmitted due to being blacklisted somewhere along the path. Even if not blacklisted, the confirmation email may often wind up in a users spam folder. It is also common for users to type in an incorrect email address.

In such cases, many teachers do not want to use the manual authentication process. But using the No Authentication option is also bad as it results in a bunch of spam users that then need to be deleted. Thankfully, there is an unofficial plugin, called Online Confirm that addresses this problem. Instead of requiring email confirmation after registration, the plugin sends the user to a new page where they can enter a code or take other actions to confirm their registration. We will install and set up this plugin next.

Download and Install the Online Confirm Plugin
Go to the following web page to download the plugin:

https://github.com/charbusch/moodle-auth_onlineconfirm

Click on the green Code button. Then click Download Zip. Then move the plugin to your Moodle Plugins folder on your Home computer.

To install the plugin, go to Site Administration, Plugins, Install Plugins. Then drag the plugin zip file from your File Manager into the box. Then click Install plugin from the Zip file. The installer will validate the plugin with OK. Click Continue. This brings up the Moodle Server Check screen. Scroll to the bottom and click Continue. This brings up the Plugins Check screen. Click Upgrade Moodle Database now. It should reply with Success. Click Continue. This brings up the Online Confirm New Settings screen.

Add your email address to be sent a Notification email whenever a new user registers. For now, leave Enable reCAPTCHA set for No and everything else at the default settings. Then click Save Changes. This brings up the Moodle Notification screen. Click Check for available updates. This will update the database. It should reply with Your Moodle Code is up to date.

Configure the Online Confirmation Plugin
Go to Site Administration, Plugins, Authentication, Manage Authentication. This brings up a list of available authentication plugins. Scroll down to Online Confirm and enable it by clicking on the eye to the right of the plugin. Then click on the Up Arrow to make it higher on the list than Email based self registration.

09

Then scroll down to Common settings and change it to Online Confirm. Then scroll to the bottom of the screen and click Save Changes.

Then go to your website Home page and create a new test account with a fake email address such as This email address is being protected from spambots. You need JavaScript enabled to view it.. This immediately logged the new user into their student page without any confirmation code. This is probably not what you want. To add a confirmation code to the process, we need to install a second plugin.

Install the Signup Code Plugin
Go to the following web page to download the plugin:

https://github.com/charbusch/moodle-local_signupcode

Click on the green Code button. Then click Download Zip. Then move the plugin to your Moodle Plugins folder on your Home computer.

To install the plugin, go to Site Administration, Plugins, Install Plugins. Then drag the plugin zip file from your File Manager into the box. Then click Install plugin from the Zip file. The installer will validate the plugin with OK. Click Continue. This brings up the Moodle Server Check screen. Scroll to the bottom and click Continue. This brings up the Plugins Check screen. Click Upgrade Moodle Database now. It should reply with Success. Click Continue. This brings up the Signup Code New Settings screen. For Pre Signup Code, enter a short phrase such as Learn now. For Pre Signup Info, enter some instructions such as:

Welcome to College in the Clouds! To register, type the words Learn Now into the Signup code verification box. This will bring up a Registration form where you need to enter a username and password and email address. Please use a simple username and password that you can remember. You will also need to enter an email address. You can use either your real email address or a fake email address such as This email address is being protected from spambots. You need JavaScript enabled to view it.. You also need to enter your first name and last name to use in our course sessions. Entering a City and Country are optional.

For Pre Signup Error, enter some instructions such as:

If you have trouble signing up, please email us and we will help you get signed up. Our email address is This email address is being protected from spambots. You need JavaScript enabled to view it.

Then click Save Changes. This brings up the Moodle Notifications screen. Click Check for available updates. It should end with your Moodle Code is up to date. Then create another new Test account. Click Create a New Account to bring up this screen:

10

Enter Learn now. Then click Proceed. Fill in the boxes and register. You will then be taken to the logged in page for this new user. Log out and log in again to confirm it works. Also check your Protonmail email address to confirm that you received a Notification email. If you do not get notification, there is another Moodle Local Plugin that may serve the same purpose.

Download and Install the Local Welcome Plugin
The local welcome plugin can be downloaded from this link:

https://moodle.org/plugins/local_welcome/versions

Then transfer the plugin to your Home computer Moodle Plugins folder. To install the plugin, go to Site Administration, Plugins, Install Plugins. Then drag the plugin zip file from your File Manager into the box. Then click Install plugin from the Zip file. The installer will validate the plugin with OK. Click Continue. This brings up the Moodle Server Check screen. Scroll to the bottom and click Continue. This brings up the Plugins Check screen. Click Upgrade Moodle Database now. It should reply with Success. Click Continue. This brings up the Moodle Welcome New Settings screen. Uncheck Enable user messages. Then check the online confirm Auth plugin. Leave Enable moderator messages set to Yes. Add the name of your Moodle site to the Moderator subject box. Then click Save Changes. Then in Moodle Notifications, click Check for available updates. Then create another test user and see if you get an email notification. Now that we have a more reliable user registration system, its time to use Fordson to customize our Log in page.

Use Fordson to Customize your Log in page
Fordson allows you to create a custom login page. Here is an example of a custom log in page:

11

The above custom log in page has a login page background image and four feature boxes. To create your own custom log in page, go to Site Administration, Appearance, Themes, Fordson and click Custom image settings. Scroll down to Default Login image. Add a background image that has a blank area on the left side to display the log in form. Then click Save Changes.

Then click Fordson Custom Log in page. Then check Turn on Custom Log in. Then scroll down to Icon One and fill in the Icon, Title and Text. Repeat for Icons 2, 3 and 4. To see the complete list of icon options, visit this page: https://fontawesome.com/v4.7/icons/

We will add four of the following icons: paper-plane-o, cc-stripe, linux, joomla, heart, book, star

You can also add up to four Feature boxes.
A feature consists of an image and text which will appear on the custom login page in a row. You must add both an image and text in order for the feature to appear. The text will appear next to the featured image in a row. Use a Heading4 to generate a special title within the text box. In the Atto Editor H4 is Heading Medium. Then click Save Changes.

Add ReCAPTCHA
Spam protection may be added to the email-based self-registration new account form with a CAPTCHA element - a challenge-response test used to determine whether the user is human. ReCAPTCHA keys should be set in the manage authentication common settings.

Get ReCaptcha Keys
There are two keys, the Site Key and the Secret Key. The Site Key and the Secret Key can also be known as public and private keys respectively. You can obtain these keys by registering your site with Google’s reCAPTCHA service. The Site Key is used to render the reCAPTCHA within a page and the Secret Key is used for performing server-side validation. The keys are unique to the domain they are registered to. To get Recaptcha keys for your website, go to this Google page: https://www.google.com/recaptcha/about/

Then click on the Admin Console in the top menu. Enter your Gmail Address and password. Then click on the Plus sign in the top menu to create keys for a new website.

12

Type in the name of your website. Then check ReCaptcha 2 (as it appears that Moodle does not yet support ReCaptcha 3). Then check Invisible ReCaptcha. Then click to the right of the plus sign to add the domain name again. Then check the Accept Terms box. Then click Submit at the bottom of the page. Then copy and paste the Site Key and the Secret Key to a document in your Website Administration folder on your home computer. Then click the Back to Settings button and Click Save. Then close the browser window.

To add Recaptcha to your signup form, go to Site administration > Plugins > Authentication > Manage Authentication. Copy and paste the keys and click Save Changes.

Then enable Recaptcha by going to Site administration, Plugins, Authentication, Online Confirm. Then change Enable ReCaptcha from No to Yes. Then click Save Changes. Then view your website log in page. Click New Account. Enter the Signup code verification. Then click Proceed. Here is what Invisible ReCaptcha looks like:

13

Congratulations! You now have a custom secure Log in and User Registration system.

What's Next?
In the next chapter, we will use some Moodle plugins to create a better Menu and Navigation system.