Connect Formli to the existing Webflow form

How it works

There are two ways to use Formli HTML forms with Webflow sites. The first way is to copy the code that is ready to be embedded and paste it into a Webflow page, and then customize it. Alternatively, you can manually connect form elements of an already created Webflow form using custom attributes.

Setup Guide

Assuming you have already created and styled a Webflow form on your website, you can now proceed to connect this form element by element. Here, we will provide an example of connecting a simple subscription form with Name and Email data fields.

1. Create a corresponding Formli
2. Connect form container
3. Connect data fields
4. Connect success and error messages
5. Publish the changes

Step 1. Create a corresponding Formli

1. Create a Formli data fields block with the same fields as the Webflow form. How to create and customize data fields, please check this guide. The prompt and styling of the Formli block are not important. Make sure that the types of the data fields in Formli correspond to those in Webflow to avoid any potential errors.

2. Open the … More menu and click on the Embed on website option.

3. Select HTML in the dropdown list.

4. Click the Copy Code button.

5. Insert the code before </head> tag in the Webflow page settings.

6. Save the settings.

Step 2. Connect form container

1. Select form in the Navigator

2. Open form settings

3. Add Action link (copy it from HTML Form Code) and change Method to POST.


4. Find <form> tag in the HTML Form Code. Copy data-os-uuid and data-os-element with their values and add them as custom attributes to the Webflow form. It will connect Webflow form with the exact Formli block.

Step 3. Connect data fields

1. Select form data field

2. Open field settings.

3. Find <input> tag in the HTML Form Code for the correspondiing data field. Copy data-os-uuid and data-os-element with their values and add them as custom attributes to the Webflow data field. It will connect Webflow data field with the Formli data field.

4. To display errors specific to each field:
1. Add a <div> container in the form (e.g. under the field).

2. Copy data-os-uuid and data-os-element with their values and add them as custom attributes to the <div> container.


3. Add class = 'os-hidden' to the <div> container.

5. Repeat the same for all fields in the form.

Step 4. Connect success and error messages

1. Select Success message for the form in the Navigator

2. Open Settings.

3. Find <div> tag for the success message in the HTML Form Code and add the attribute data-os-element="form-success". This will cause the tagged element to be shown when the form successfully saves.


4. Add class = 'os-hidden' to the success message.

5. Find <div> tag for the success message in the HTML Form Code and add the tag data-os-element="form-success". This will cause the tagged element to be shown when the form successfully saves.

Step 5. Publish the changes

Your website form is now successfully connected to Formli. Publish your changes and test if it works as expected!