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

Attributes

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

    Show form in preview mode without ability to submit it.

    Default: false

    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

    data-with-download-button Boolean

    Set `false` to remove the signed document download button from the completed form card.

    Default: true

    data-with-send-copy-button Boolean

    Set `false` to remove the signed document send email button from the completed form card.

    Default: true

    data-with-complete-button Boolean

    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.

    data-completed-button-title String

    Button title displayed after the form completion.

    Example: Go Back

    data-completed-button-url String

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

    Callbacks

    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)

    Live Example