Login form with image template

A simple login form template with background image.

Updated over a week ago

After reading this article you’ll know:

  • How to create and use the Login form with image template

  • The flows users may face while using this form

  • How to add interactions and customize the styling of your login page

Description

The login form with image template enables registered users to log in to your application using their credentials. There are two flows within this template: happy flow, after which the user will be successfully logged in and redirected to another page, and unhappy flow when users end up failing to log in to the application. The template comes with a default design that can be customized. In particular, you can use your own logo and background image.

Getting started with login form with image template

Creating new page

Note: Before creating a new page with this template, make sure you have created another page to be able to redirect users to it from the login page to it. Having an authentication profile is also recommended.

Once you open your application’s dashboard, go to the Pages section and choose the “+” button to add a new page.

The next thing you will see is the “Choose a page template" menu” Here you need to find the “Login form with image template” template and click on the 'Use' button (or 'Preview' if you want to see the interactive example of use).

Now fill in the name and edit the page path to your liking (use underscore instead of a dash, for example). You have only the ‘Public’ option available by default as this page template should be accessible to all users.

The next thing you need to do is configure the login form. Firstly, select an authentication profile (1) for the particular users to be able to log in to their accounts. Pick up a profile from already created (2) or create a new authentication profile (3).

Note: Read this article to find out how to create and set an authentication profile. For this template, you will need to create a ‘Username/password’ kind of profile.

Now choose the page users will be redirected to after they have logged in. In most cases, it will be a home page. Click on the ‘Select a page’ (1) option, then choose the page and click on the ‘Select page’ button below (2). Save your settings (3).

Login success

After you’ve created your login form page, compile it by clicking on the play button in the top left corner. This way, you will be able to see what it will look like from a user’s perspective.

As mentioned in the description, after filling in the email and password fields with the valid credentials and clicking the ‘Login’ button, a user will automatically be redirected to the page you chose in the previous step.

Login fail

If a user fills in the wrong email address or password, they will not be able to log in. The instant error message will appear above the credential fields.

Also, users will get a warning message if they fail to use the proper email format.

Adding interactions

You might have already noticed that there are two more buttons below the ‘Login’: ‘Register new account’ and ‘I forgot my password'. These two are aimed at registration and password reset pages that are typically used in most web and mobile applications. The buttons have an ‘open page’ functionality, therefore you will just need to select a page in their options to which a user will be redirected after clicking on it.

Let’s assume that we have already created a registration page for our website. Now we are going to create the functionality within the ‘Register my account’ button. Select this button component and in the options menu on the left find the ‘Select page’ button. Choose the ‘Registration’ (or any other page) from a new window.

If you want to add more component interactions, read this article.

In case you don’t want to create your own registration and password reset pages and don’t mind having those additional functions out of the box, try our Login flow application template. This one gives you the primary functionality of login, registration and password reset by default.

Template customization

After you’ve created and set your page, it’s time to add some custom styling to it.

Adding logo

The first thing we can do is add your company’s logo to the login page. Go to the page builder and select the media component with ‘YourLogo’ (1). In the options menu on the left, you will see the link in the source section. Replace it with your own link (2).

Adding background image

Also, you can replace the background image on your login page. Open the page builder and go to the component tree. In the component tree menu, find the first box component from the top, and click on three dots (or just double-click the name ) to open its menu. In the ‘Options’ menu and scroll down to the ‘Background URL’ field. Replace the existing URL with yours.

It’s also possible to play around with page styles using the theme builder: find the color scheme that suits you best or choose different fonts. More information about the theme builder is available here.

Did this answer your question?