Embed the response views as HTML

How it works

Now you can easily collect and display data collected from your user’s responses.

Within your workspace, configure a response view with the data that you wish to display. Copy and place the response view embed code on your site, and voila!

Each authenticated visitor to your site can see their data within the response view.

Note: Displaying responses only works for authenticated responders. To learning more about authenticated forms, checkout our guide here.

Example

A student visits your site looking to sign up for online classes you offer. The student authenticates on your site using Formli and signs up for 3 class.

Using an embedded response view, the student can view all three classes they signed up for!

Setup Guide

First, create and configure the response view including all the columns you wish to embed. Then, copy the generated code and paste it into the webpage. Finally, add the styles, save and check how your data will be displayed.

Create or open the response view

Use the generated HTML code in the webpage

Empty response view

Count

Results per page

Display different HTML properties (links, rich text, images)

Date format

Custom table element - os-table

Dynamic view filters

1. Create or open the response view

First, you should open the existing response view or create new one.

Open the form and click on Export responses button in More menu.

Click on Generate Response View button. This will add all the columns from this form.

Customize the response view to display all the needed columns: add or delete columns, set the filters.

2. Use the generated HTML code in the webpage

Click on Export button.

Click on the Copy button for Responses HTML Table Code

This example is generated for the 5 column response view:


      <table>
          <tr>
            <th>Form Name</th>
            <th>Full name</th>
            <th>City</th>
            <th>Email</th>
            <th>Date</th>
          </tr>
          <tr data-os-element="loop" data-os-loop="view" data-os-view="rvqd7jz1p1e">
            <td data-os-default="column" data-os-column="rvce2jognm0z"></td>
            <td data-os-default="column" data-os-column="rvcnzjg80mxg"></td>
            <td data-os-default="column" data-os-column="rvc1zm4k9pqo"></td>
            <td data-os-default="column" data-os-column="rvcr2jq55j3z"></td>
            <td data-os-default="column" data-os-column="rvc5rmnxvpqx"></td>
          </tr>
         </table>

💡

If you would like your automatically keep your HTML table in sync with your response view, use the custom element <os-table>. Learn more here.

Insert the code inside the <body> tag on the webpage.

Add the script for using HTML Forms.

👉

If you haven’t use the HTML Forms on this page, you should also copy the script link (1) and insert it inside <head> tag (see guide here). Include ‘host’ parameter in the script URL.

Add authentication to the element.

Embedded response data requires authentication for the responder. For instance, you can wrap the table code within a <div> tag and include the attribute data-os-element="authenticated" for that div.

If you have already constructed the form using Webflow elements, you can input the generated code into the Code Embed element.

Add some styles and save the page. Review your work - the table should display the same results as the response view.

Empty response view

You can create an element to define an empty state, such as a text message. This encourages the responder to take a specific action when no elements exist.

Example:

<div data-os-element="empty" data-os-view="rvod1mdqpzq">
<div>This table is empty</div>
</div>

data-os-element="empty" signifies the element that is displayed when no data is available.

Count

A total count of elements in a loop can be displayed using the attribute data-os-element="count" and specifying the the loop via data-os-for. The following example will add a count into the heading via a span tag:

<h1>Answers (<span data-os-element="count" data-os-for="rvqedmkvzeo"></span>)</h1>

data-os-element="count" attribute to count elements
data-os-for="loop_identifier" indicates what should be counted

Add loading element to show while the elements are being fetched:

 <h1> Answers (<span data-os-element="count" data-os-for="rvke2z375eg"></span><span class="os-hidden" data-os-element="loading" data-os-for="rvke2z375eg">
		Loading...</span>)</h1>

Results per page

The number of results per page can be set by using the data-os-results-per-page attribute.

The following example will show only 3 responses of the loop element:

  <tbody data-os-element="loop" data-os-results-per-page="3" data-os-loop="view" data-os-view="rvqedmkvzeo">

Display different HTML properties (links, rich text, images)

By default, all response data displayed via the loop element is displayed as text:

By using different HTML tags, you can customize how your data is displayed. For example, by using an <img> tag for your response data, href property will be populated and the image will be displayed on the page.

Here are some examples:

Rich text:

<td><div data-os-default="column" data-os-column="rvcj4nmdgd17"></div></td>

Links:

    <td><a data-os-default="column" data-os-column="rvc21pmwvv18">Open file</a></td>

Images:

<td><img data-os-default="column" data-os-column="rvcxem6xrd48"></td>

Default properties

The following attributes are set per html tag when setting data using the data-os-default attribute:

images set the property src
anchor tags set the property href
paragraph tags set the property innerText
span tags set the property innerText
div tags set the property innerHtml
input tags set the property value
h1, h2, h3… tags set the property innerText

To override the default property of a tag, you can use data-os-prop. The following example sets the alt property:

      <td><img data-os-default="column" data-os-column="rvcl49zxko17" data-os-prop="alt"  src="https://app.formli.com/city.jpeg"></td>

data-os-prop specifies the property to which the column value will be assigned.

Date format

You can control the date format for columns that contain date values:

<td data-os-default="column" data-os-element="date" data-os-date-style="short" data-os-date-local="en-UK" data-os-column="rvcw1234"></td>

data-os-element="date" - attribute for date values
data-os-date-style

style of short will display 11/22/2024
style of long will display November 22, 2022
style of full will display Tuesday, November 22, 2022

data-os-date-local will set the format of the date based on the locale settings.

Custom table element - os-table

You can copy the entire response view, including all columns and filters, with just one line of code. This eliminates the need to manually lay out each row and column. All settings will be automatically updated if you change the view in the app. The os-table custom element takes care of creating table headers and grids, empty state.

Just copy the following code and replace view_uuid with the ID of the response view, which can be found in the URL and insert it inside the <body> tag:

<os-table data-os-element="loop" data-os-view="view_uuid"></os-table>

👉

If you haven’t use the HTML Forms on this page, you should also copy the script link (1) and insert it inside <head> tag (see guide here)

Dynamic view filters

Use dynamic filters to filter a response view based on inputs on your website.

Add an empty filter to the response view:

Add one or more data-os-element="filter" inside loop element. For example, this loop will show all responses where Rating is 5 and Name matches the value of the Name URL parameter.

<input type="hidden" data-os-for="rvqedmkvzeo" data-os-element="filter" 
data-os-filter="Name" data-os-default="urlparam" data-os-urlparam="Name"/>
<input type="hidden" data-os-for="rvqedmkvzeo" data-os-element="filter" 
data-os-filter="Rating" value="5"/>

data-os-element="filter" - marks the element as a filter
data-os-filter="Name"- sets the name of the column to be filtered
data-os-for- associates the filter with a particular loop

The value of the filter is always taken from the value of the element. The element value can be set statically using the attribute value="5" or dynamically by using data-os-default. You can also create an input field that acts as a live filter for a specific column. Any change to this input field will trigger a refresh of the embedded response view data:

<label>Filter by Name</label>
<input type="text" data-os-for="rvqedmkvzeo" data-os-element="filter" 
data-os-filter="Name"/>

Related Guides

ℹ️Custom HTML Forms

ℹ️Response views

HTML Forms: Display Responses

Embed the response views as HTML

How it works

Example

Setup Guide

1. Create or open the response view

2. Use the generated HTML code in the webpage

Empty response view

Count

Results per page

Display different HTML properties (links, rich text, images)

Date format

Custom table element - os-table

Dynamic view filters

Related Guides