Guides & tutorials

Signup form with data enrichment and custom Slack notifications

Table of contents

In this tutorial you will learn to create a registration form connected to Clearbit to check if the registered email is associated with a company. Based on this, a custom notification will be sent to a different Slack channel to notify the proper team.

Previous requirements

  • Your own API to authenticate and register the users.
  • A Clearbit account to enrich data from user email.
  • A Slack workspace and an user authorized to install new applications.
  • An Arengu account to create the form and the server-side logic.

Overview

This use case consists of:

  • A one-step form that allows us to register with our Gmail or Facebook account or an email and password. 
  • A step flow connected to it that registers the user in a custom API.
  • An after-submission flow that connects to Clearbit to check if there is a company associated with that email and runs conditional logic to decide which Slack channel it sends a custom notification to.

Create the form

First, go to the Form editor, choose the ‘Signup with email and password’ template which is fully editable, and activate the social signup option. 

You can also create the form from scratch by dragging and dropping an Email field and a Password field with the following settings:

  • ID: change them to ‘email’ and ‘password’.
  • Required: enable this checkbox in both cases to make them mandatory.

Regardless of how you created the form, configure the social login button by adding the Client ID (that you can find under settings in your social provider account) and the Scopes. Keep in mind setting the Scopes is optional, when not configured, you will get basic data by default.

Go to the Flows tab in the grey light menu to create and connect the flows with the server-side logic. In this case, we need a registration flow that runs on the first step of the form and an after-submission flow that connects to Clearbit and Slack.

If you have used the template, the signup flow will already be created and you will only have to create the after-submission flow by clicking on the plus button.

Once they are created, publish the changes.

Flow 1: Signup

The flow connected to the step of the form will register the user on our API with an email and a password or using the social signup option, and it will have this structure:

First, include a HTTP Request action and configure it as follows:

  • ID: change it to ‘signup’.
  • URL: paste the registration URL of your API.
  • Method: choose POST.
  • Content type: application/json.
  • Body:
{
  "sub": "{{input.body.email}} ?? {{input.body.social.profile.email}}",  
  "password": "{{input.body.password ?? undefined}}"
}

If needed, add the Authorization header and the secret API key of your API in the Headers section. Remember that these settings may vary depending on how your API is configured.

Then, add an If/then condition action to create two branches and trigger different actions based on whether the HTTP Request is successful or not. Configure it with these settings:

  • Condition: reference the {{signup.success}} variable from the previous action and set ‘is true’ as condition. Get the variable on the plus button after an execution of the flow.

In the False branch, include a Show error message action with these settings:

  • Error message: reference the {{signup.body.error_message}} variable from the outputs of the HTTP Request actions after an execution of the flow, to display the proper error message in the form.

Finally include a Submit the form action and configure it as follows:

  • Success message: write the message that the user will see just before the redirection.
  • Redirect to URL: enable this option and reference the {{signup.body.claim_url}} from the outputs of the previous HTTP Request action. As in the previous flow, the action will get the destination URL that your API returns to automatically redirect the user.

Finally, publish the changes.

Flow 2: Data enrichment, conditional logic and Slack notifications

The after-submission flow will have this structure:

First, include a Find person and company by email action with these settings:

  • ID: change it to ‘findPersonAndCompanyByEmail’ to simplify it.
  • Connection: create a new connection by clicking on the plus button and pasting the Secret Key of your Clearbit account, or select an existing connection.
  • Email: reference the {{input.body.email ?? input.body.social.profile.email}} variable from the form.

Then include an If/then condition action configured as follows:

  • Condition: reference the {{findPersonAndCompanyByEmail.body.person.employment.name}} variable from the outputs of the previous action after an execution of the flow and set ‘has value’ as the condition.

In the True branch, add a Send a Slack message action to notify, for example, the sales channel with this configuration:

  • Connection: select an existing Slack connection or click on the plus button to create a new one. We recommend you to choose the OAuth option and then just select the channel where you want to publish the notification.

Then personalize the notification texts and attachments:

  • Text: write the main text in the message. It will be displayed as an introductory text, before all the attachments.
  • Attachments: define each of the notification attachments by setting the following fields.
  • Attachment text: the main text in each attachment.
  • Pretext: An optional text that appears above the attachments. You can use it as a description or introduction of the attached content.
  • Color: assign a color to the message. Like traffic signals, color-coding messages can quickly communicate intent and help separate from the flow of other messages in the timeline.
  • Fields: list the variables that you want to include in the notification, getting them from dropdown after an execution of the flow, and identify them with a name or a title. In this case, we will include the {{input.body.email ?? input.body.social.profile.email}} variable from the form and some variables from the outputs of the Clearbit action.

In the False branch, add another Send a Slack message action to notify the other channel and configure it according to your liking.

Finally, publish the changes.

Preview, test and debug

Go back to the Form editor and click on the Preview button to test it. Check if everything is working properly, action by action, on the Executions tab of each flow.

Haven't you tried Arengu yet?Sign up free or schedule a demo with our team!

You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.