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
Custom table element - os-table
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 responsesbutton inMoremenu.
- Click on
Generate Response Viewbutton. 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
Exportbutton.
- Click on the
Copybutton forResponses 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><os-table>. Learn more here.- Insert the code inside the
<body>tag on the webpage.
- Add the script for using HTML Forms
<head> tag (see guide here)
- 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.
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>
<head> tag (see guide here)