Signup Form

Signup form overview.

Notion image

Logo, Title, and Background Image

Under the Features tab of block settings, you can add a logo to the block, change the title, as well as set a background image for the whole block.

Signup Form

Sign up with Google

If you enable this option, a Sign up with Google button will be added to the form, allowing your users to sign up with their Google Accounts.

Signup with Google
Signup with Google
💡
To enable Google Signup, you first need to add your Google APP Client details in Integrations => Google Sign In. You can find instructions on getting the Client ID and Client Secret here.

Domain-based signup

Here, you can allow users to sign up only from specified domains. To do so, you need to add these domains inside the Allowed domains field. For instance, if you want only people with "softr.io" domains (e.g. john@softr.io) to sign up, you need to enter "softr.io" into Allowed domains and hit Enter (see below). You can add as many domains as needed.

Adding allowed domains
Adding allowed domains

Form fields

Default Fields

By default, you have three fields: Name, Email, and Password, where the Name field can be enabled or disabled. The placeholder texts of these fields can be modified as well. However, it's also possible to add any number of additional fields after connecting an Airtable users base, which we'll discuss next.

Adding Custom Fields

You also have the option of customizing the Signup block by adding more fields. The values of additional fields will be stored in your data source, therefore you need to have a data source connected in the Users section. If you haven't connected a users base data source yet, you'll see a Create Data Source option under the Signup Form section in the Features tab.

Create Data Source option
Create Data Source option

After clicking the Create button, you'll need to follow the process described here to connect a data source where user data will be synced. Further on, in your database, you can define additional fields to store extra user parameters and add those to the Signup form as well. Let's consider a specific example to give you a better idea of how this works.

Let's connect an Airtable users base, where we have added an additional Position field that indicates the position of the registered employee within the company.

Users base with additional parameter
Users base with additional parameter

Now, we can add a position field to our Signup form and link it to this field on Airtable as done below.

Additional Position field
Additional Position field

As a result, the users can now select a Position on signup, and it will be stored in the connected Airtable base as shown below.

Additional Signup field stored on Airtable
Additional Signup field stored on Airtable

Sign Up Button

Lastly, there's the Sign Up button. The button Text can be changed, while the Action is predefined and can't be modified.

Terms and Conditions

Here, you can choose if you want to display a Terms & Conditions checkbox on the form, so that the users have to accept it before proceeding with the registration. If the checkbox is enabled, there are two fields for linking Terms and Privacy Policy pages.

Show Sign In

Choose whether you want to show a sign-in button (takes the user to the sign-in page) or not.

On Sign up

Lastly, we need to set what page the user should be taken to after successfully signing up.

Configuring page after signup
Configuring page after signup

Enable reCaptcha

Enabling reCaptcha on Sign Up form
Enabling reCaptcha on Sign Up form

By adding reCaptcha authentication to your sign up form, you'll protect it from getting spammed or misused.

💡
Please, note that Softr only supports reCaptcha v3.

To set up reCaptcha, you need to go to https://www.google.com/recaptcha/admin/create and enter your site details as shown below.

reCaptcha setup
reCaptcha setup

In the next screen, you just need to copy the Site Key and Secret Key.

Getting Site Key and Secret Key
Getting Site Key and Secret Key

To finalize the setup, paste the Site Key and Secret Key in your Softr app's Settings => Integrations => Google reCaptcha.

Adding reCaptcha keys
Adding reCaptcha keys
 
Did this answer your question?
😞
😐
🤩

Last updated on August 22, 2023