Embed your Formli as HTML

How it works

You can embed your Formli forms as HTML inside any web page, including Webflow. Embedding a Formli as HTML gives you complete control over how the form is styled and arranged on the page. With the form embedded as raw HTML, the form loads instantly on the page and there is never any lag for the form to load.

Formlis embedded as HTML are multi-page by default; all the conditional logic defined in Formli builder still applies as the user completes the form. Additionally, all of your actions are triggered upon completion.

Setup Guide

First, you should create the Formli. Then, copy the HTML code and insert it into your website. This guide includes code examples to help you better understand the structure of HTML forms:

Formli block

Fields:

Step 1 - Create Formli using only Data Fields blocks

Create a new Formli block with Type = Data Fields. Add the required data fields (see guide here )

Step 2 - Copy the code

Click on More menu button and choose Embed on website.

On the Page Body tab (1), select HTML (3) from the dropdown list (2).

Click the Copy Code button to copy the script tags, and paste them inside the <head> tag on your website. Please note that if your Formli contains data fields with the types Upload or Country, there will be multiple script tags.

Click the Copy Code button in the HTML Form Code section to copy the code structure for this specific Formli. Insert this code inside the <body> tag on your website.

👉

If you change the structure of your Formli you should update your code manually

HTML Form Tag List

Each element in the HTML code has custom attributes:

data-os-element contains the type of the Formli element.
data-os-uuid contains the identifier of the Formli element.

Formli block

Each <form> tag include code for Formli data field block:

<form data-os-uuid="awe5j1w147" data-os-element="form" 
action="https://app.formli.com/api/v1/data_responses" method="post">

In addition to custom attributes data-os-element="form" and data-os-uuid it has:

action attribute specifies the URL to which the form data will be sent when the user submits the form
method attribute defines the HTTP method used to send the form data

If your Formli consists of several blocks, there will be the same number of <form> elements, each with a unique data-os-uuid.

Success, error and loading messages (form level)

You can customize the messages that will indicate the loading, success, and error states of the form.

<div class="os-hidden" data-os-element="form-success">
    <div>Thank you! Your submission has been received!</div>
</div>
<div class="os-hidden" data-os-element="form-error">
		<div>Oops! Something went wrong while submitting the form.</div>
</div>
<div class="os-hidden" data-os-element="loading" data-os-for="form_uuid">
		<div>Loading...</div>
</div>

All of these elements should have the class="os-hidden" attribute, so they will only be shown when needed.
data-os-element="form-success" attribute indicates that the response was successfully submitted.
data-os-element="form-error" indicates that there was an error with the form. For example, if the form was changed but the fields' IDs were not updated
data-os-element="loading" is displayed while the form is being prepopulated with data or during the form submission. Unlike the form success and error elements, loading element should have data-os-for attribute with form uuid value.

Example

This example uses the form success, error and loading elements. Loading element will be visible during the form submission.

Parent session

You can link forms on different webpages together by passing a parent_session_id so that the responses will be linked in Formli. Every HTML form has a default parent_session_id hidden field with empty value.

<input data-os-element="parent-session" data-os-default="urlparam" 
data-os-urlparam="parent_session_id" type="hidden" />

data-os-element="parent-session" indicates that this element contains parent session
data-os-default="urlparam" the value will be taken from url param
data-os-urlparam="parent_session_id" the name of the parameter from the query string
type="hidden" indicates that this part of the form will not be visible to the user

Hidden fields

HTML Forms support URL parameters, also known as UTM codes, as a way to track conversions (more details on how to set up hidden fields)

<input data-os-element="metadata" data-os-metadata="source" type="hidden" />

The data-os-element="metadata" attribute indicates that this is metadata of the form response.
The data-os-metadata="source" attribute specifies the name of the hidden field, such as "source".

All hidden fields are added to the generated HTML of the first Formli block.

Back buttons

Add custom attribute data-os-element="back-button" to the link or button to use it for navigation between blocks:

<a data-os-element="back-button" href="#">Back</a>

Example

This example uses the back button on the second form.

Response and session, autosave

Response and session fields should be used at the same time. These elements are used in the form edit process.

<form data-os-element="form" data-os-uuid="abc1234" data-os-autosave
action="https://app.formli.com/api/v1/data_responses" method="post">
	<input type="hidden" data-os-element="response" value="rabc1234"></input>
	<input type="hidden" data-os-element="session" value="exdef34532"></input>
	<input type="text" data-os-element="first_name"></input>
</form>

data-os-element="response" attribute contains response ID
data-os-element="session" attribute contains session ID
data-os-autosave tag should be added to the <form> to be able to save the answers before responder clicks ‘Submit’

Example

This example uses the form autosave. Responses will be saved when unfocusing fields. Session and response elements have values of the response we want to edit.

Last (response)

The data-os-default="last" attribute allows you to populate the most recent response in the form. The attribute can be applied to any input. When the form loads, it will set populate the value of the last submitted value in that field for that particular responder.

In the following example, when the form loads the responder will see the last submitted value for first_name.

<form data-os-element="form" data-os-uuid="abc1234" data-os-autosave
action="https://app.formli.com/api/v1/data_responses" method="post">
	<input type="hidden" data-os-element="response" value="rabc1234"></input>
	<input type="hidden" data-os-element="session" value="exdef34532"></input>
	<input type="text" data-os-element="first_name" data-os-default="last"></input>
</form>

The previous example, will create a new response with the values of the previous response. If you would like to edit the values of the previous response, you can use data-os-default="last" for the elements response and session.

<form data-os-element="form" data-os-uuid="abc1234" data-os-autosave
action="https://app.formli.com/api/v1/data_responses" method="post">
	<input type="hidden" data-os-element="response" value="rabc1234" data-os-default="last"></input>
	<input type="hidden" data-os-element="session" value="exdef34532" data-os-default="last"></input>
	<input type="text" data-os-element="first_name"></input>
</form>

Your form will need to have authentication enabled in order to use data-os-default="last". If a user is not authenticated or unable to establish a guest user, the field will be blank.

It should also be noted that the attribute returns the last value per variant. A variant occurs when a form inherits values from another form. For example, imagine you are running a peer-to-peer fundraiser. You will have one form that registers a fund raiser and a second form that collects money that is unique to each fundraiser. The form that collects money is called a variant since it inherits values from another form.

In the case of a variant, the form will return the most recent value per the variant. Functionally each variant acts as an independent form when using data-os-default="last".

Completed

The data-os-element="completed" element is shown when a responder has already completed a form. Upon completion of the form, the responder will see the data-os-element="success" element and then on all subsequent visits to the page the responder will see the data-os-element="completed" element.

 <div class="os-hidden" data-os-element="completed" data-os-for="a81zm49jqo">
    <div>You have already completed the form</div>
  </div>

A few notes on how the data-os-element="completed" element works

the element is only shown on authenticated forms.
the element is only shown once a form has been fully completed.
the data-os-for attribute can be used to specify which form the completed element is associated with.
completion is based on both the form and the variant

Just like data-os-default="last" the data-os-element="completed" element is based on the variant. For example, if you have a peer to peer fundraiser where a user fills out a form to generate a fundraising page with their unique details, the data-os-element="completed" would ensure that each unique fundraising page could only be completed once.

Cookies

HTML Forms can capture values from a cookies, so that the cookie value will be submitted with the form

<input type="hidden" data-os-default="cookie" 
data-os-cookie="cookie_name" />

data-os-default="cookie" default value of the field will be taken from cookies
data-os-cookie="cookie_name" name of the cookie

URL Params

HTML Forms can collect parameters from the URL query string with hidden fields

<input data-os-element="metadata" data-os-default="urlparam" 
data-os-urlparam="city" data-os-metadata="City" type="hidden" />

data-os-element="metadata" attribute indicates that this is metadata
data-os-default="urlparam" default value of the field will be taken from URL parameter
data-os-urlparam="city" name of the URL parameter

Example

This example uses default field values taken from url params and cookies.

Set cookies and URL params

Add attributes to data fields to set URL parameters or cookie values as the field's value.

<input data-os-element="first-name" data-os-set="urlparam" 
data-os-urlparam="first_name" type="text" />
<input data-os-element="last-name" data-os-set="cookie" 
data-os-urlparam="last_name" type="text" />

data-os-set="urlparam" set field value to the URL param
data-os-urlparam="first_name" name of the URL param
data-os-set="cookie" set field value to the cookie
data-os-urlparam="last-name" name of the cookie

You can specify multiple values for the default options. For example, add data-os-urlparam="document_id,application_id". The document_id URL parameter will be used first. If document_id doesn't exist, then application_id will be used instead.

Example

This example uses data-os-set attributes to set url param and cookie values on field change.

Error and loading classes

You can specify a data-os-errorclass or data-os-loadingclass attributes on the elements to apply specific CSS classes when an action occurs.

<input data-os-element="first-name" data-os-errorclass="error-class" type="text" />
<input data-os-element="last-name" data-os-loadingclass="loading-class" type="text" />

Example

This example uses the form loading class and error classes on the fields. When the data is being pre populated or on the form submission, loading class applied.

Group Formli (adding multiple forms per page)

To make all forms within a single group function as a multi-page form, add data-os-group="group identifier" to each <form> tag:

<form data-os-uuid="awe5j1w147" data-os-group="group1" data-os-element="form" 
action="https://app.formli.com/api/v1/data_responses" method="post">
<form data-os-uuid="wlfj1w147" data-os-group="group1" data-os-element="form" 
action="https://app.formli.com/api/v1/data_responses" method="post">
<form data-os-uuid="ifjj1w147" data-os-group="group2" data-os-element="form" 
action="https://app.formli.com/api/v1/data_responses" method="post">

data-os-group="group1” identifies the two blocks of one Formli
data-os-group="group2” identifies the block of second Formli.

Alias

Add the same form to a page multiple times using data-os-alias tag.

 <form data-os-alias="first_form" data-os-group="1" data-os-uuid="av1k8ndo18" data-os-element="form" action="https://app.formli.com/api/v1/data_responses" method="post">
 <form data-os-alias="second_form" data-os-group="2" data-os-uuid="av1k8ndo18" data-os-element="form" action="https://app.formli.com/api/v1/data_responses" method="post">
 <div class="os-hidden" data-os-element="form-success" data-os-for="second_form">

data-os-alias="first_form", data-os-alias="second_form" - two forms with the same UUID.
data-os-for="second_form" identifies element that relates to the form with that alias.

Example:

URL Fragments

HTML Forms support navigation to the specific form of the page by adding a URL fragment to the link.

For example, if you have the following HTML:

<form id="intro"></form>
<form id="story"></form>
<form id="contacts" data-os-fragment></form>

The URL .../index.html#story would show the form with the corresponding id of “story”.

If data-os-fragment tag is added to the element, when user navigates to this block, the URL will be updated to show the id of the element. For example, when user opens the form with id="contacts", the URL will be .../index.html#contacts

Pages

You can add the tag data-os-element="page" to specific elements that should be shown or hidden for each block. For example, it could be a <div> that contains the form or a disclaimer text outside of it.


<div data-os-element="page" data-os-for="abc12345">
<form data-os-uuid="abc12345" data-os-group="group1" data-os-element="form" 
action="https://app.formli.com/api/v1/data_responses" method="post">
</div>
<div data-os-element="page" data-os-for="abc12345">Disclaimer text</div>

data-os-element="page" identifies the elements that are shown with the specific form.
data-os-for="abc12345" contains the ID of the associated form to which the element relates.

Example:

Events

Form elements fire events that can be used to trigger custom functionality written in JavaScript. Here is an example of a form-success event that throws confetti when the form is successfully submitted.

Name and value properties

If you build dynamic components in Webflow, values for group name and value can not be dynamically referenced because these attribute names are reserved. But you can override the name and value properties of any data-os-element using data-os-name and data-os-value.

Select the field and add data-os-name and data-os-value as Custom attributes.

Different field types

Text

Most of the Formli data fields have the similar structure of the HTML form. Each input element should specify the field type and ID.

<div>
      <label for="dfe789">Full name</label>
      <input data-os-element="full-name" data-os-uuid="dfe7890" value="" type="text" id="dfe7890" />
      <div data-os-element="field-error" data-os-for="dfe7890" class="os-hidden"></div>
    </div>

data-os-element="full-name" attribute contains the type of the Formli data field (text, date, number, city, etc)
data-os-uuid="dfe7890" attribute contains ID of the Formli data field

Field error, success and loading messages (field level)

You can use error, success and loading messages for every field of the form.

<div data-os-element="success" data-os-for="dfe7890" class="os-hidden">You answer is saved!</div>
<div data-os-element="loading" data-os-for="dfe7890" class="os-hidden">Loading...</div>
<div data-os-element="field-error" data-os-for="dfe7890" class="os-hidden"></div>

data-os-element specifies the type of message (success, loading, or error).
data-os-for contains the ID of the data field to which the message relates.
data-os-element="loading" requires using autosave for this field
data-os-element="success" and data-os-element="loading" require the text from the creator, data-os-element="field-error" will receive the text of the error from the server.
class="os-hidden" needed to hide the message until it is applied

To use a custom error message, you should add the attribute data-os-errormsg to data-os-element="field-error".

      <div data-os-element="field-error" data-os-errormsg="There is custom error message!" data-os-for="123457dxqwe"  class="os-hidden"></div>

Example

The following example uses form autosave, success, error and loading elements for the field elements. The loading element will be visible during the field saving process. The success element appears after the field was successfully saved and the error element will be shown if an error occurs.

Custom validation message

You can create custom validation messages for client-side validation on any field. Use the data-os-validate attribute on any input field to define validations that differ from the default OS form validation.

<div>
	<input data-os-element="first-name" data-os-uuid="abc1230" data-os-validate="presence" data-os-validate-if="visible">
	<input data-os-element="last-name" data-os-uuid="dfe7890" data-os-validate="presence" data-os-validate-msg="Last Name is required">
<div>

data-os-validate="presence" - validates that a field is not empty
data-os-validate-msg - specifies a custom validation message that appears when validation fails during form submission.
data-os-validate-if="visible" specifies a conditional validation rule (visible - only validates the field if it is visible on the page), so that server side validations do not block submitting the form.
When an input fails validation, three things happen: the class specified by data-os-errorclass becomes visible, the data-os-element="field-error" element associated with the input appears, and the message from data-os-validate-msg displays in the field-error element.

Multiple choice

To connect a multiple choice data field, you should connect each option separately in addition to connecting the data field itself.

<div>
      <label for="dfe7890">Multiple choice</label>
      <select data-os-element="multiple-choice" data-os-uuid="dfe7890" id="dfe7890" multiple>
        <option value="" label=" "></option>
        <option value="abc1234">Boston</option>
        <option value="abc3456">New York</option>
        <option value="abc5678">Portland</option>
      </select>
      <div data-os-element="field-error" data-os-for="dfe7890" class="os-hidden"></div>
    </div>

data-os-element="multiple-choice" - shows the field type
data-os-uuid attribute contains ID of the Formli data field
<option value="abc1234"> connects the value of the multiple choice option to the Formli
multiple attribute allows the selection of more than one option at once.

Radio buttons

You can customize multiple choice options into radio buttons (see guide here)

<div data-os-element="multiple-choice" data-os-uuid="dfe7890">
	<input
  	name="dfe7890"
    type="radio"
    id="lmn3456"
    value="lmn3456"
   />
   <label for="lmn3456">Yes</label>
 	<input
  	name="dfe7890"
    type="radio"
    id="abc1234"
    value="abc1234"
   />
   <label for="abc1234">No</label>
</div>

data-os-element="multiple-choice" shows the field type
data-os-uuid attribute contains ID of the Formli data field
for each radio button

name="dfe7890" - same as data-os-uuid (ID of the data field), gather radio buttons into the group
id="abc1234" and value="abc1234" - same as <option value="abc1234"> from multiple choice field (connects each radio button to the multiple choice option)
type="radio" indicates that this is radio button

Country

Instead of manually adding the list of countries as multiple choice field, you can use a custom HTML element "Country" to get the complete list.

<div>
      <label for="dfk4qq3qjl4">Country</label>
      <os-country data-os-element="country" 
      data-os-uuid="dfk4qq3qjl4"
      data-os-placeholder="Your location" 
      data-os-firstoptions="US,UA,FR" 
      value=""></os-country>
      <div data-os-element="field-error" data-os-for="dfk4qq3qjl4" class="os-hidden"></div>
</div>

<os-country> - custom ‘Country’ HTML element
data-os-element="country" connects to the Country data field of the Formli
data-os-uuid - custom attribute for data field ID
data-os-placeholder- text displayed as a placeholder when no value is selected
data-os-firstoptions="US,UA,FR" - allows you to specify the options that show up first in the list. The values should be separated by commas.

Upload

You can add custom HTML element for collecting files into Formli. This element enables users to upload one or multiple files.

<div>
      <label for="dfe7890">Upload CV file</label>
      <os-file-upload data-os-element="upload" data-os-uuid="dfe7890" data-os-files-limit="2"></os-file-upload>
      <button type="button" data-os-element="reset" data-os-for="dfe7890" class="os-hidden">Reset</button>
			<div data-os-element="loading" data-os-for="dfe7890" class="os-hidden">Uploading...</div>
      <div data-os-element="upload-success" data-os-for="dfe7890" class="os-hidden">Upload success!</div>
      <div data-os-element="field-error" data-os-for="dfe7890" class="os-hidden"></div>
    </div>

<os-file-upload> - custom ‘Upload’ HTML element
data-os-element="upload" - connects to the Upload data field of the Formli
data-os-uuid- custom attribute for data field ID
data-os-element="reset" - custom attribute that allows to change the selection of the file
data-os-files-limit used for selection of multiple files and sets the limit for maximum number of uploaded files
data-os-element="loading" showed during the file uploading

Example

This example uses file upload element with loading, success and reset elements.

Related Guides

ℹ️Connecting Formli and Webflow

ℹ️File Uploads for HTML forms

Custom HTML Forms

Embed your Formli as HTML

How it works

Setup Guide

Step 1 - Create Formli using only Data Fields blocks

Step 2 - Copy the code

HTML Form Tag List

Events

Name and value properties

Different field types

Related Guides