Connecting Formli and Webflow
ℹ️

Connecting Formli and Webflow

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
image

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. image
  2. Open the … More menu and click on the Embed on website option.
    3. image
  3. Select HTML in the dropdown list.
    4. image
  4. Click the Copy Code button.
    5. image
  5. Insert the code before </head> tag in the Webflow page settings.
    6. image
  6. Save the settings.

Step 2. Connect form container

  1. Select form in the Navigator
    2. image
  2. Open form settings
    3. image
  3. Add Action link (copy it from HTML Form Code) and change Method to POST.
    4. image
    image
  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.
    5. image
    image

Step 3. Connect data fields

  1. Select form data field
    2. image
  2. Open field settings.
    3. image
  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. image
  4. To display errors specific to each field:
    1. Add a <div> container in the form (e.g. under the field).
      2. image
    2. Copy data-os-uuid and data-os-element with their values and add them as custom attributes to the <div> container.
      3. image
      image
    3. Add class = 'os-hidden' to the <div> container.
      4. image
  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. image
  2. Open Settings.
    3. image
  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. image
    image
  4. Add class = 'os-hidden' to the success message.
    5. image
  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!

image

← Go back to Formli.com

© Copyright 2023. All Rights Reserved.