Before working with this API, you must add a signature element to your page. In the Wix Editor, add a Signature and a Submit button to a form on your page. The signature element comes with a signature pad and a built-in Clear button. After the site visitor draws their signature on the pad and submits the form, the SignatureInput element's value is populated with a base64-encoded Data URL representing a PNG image of the signature.

The SignatureInput APIs work with both Wix Forms and custom forms, which are forms you manually create by adding user input elements and a submit button to your page.

With code, you can use the SignatureInput API to:

  • Save the signature to a collection as an inline image in a field of type Image.
  • Clear the signature from the signature pad with the clear() function.
  • Use the onChange() event handler to detect if the signature value changed or was cleared.
  • Set the element's properties and events, such as Hidden on load and onMouseIn.
  • Send a signature by email as an attachment, such as with a service like SendGrid. Tip: Make sure to strip out the "data:image/png;base64," prefix from the signature value before attaching.

Using Signatures with Wix Forms:

Wix Forms automatically adds the signature to the Media Manager and to the collection generated for you by Wix Forms, so you do not have to code this functionality unless working with another collection.

About Inline Images in Collections:

  • Saving a signature as an inline image in a collection is supported because signatures are relatively small in size. We do not recommend that you store other types of images inline in collections for performance reasons.
  • You cannot preview inline images in collections generated by apps that do not use the new Wix Content Management System (CMS), such as Wix Forms. To make sure you can preview, we recommend you do not store inline images in collections generated by Wix Forms.
Was this helpful?