Embedded Signing Form | DocuSeal Docs

Home
Embedded Signing Form

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.

JavaScript
React
Vue
Angular

Copy

<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

Related Guides

Embed document signing into web app with JavaScript

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-field-placeholder optional Boolean

Set `true` to display field name placeholders instead of the field type icons.

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)

Copy

import React from "react"
import { DocusealForm } from '@docuseal/react'

export function App() {
  return (
    <div className="app">
      <DocusealForm
        src="https://docuseal.co/d/LEVGR9rhZYf86M"
        email="signer@example.com"
        onComplete={(data) => console.log(data)}
      />
    </div>
  );
}

View LIVE DEMO

Related Guides

Embed document signing into React app Embed document signing into React Native app

Attributes

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.

email optional String

Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.

role optional String

The role name or title of the submitter.

Example: First Party

expand optional Boolean

Expand form on open.

Default: true

minimize optional Boolean

Set to `true` to always minimize form fields. Requires to click on the field to expand the form.

externalId optional String

Your application-specific unique string key to identify submitter within your app.

logo optional String

Public logo image URL to use in the signing form.

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.

i18n optional Object

Object that contains i18n keys to replace the default UI text with custom values. See submission_form/i18n.js for available i18n keys.

Default: {}

preview optional Boolean

Show form in preview mode without ability to submit it.

goToLast optional Boolean

Navigate to the last unfinished step.

Default: true

withFieldNames 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

withFieldPlaceholder optional Boolean

Set `true` to display field name placeholders instead of the field type icons.

skipFields optional Boolean

Allow skipping form fields.

autoscrollFields optional Boolean

Set `false` to disable auto-scrolling to the next document field.

Default: true

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

backgroundColor optional String

Form background color. Only HEX color codes are supported.

Example: #d9d9d9

completedRedirectUrl optional String

URL to redirect to after the submission completion.

Example: https://docuseal.co/success

completedButton optional Object

Customizable button after form completion.

Example: { title: 'Go Back', url: 'https://example.com' }

Child parameters

title required String

Button label.

url required String

Button link. Only absolute URLs are supported.

withTitle optional Boolean

Set `false` to remove the document title from the form.

Default: true

withDownloadButton optional Boolean

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

Default: true

withSendCopyButton optional Boolean

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

Default: true

allowToResubmit optional Boolean

Set `false` to disallow user to re-submit the form.

Default: true

allowTypedSignature optional Boolean

Set `false` to disallow users to type their signature.

Default: true

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.

rememberSignature optional Boolean

values optional Object

Pre-assigned values for form fields.

Example: { 'First Name': 'Jon', 'Last Name': 'Doe' }

metadata optional Object

Submitter metadata Object.

Example: { customData: 'custom value' }

readonlyFields String

List of read-only fields.

Example: ['First Name','Last Name']

customCss optional String

Custom CSS styles to be applied to the form.

Example: #submit_form_button { background-color: #d9d9d9; }

Callbacks

onInit optional Function

Function to be called on initializing the form component.

Example: () => { console.log("Loaded") }

onLoad optional Function

Function to be called on loading the form data.

Example: (data) => { console.log(data) }

onComplete optional Function

Function to be called after the form completion.

Example: (data) => { console.log(data) }

Copy

<template>
  <DocusealForm
    :src="'https://docuseal.co/d/LEVGR9rhZYf86M'"
    :email="'signer@example.com'"
    @complete="onFormComplete"
  />
</template>

<script>
import { DocusealForm } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealForm
  },
  methods: {
    onFormComplete (data) {
      console.log(data)
    }
  }
}
</script>

View LIVE DEMO

Related Guides

Embed document signing into Vue app

Attributes

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.

email optional String

Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.

role optional String

The role name or title of the submitter.

Example: First Party

external-id optional String

Your application-specific unique string key to identify submitter within your app.

expand optional Boolean

Expand form on open.

Default: true

minimize optional Boolean

Set to `true` to always minimize form fields. Requires to click on the field to expand the form.

logo optional String

Public logo image URL to use in the signing form.

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.

i18n optional Object

Object that contains i18n keys to replace the default UI text with custom values. See submission_form/i18n.js for available i18n keys.

Default: {}

preview optional Boolean

Show form in preview mode without ability to submit it.

go-to-last optional Boolean

Navigate to the last unfinished step.

Default: true

skip-fields optional Boolean

Allow skipping form fields.

autoscroll-fields optional Boolean

Set `false` to disable auto-scrolling to the next document field.

Default: true

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

with-field-placeholder optional Boolean

Set `true` to display field name placeholders instead of the field type icons.

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

background-color optional String

Form background color. Only HEX color codes are supported.

Example: #d9d9d9

with-title optional Boolean

Set `false` to remove the document title from the form.

Default: true

with-download-button optional Boolean

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

Default: true

with-send-copy-button optional Boolean

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

Default: true

allow-to-resubmit optional Boolean

Set `false` to disallow user to re-submit the form.

Default: true

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.

remember-signature optional Boolean

allow-typed-signature optional Boolean

Set `false` to disallow users to type their signature.

Default: true

completed-redirect-url optional String

URL to redirect to after the submission completion.

Example: https://docuseal.co/success

completed-button optional Object

Customizable button after form completion.

Example: { title: 'Go Back', url: 'https://example.com' }

Child parameters

title required String

Button label.

url required String

Button link. Only absolute URLs are supported.

values optional Object

Pre-assigned values for form fields.

Example: { 'First Name': 'Jon', 'Last Name': 'Doe' }

metadata optional Object

Submitter metadata Object.

Example: { customData: 'custom value' }

readonly-fields Array

List of read-only fields.

Example: ['First Name','Last Name']

custom-css optional String

Custom CSS styles to be applied to the form.

Example: #submit_form_button { background-color: #d9d9d9; }

Callbacks

@init optional Function

Function to be called on initializing the form component.

Example: onFormLoad

@load optional Function

Function to be called on loading the form data.

Example: onFormLoad

@complete optional Function

Function to be called after the form completion.

Example: onFormComplete

Copy

import { Component } from '@angular/core';
import { DocusealFormComponent } from '@docuseal/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocusealFormComponent],
  template: `
    <div class="app">
      <docuseal-form
        [src]="'https://docuseal.co/d/LEVGR9rhZYf86M'"
        [email]="'signer@example.com'">
      </docuseal-form>
    </div>
  `
})
export class AppComponent {}

View LIVE DEMO

Related Guides

Embed document signing into Angular app

Attributes

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.

email optional String

Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.

role optional String

The role name or title of the submitter.

Example: First Party

expand optional Boolean

Expand form on open.

Default: true

minimize optional Boolean

Set to `true` to always minimize form fields. Requires to click on the field to expand the form.

externalId optional String

Your application-specific unique string key to identify submitter within your app.

logo optional String

Public logo image URL to use in the signing form.

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.

i18n optional Object

Object that contains i18n keys to replace the default UI text with custom values. See submission_form/i18n.js for available i18n keys.

Default: {}

preview optional Boolean

Show form in preview mode without ability to submit it.

goToLast optional Boolean

Navigate to the last unfinished step.

Default: true

withFieldNames 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

withFieldPlaceholder optional Boolean

Set `true` to display field name placeholders instead of the field type icons.

skipFields optional Boolean

Allow skipping form fields.

autoscrollFields optional Boolean

Set `false` to disable auto-scrolling to the next document field.

Default: true

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

backgroundColor optional String

Form background color. Only HEX color codes are supported.

Example: #d9d9d9

completedRedirectUrl optional String

URL to redirect to after the submission completion.

Example: https://docuseal.co/success

completedButton optional Object

Customizable button after form completion.

Example: { title: 'Go Back', url: 'https://example.com' }

Child parameters

title required String

Button label.

url required String

Button link. Only absolute URLs are supported.

withTitle optional Boolean

Set `false` to remove the document title from the form.

Default: true

withDownloadButton optional Boolean

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

Default: true

withSendCopyButton optional Boolean

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

Default: true

allowToResubmit optional Boolean

Set `false` to disallow user to re-submit the form.

Default: true

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.

rememberSignature optional Boolean

allowTypedSignature optional Boolean

Set `false` to disallow users to type their signature.

Default: true

values optional Object

Pre-assigned values for form fields.

Example: { 'First Name': 'Jon', 'Last Name': 'Doe' }

metadata optional Object

Submitter metadata Object.

Example: { customData: 'custom value' }

readonlyFields String

List of read-only fields.

Example: ['First Name','Last Name']

customCss optional String

Custom CSS styles to be applied to the form.

Example: #submit_form_button { background-color: #d9d9d9; }

Callbacks

onInit optional Event emitter

Event emitted on initializing the form component.

Example: handleInit($event)

onLoad optional Event emitter

Event emitted on loading the form data.

Example: handleLoad($event)

onComplete optional Event emitter

Event emitted the form completion.

Example: handleComplete($event)

Live Example

Email passed

Custom Logo

Document Title

Language

Custom CSS