Guides & tutorials

Getting started with Arengu forms and Webflow

No items found.
Download this tutorial scenario and import it in your workspace
Table of contents

Building custom and advanced forms for your Webflow site is easier than you might think. 

From demo request forms to signups with multiple integrations and automations, Arengu allows you to create the use case you need without having to code everything from scratch. Plus you can easily embed them by copying and pasting two simple lines of code.

Demo request with user qualification

Personalize your forms and flows qualifying users with data enrichment, or just adding custom rules to ask more data based on the user profile.

Arengu allows you to easily integrate Clearbit in your flows to get more information from the user's email. Add conditional logic based on the form's input data, or the data provided by the data enrichment tool, to trigger different paths and form behaviors.

For example, you can ask for more data if a corporate email is detected, send notifications based on the user’s job position or company size, plus allow certain users to book a meeting with Calendly with a salesperson.

Signup and login 

Create completely customized login and registration forms, asking for an email and password or Social Login options like Google, Facebook and Microsoft.

Easily generate and send temporary codes and magic links to build user verification and passwordless flows from scratch or using fully editable templates.

If you have more advanced coding skills, you can include ID card and biometric verification services like Passbase, or integrate IP scoring services into your flows.

Payments and subscriptions

Integrate Stripe into your forms by dragging and dropping the payment field, and copying and pasting the API key from your account.

Quickly configure one-off and subscription payments in your forms, dynamic payments, discount coupons, upgrade and downgrade subscriptions, and much more. 

Out of the box integrations

Arengu allows you to trigger actions and automations in any stage of the form, not only after form submission. Actually, you can connect any service with an API using the provided native actions and the HTTP Request action to connect your own ones. 

For example, you can easily connect Airtable, Google Sheets, or HubSpot to store your user’s information, Mailchimp to subscribe them to your newsletter, or Slack to send custom notifications to your channels.

Check all the available integrations that you can connect via OAuth or simply by copying or pasting the API keys of the corresponding account. 

How to embed custom forms in Webflow

There are two ways to embed Arengu forms in your Webflow site. Both of them require our JavaScript SDK to be loaded but, to get a faster load, we recommend using the ‘Embed’ component. To get the embed code, just click on the ‘Embed’ tab of the form in the editor.

A) Using the ‘Embed’ component (Recommended)

First, add the SDK script to your head code in your project settings, under the ‘Custom code’ section, as you can see in the image. 

Webflow has an ‘Embed’ component 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.

B) Adding a custom attribute

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

Just remember to add the SDK script to the head code of the website too, under the ‘Custom code’ section, as you can see in the previous example.

Bonus tip: Dynamic variables in forms

Did you know that you can add dynamic content to your forms using Webflow collections? When using Weblfow's ‘HTML Embed Code’ to add forms, you can easily include dynamic variables from your collections by clicking the ‘Add field’ button.

For example, you can use it to dynamically change titles or pre-fill form fields.

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

You might like to read

See more tutorials

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.