Setting Upload data fields in HTML embedded forms

How it works

File uploads are available in your HTML embedded forms. If you're using Webflow, there is no need to upgrade your Webflow site to a Business plan in order to enable file uploads. The upload field seamlessly integrates into the page.

Example

This example uses the <os-file-upload data-os-files-limit="3"> tag to allow a user to upload up to 3 files to the form. Select multiple files using Shift.

Setup Guide

First, ensure that you have added the link to your website in the settings as Authorized Origins. Then, you can either copy the ready-to-use HTML form code and insert it into your webpage, or create a custom element if you already have the form set up and just want to add upload file functionality to it.

☝🏼

This guide assumes that you have created your Formli with a data fields block that you plan to embed on your website.

Add authorized domain

To collect files through your embedded forms, you need to set up an authorized origin in the workspace settings. An authorized origin is a domain name that is allowed to upload file responses to your workspace.

Go to Settings of your workspace.

Select Domains tab.

Scroll down to Authorized Origin section.

Paste the link to your domain and click the Add button. Your domain must contain the protocol (i.e. https://) and should not include anything past the TLD (i.e. .com, .io, .co, etc.). Also, please check and delete the trailing slash.

Your authorized origin has been added. You can now use the file upload functionality in embedded forms on your website.

Use the HTML code

Open … More menu and click on the Embed on website.

Select HTML in the dropdown list.

Click on Copy code. Please note that there are two scripts that need to be added to the <head> section of your website. An additional script is required here to enable the functionality of custom elements, such as file upload.

Paste the script code inside <head> tag in the webpage settings.

Click on Copy code of HTML form code.

Paste the code inside <body> tag.

Create custom “Upload file” element in Webflow

If you already have a form to collect data on your website and want to add an upload file field to it, follow these steps instead of copying the Formli HTML Code into the <body> tag. For instructions on how to connect Formli and Webflow form elements, refer to this guide.