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