After reading this article you’ll know:
How to create and set up the register form page using the template
Registration success and failure flows
How to replace the background image
Description
A simple form to enable users to register their account in your application. After filling in the unique email with a password, a user will receive a success message to proceed using the application as a registered user. You can connect your data model to this form and customize the background image to align the page with the overall design of your company’s application.
Creating and configuring new page
Once you open your application’s dashboard, go to the Pages section and choose the |
The next thing you will see is the “Choose a page template”. Here you need to find the “Register form” template and click on the |
Now fill in the name and edit the page path to your liking (use underscore instead of a dash, for example). There’s only a ‘Public’ option available for this template as the registration page has to be accessible for everyone. |
The following configuration step will include selecting the data model (1) and choosing its properties: the bare minimum in case of using this template is picking up the email and password properties (2). You can add more properties if you lack some of them by clicking
Note: In order to enable your users to register properly, you have to create a create and use a separate model (like 'Webuser' in this example). Don't use the default ones that come out of the box as you create an application within the Betty Blocks platform. |
Registration flows
Now as a register form has been created, you can click on the play button in the top left corner of your page to compile the page and see its front-end part. It will look like this:
Successful registration
Let’s try to register a new user. To do this right, you must use a unique email address (that hasn’t been used within your application). An email should follow this example pattern: user@gmail.com. You are free to pick any password you like to be registered. Click on ‘Create Account’ once you put down your email address and password.
After you’ve successfully registered your profile, you will receive this notification:
Registration failed
As was mentioned before, unless you use a unique email address, you will not be able to register a new user. You will receive this notification message that means the user with the same credentials already exists in the system:
You will also receive the ‘No valid value provided’ notification unless you follow the right email type pattern mentioned at the beginning of this section.
Redirecting to login page
If you again look at the registration form, you might notice that it has the ‘Back to login’ button above the email form. This is an open page button that can enable users to get back to the login page after registration.
Open the page builder (1) and select the ‘Back to login’ button component (2). In the options menu, find the |
Select your application’s ‘Login page’. Now your users will be able to return to the login page after registration. |
Changing background image
Open the page builder and go to the component tree tab. 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, scroll down to the ‘Background URL’ field. Replace the existing URL with yours. |
Also, you can customize other elements on your page, like button styles, font types, etc. All of these changes could be made via the theme builder. This article might help you get started with the styling of your pages. |