Templates
      Back to home
      1. Betty Blocks Documentation
      2. Building your application
      3. Templates

      Register form template

      Set up your registration page in a few clicks. Connect your data model and customize the background image.

      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 “+” button to add a new page.

      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 ‘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 an 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 to 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 ‘New properties’ (3) and following the setting wizard. Click on ‘Save’ after you’ve finished configuring the register form.

      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 a page’ button and click on it.

      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.