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.

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

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

    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)

    Live Example