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.com/js/form.js"></script>
<docuseal-form
id="docusealForm"
data-src="https://docuseal.com/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.
Default: false
data-order-as-on-page optional Boolean
Order form fields based on their position on the pages.
Default: false
data-preview optional Boolean
Show form in preview mode without ability to submit it.
Default: false
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, kr 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.
Default: false
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-decline optional Boolean
Set `true` to display the decline button in the form.
Default: false
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-field-placeholder optional Boolean
Set `true` to display field name placeholders instead of the field type icons.
Default: false
Set `false` to remove the signed document download button from the completed form card.
Default: true
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-signature optional String
Allows pre-filling signature fields. The value can be a base64 encoded image string, a public URL to an image, or plain text that will be rendered as a typed signature using a standard font.
data-remember-signature optional Boolean
Allows to specify whether the signature should be remembered for future use. Remembered signatures are stored in the signer's browser local storage and can be automatically reused to prefill signature fields in new forms for the signer when the value is set to `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.com/success
data-completed-message-title optional String
Message title displayed after the form completion.
Example: Go Back
data-completed-message-body optional String
Message body displayed after the form completion.
Example: Go Back
Button title displayed after the form completion.
Example: Go Back
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)
declined Callback
Custom event to be triggered after form decline.
Example: document.querySelector('docuseal-form').addEventListener('declined', (e) => e.detail)