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.
import React from "react"
import { DocusealForm } from '@docuseal/react'
export function App() {
return (
<div className="app">
<DocusealForm
src="https://docuseal.com/d/LEVGR9rhZYf86M"
email="signer@example.com"
onComplete={(data) => console.log(data)}
/>
</div>
);
}
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.Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.
Name of the signer.
The role name or title of the signer.
Example First Party
JSON Web Token (JWT HS256) with a payload signed using the API key. JWT can be generated only on the backend.
Template or Submitter slug. When Submitter slug is used no need to pass additional email param.
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified with Template slug.
Your application-specific unique string key to identify signer within your app.
Show form in preview mode without ability to submit it.
Default false
Show form in preview mode without ability to submit it. Completed documents embedded in preview mode require
token
authentication.
Default false
Expand form on open.
Default true
Set to
true
to always minimize form fields. Requires to click on the field to expand the form.
Default false
Order form fields based on their position on the pages.
Default false
Public logo image URL to use in the signing form.
UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja languages are available. By default the form is displayed in the user browser language automatically.
Object that contains i18n keys to replace the default UI text with custom values. See submission_form/i18n.js for available i18n keys.
Default {}
Navigate to the last unfinished step.
Default true
Set
false
to hide field name. Hiding field names can be useful for when they are not in the human readable format. Field names are displayed by default.
Default true
Set
true
to display field name placeholders instead of the field type icons.
Default false
Allow skipping form fields.
Default false
Set
false
to disable auto-scrolling to the next document field.
Default true
Set
false
to disable automatic email sending with signed documents to the signers. Emails with signed documents are sent to the signers by default.
Form background color. Only HEX color codes are supported.
Example #d9d9d9
URL to redirect to after the submission completion.
Example https://docuseal.com/success
Message displayed after the form completion.
Message title.
Example Documents have been signed!
Message content.
Example If you have any questions, please contact us.
Customizable button after form completion.
Button label.
Example Go Back
Button link. Only absolute URLs are supported.
Example https://example.com
Set
false
to remove the document title from the form.
Default true
Set
true
to display the decline button in the form.
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
Set to
true
to display only required fields in the step-by-step form, hiding all optional fields.
Default false
Set
false
to disallow user to re-submit the form.
Default true
Set
false
to disallow users to type their signature.
Default true
Allows pre-filling signature fields. The value can be a base64 encoded data:image/ string, a public URL to an image, or plain text that will be rendered as a typed signature using a standard font.
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
.
Set
false
to not reuse the signature in the second signature field and collect a new one.
Default true
Pre-assigned values for form fields.
Example { 'First Name': 'Jon', 'Last Name': 'Doe' }
Your application-specific unique string key to identify signer within your app.
Metadata object with additional signer information.
Example { customData: 'custom value' }
List of read-only fields.
Example ['First Name','Last Name']
Custom CSS styles to be applied to the form.
Example #submit_form_button { background-color: #d9d9d9; }
Function to be called on initializing the form component.
Example () => { console.log("Loaded") }
Function to be called on loading the form data.
Example (data) => { console.log(data) }
Function to be called after the form completion.
Example (data) => { console.log(data) }
Function to be called after the form decline.
Example (data) => { console.log(data) }