Collect graphic signatures from your users

How it works

You can now create forms for documents that need a user's signature for validation. Think consent forms, agreements, or any other documents that need a signature for confirmation or approval.

Add a new custom element called 'Signature' to your forms. This feature lets you collect and safely store your user's signatures digitally. No more need for physical signatures, signing is now easier and more convenient.

Setup Guide

You can use Signature data field to collect data using both Formli link and HTML Forms.

☝🏼

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

Add ‘Signature’ data field

Check saved signatures

Use Signatures in HTML Forms

Add authorized domain

Use the generated HTML code

Create custom “Signature” element in Webflow

Add ‘Signature’ data field

Open your Formli data field block for editing.
Click on +Add Data Field button.

Choose Type = Signature.

Update Data Field name and/or other settings. Save Field.

Open Formli. Now the user can click on the Signature icon to create their signature.

Clear button allows to clear the canvas and start over. Click Save when you are satisfied with the results.

After clicking Continue the signature will be saved into the response.

Check saved signatures

Go to Responses.
Add a column for the Signature data field from your Formli. For guidance on how to use response view columns, check here.

The response column contains a link to download the signature in SVG format.

Use Signatures in HTML Forms

Add authorized domain

To collect signatures 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 generated 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 signature.

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 “Signature” element in Webflow

If you already have a form to collect data on your website and want to add a signature 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.