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/{{ template_slug }}"
data-email="{{ signer_email }}">
</docuseal-form>
<script>
window.docusealForm.addEventListener('completed', (e) => {
console.log(e.detail)
})
</script>
data-src String required
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 signer URL. Signer "slug" key can be obtained via the /submissions API which is used to initiate signature requests for a template form with recipients.data-email String
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.
data-name String
Name of the signer.
data-role String
The role name or title of the signer.
Example: First Party
data-token String
JSON Web Token (JWT HS256) with a payload signed using the API key. JWT can be generated only on the backend..
slug String required
Template or Submitter slug. When Submitter slug is used no need to pass additional email param.
email String
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified with Template slug.
external_id String
Your application-specific unique string key to identify signer within your app.
preview Boolean
Show form in preview mode without ability to submit it.
Default: false
data-preview Boolean
Show form in preview mode without ability to submit it. Completed documents embedded in preview mode require `data-token` authentication.
Default: false
data-expand Boolean
Expand form on open.
Default: true
data-minimize 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 Boolean
Order form fields based on their position on the pages.
Default: false
data-logo String
Public logo image URL to use in the signing form.
data-language String
UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja languages are available. Be default the form is displayed in the user browser language automatically.
data-i18n 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 Boolean
Navigate to the last unfinished step.
Default: true
data-skip-fields Boolean
Allow skipping form fields.
Default: false
data-autoscroll-fields Boolean
Set `false` to disable auto-scrolling to the next document field.
Default: true
data-send-copy-email 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 Boolean
Set `false` to remove the document title from the form.
Default: true
data-with-decline Boolean
Set `true` to display the decline button in the form.
Default: false
data-with-field-names 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 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
Set `true` to display the complete button in the form header.
Default: false
data-allow-to-resubmit Boolean
Set `false` to disallow users to re-submit the form.
Default: true
data-allow-typed-signature Boolean
Set `false` to disallow users to type their signature.
Default: true
data-signature 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 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-reuse-signature Boolean
Set `false` to not reuse the signature in the second signature field and collect a new one.
Default: true
data-background-color String
Form background color. Only HEX color codes are supported.
Example: #d9d9d9
data-values Object
Pre-assigned values for form fields.
Example: {"First Name":"Jon","Last Name":"Doe"}
data-external-id String
Your application-specific unique string key to identify signer within your app.
data-metadata Object
Signer metadata Object in JSON format.
Example: {"customData":"customValue"}
data-readonly-fields String
Comma separated read-only field names
Example: First Name,Last Name
data-completed-redirect-url String
URL to redirect to after the submission completion.
Example: https://docuseal.com/success
data-completed-message-title String
Message title displayed after the form completion.
Example: Documents have been completed
data-completed-message-body String
Message body displayed after the form completion.
Example: If you have any questions, please contact us.
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 String
Custom CSS styles to be applied to the form.
Example: #submit_form_button { background-color: #d9d9d9; }
init Event
Custom event to be triggered on initializing the form component.
Example: document.querySelector('docuseal-form').addEventListener('init', () => console.log('init'))
load Event
Custom event to be triggered on loading the form data.
Example: document.querySelector('docuseal-form').addEventListener('load', (e) => e.detail)
completed Event
Custom event to be triggered after form completion.
Example: document.querySelector('docuseal-form').addEventListener('completed', (e) => e.detail)
declined Event
Custom event to be triggered after form decline.
Example: document.querySelector('docuseal-form').addEventListener('declined', (e) => e.detail)