This component enables seamless integration of a signing form within any section of your website or application. It offers compatibility with JS+HTML, Vue, Angular and React, providing you with versatile options for integration.
<script src="https://cdn.docuseal.co/js/form.js"></script>
<docuseal-form
id="docusealForm"
data-src="https://docuseal.co/d/LEVGR9rhZYf86M"
data-email="signer@example.com">
</docuseal-form>
<script>
window.docusealForm.addEventListener('completed', (e) => e.detail)
</script>
data-src required String
Public URL of the document signing form. There are two types of URLs:
/d/{slug}
- template form signing URL can be copied from the template page in the admin dashboard. Also template "slug" key can be obtained via the /templates
API./s/{slug}
- individual submitter URL. Submitter "slug" key can be obtained via the /submissions
API which is used to initiate signature requests for a template form with recipients.data-email optional String
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.
data-role optional String
The role name or title of the submitter.
Example: First Party
data-expand optional Boolean
Expand form on open.
Default: true
data-minimize optional Boolean
Set to `true` to always minimize form fields. Requires to click on the field to expand the form.
data-preview optional Boolean
Show form in preview mode without ability to submit it.
data-logo optional String
Public logo image URL to use in the signing form.
data-language optional String
UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar languages are available. Be default the form is displayed in the user browser language automatically.
data-i18n optional String
JSON encoded string that contains i18n keys to replace the default UI text with custom values. See submission_form/i18n.js for available i18n keys.
Default: {}
data-go-to-last optional Boolean
Navigate to the last unfinished step.
Default: true
data-skip-fields optional Boolean
Allow skipping form fields.
data-autoscroll-fields optional Boolean
Set `false` to disable auto-scrolling to the next document field.
Default: true
data-send-copy-email optional Boolean
Set `false` to disable automatic email sending with signed documents to the signers. Emails with signed documents are sent to the signers by default.
Default: true
data-with-title optional Boolean
Set `false` to remove the document title from the form.
Default: true
data-with-field-names optional Boolean
Set `false` to hide field name. Hidding field names can be useful for when they are not in the human readable format. Field names are displayed by default.
Default: true
data-with-download-button optional Boolean
Set `false` to remove the signed document download button from the completed form card.
Default: true
data-with-send-copy-button optional Boolean
Set `false` to remove the signed document send email button from the completed form card.
Default: true
data-allow-to-resubmit optional Boolean
Set `false` to disallow users to re-submit the form.
Default: true
data-allow-typed-signature optional Boolean
Set `false` to disallow users to type their signature.
Default: true
data-background-color optional String
Form background color. Only HEX color codes are supported.
Example: #d9d9d9
data-values optional Object
Pre-assigned values for form fields.
Example: {"First Name":"Jon","Last Name":"Doe"}
data-external-id optional String
Your application-specific unique string key to identify submitter within your app.
data-metadata optional Object
Submitter metadata Object in JSON format.
Example: {"customData":"customValue"}
data-readonly-fields optional String
Comma separated read-only field names
Example: First Name,Last Name
data-completed-redirect-url optional String
URL to redirect to after the submission completion.
Example: https://docuseal.co/success
data-completed-button-title optional String
Button title displayed after the form completion.
Example: Go Back
data-completed-button-url optional String
URL of the button displayed after the form completion.
Example: https://example.com
data-custom-css optional String
Custom CSS styles to be applied to the form.
Example: #submit_form_button { background-color: #d9d9d9; }
init optional Callback
Custom event to be triggered on initializing the form component.
Example: document.querySelector('docuseal-form').addEventListener('init', () => console.log('init'))
load optional Callback
Custom event to be triggered on loading the form data.
Example: document.querySelector('docuseal-form').addEventListener('load', (e) => e.detail)
completed optional Callback
Custom event to be triggered after form completion.
Example: document.querySelector('docuseal-form').addEventListener('completed', (e) => e.detail)