[Tutorial] How to embed Arengu forms in Webflow

Hello Webflow folks,

I would like to share a quick tutorial to embed Arengu forms in Webflow.

Unlike other forms builders, Arengu allows you to visually build the form and it’s custom logic, so you can cover from simple use cases to more advanced ones: sign-up forms, social login, OTP flows, passwordless flows, subcription payments, multi-factor authentication, etc.

Email flow with OTP example

This is an example of flows you can build with Arengu.

The form

The flow that sends the OTP

The flow that verifies the OTP

Embed the form

There are two methods you can use to embed Arengu in your Webflow site. As both of them require our JavaScript SDK to be loaded :

<script async src="https://sdk.arengu.com/forms.js"></script>

First, you need to add it to your head code in your project settings under Custom code section:

Method 1: Using Embed component (Recommended)

Webflow has an Embed compontent to add custom HTML anywhere in your page, so you can just use it to paste our tag where you want your form to appear:

<div data-arengu-form-id="YOUR_FORM_ID"></div>

It’s that simple:

Method 2: Using custom attribute

If you can’t use the Embed component, you can always add the custom attribute data-arengu-form-id with your form ID as value to any component: