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>
View LIVE DEMO

Attributes

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-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

    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-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.co/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

    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; }

    Callbacks

    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)

    Live Example