Zephr User Guide

Building a Registration Form

0 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, Custom CSS, and Social Sign In.

Building a Form

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.

Social Sign In

Social Sign In lets you choose which social providers you want your users to be able to sign in with. Currently, Zephr supports Facebook, Google, and LinkedIn.

To add Social Sign In to your Zephr Registration Form, click into the Social Sign In tab when creating your form.

Social Sign In - Empty Credentials

Here you will see buttons for adding Facebook, Google and LinkedIn, respectively.

Sign In with Facebook

Click the Add Facebook button, then add your Facebook Client ID and Client Secret. Documentation on how to find this information is available here.

Sign In with Google

Click the Add Google button, then add your Google Client ID and Client Secret. Documentation on how to find this information is available here.

Sign In with LinkedIn

Click the Add LinkedIn button, then add your LinkedIn Client ID and Client Secret. Documentation on how to find this information is available here.

Saving your Social Sign In Credentials

Once you have added the relevant details, be sure to click back into the Form Fields section and click Save to ensure your details are correctly stored.

Once complete, your out-of-the-box Registration and Login Form will display the relevant logos, based upon the social platforms you selected above.

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.

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 is this guide

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