Login form with image template

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

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.

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.

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.

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

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.