Zephr User Guide

Building a Registration Form

56 views 0

A Registration Form in Zephr works as both a registration form and a login form. Registration forms can be created in minutes by choosing fields from your User Schema to display as form fields, alongside pre-created fields for an email address, password, and, if relevant, social sign in.

How to Create a Registration Form

In this tutorial, you will learn the steps required to create a Registration Form within Zephr.

Registration Forms are created as Components of your Feature Outcomes. To begin, navigate to the Feature Rule where you want the Registration Form to display. Add a new Outcome, or edit an existing one, and scroll down to the Components section. Click Add A Component, then click the Add Form button.

The next page is where you create your registration form. Along the top, you’ll see tabs for Form Fields and Custom CSS.

Building a Form - Form Fields & CSS

Form Fields

Form Fields lets you add the fields you wish to have on your form. These come from your User Attributes. If you haven’t set these up before, read our User Attributes guide.

Custom CSS

Custom CSS allows you to style your form to suit your brand.

Form Details

Under Form Fields, give your Form a Title, and an optional Description. For Type, select Registration.

You can also choose to use Passwordless Authentication. This feature is only available if you have configured the ‘Require Email Verification’ option in the Identity Module Settings. Passwordless Authentication is discussed in more detail in this guide

Next, you will see a section for Login Providers. Login Providers allows you to configure your form to display social sign on logos, which will allow your user to authenticate using the login provider of their choosing, for example, Facebook or Google.

Users will be able to click these logos to trigger an OAuth 2.0 flow, which will allow them to register and login using social sign in.

In order to use this functionality, you must first configure your Login Providers. Read our Login Providers guide for more details.

Below this, the Your Form section lets you choose which fields are available on your Registration Form.

By default, email address will always be present. To add additional fields, click Add A User Attribute. A modal will display, detailing your options. Click Add next to the relevant user attribute or multi-select fields and click Add Selected.

Adding User Attributes to a Form

These fields will now display within your form. Drag and drop each field until you are happy with the order, add dividers to display form fields by category, and set a field as mandatory by using the Required slider.

Example Registration Form Creation

When you’re happy with your form, click Save.

You will return to the Outcome page and will see your newly created Registration Form under the Components section.

Components Section Showing Feature and Registration Form

When you’re happy with your Outcome, click Save to return to your Rule Canvas. You will see your Registration Form as an outcome in your decision bar. Drag this onto your canvas and connect it to your rule. In this example, we’ve connected the Registration Form to the Page View node, so that all anonymous users see a registration form when viewing article content.

Sample Rule Showing Registration Form Outcome

Once your Outcome has been created, you can edit and delete it in the Outcomes section, below your rule canvas.

Shows Outcomes Section Below Rules Canvas