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:
- Success, error and loading messages (form level)
- Parent session
- Hidden fields
- Back buttons
- Response and session, autosave
- Cookies
- URL params
- Set cookies and URL params
- Error and loading classes
- Group forms (adding multiple forms per page)
- Alias
- URL Fragments
- Pages
- Events
Fields:
- Basic fields
- Field error, success and loading messages (field level)
- Multiple choice field
- Radio buttons
- Country
- Upload
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 chooseEmbed on website
. - On the
Page Body
tab (1), selectHTML
(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 typesUpload
orCountry
, there will be multiple script tags. - Click the
Copy Code
button in theHTML Form Code
section to copy the code structure for this specific Formli. Insert this code inside the<body>
tag on your website.
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 formmethod
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 updateddata-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 havedata-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 sessiondata-os-default="urlparam"
the value will be taken from url paramdata-os-urlparam="parent_session_id"
the name of the parameter from the query stringtype="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 IDdata-os-element="session"
attribute contains session IDdata-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 cookiesdata-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 metadatadata-os-default="urlparam"
default value of the field will be taken from URL parameterdata-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 paramdata-os-urlparam="first_name"
name of the URL paramdata-os-set="cookie"
set field value to the cookiedata-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 Formlidata-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 fielddata-os-element="success"
anddata-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 typedata-os-uuid
attribute contains ID of the Formli data field<option value="abc1234">
connects the value of the multiple choice option to the Formlimultiple
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 typedata-os-uuid
attribute contains ID of the Formli data field- for each radio button
name="dfe7890"
- same asdata-os-uuid
(ID of the data field), gather radio buttons into the group-
id="abc1234"
andvalue="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 elementdata-os-element="country"
connects to the Country data field of the Formlidata-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 elementdata-os-element="upload"
- connects to the Upload data field of the Formlidata-os-uuid
- custom attribute for data field IDdata-os-element="reset"
- custom attribute that allows to change the selection of the filedata-os-files-limit
used for selection of multiple files and sets the limit for maximum number of uploaded filesdata-os-element="loading"
showed during the file uploading
Example
This example uses file upload element with loading, success and reset elements.