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.

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 the data fields to set URL parameters or cookie values on field change.

<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

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"></form>

The url .../index.html#story would show the form with such id.

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.

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

This example uses form autosave, success, error and loading elements for the fields. Loading element will be visible during the field saving process. Success element appears after the field was successfully saved. Otherwise, the error element will be shown.

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="dfe7890">Country</label>
      <os-country data-os-element="country" data-os-uuid="dfe7890" value=""></os-country>
      <div data-os-element="field-error" data-os-for="dfe7890" 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

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

Different field types

Related Guides