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.
<template>
<DocusealForm
:src="'https://docuseal.com/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>
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.email String
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified.
name String
Name of the signer.
role String
The role name or title of the signer.
Example: First Party
token String
JSON Web Token (JWT HS256) with a payload signed using the API key. JWT can be generated only on the backend.
slug String required
Template or Submitter slug. When Submitter slug is used no need to pass additional email param.
email String
Email address of the signer. Additional email form step will be displayed if the email attribute is not specified with Template slug.
external_id String
Your application-specific unique string key to identify signer within your app.
preview Boolean
Show form in preview mode without ability to submit it.
Default: false
preview Boolean
Show form in preview mode without ability to submit it. Completed documents embedded in preview mode require `data-token` authentication.
Default: false
expand Boolean
Expand form on open.
Default: true
minimize Boolean
Set to `true` to always minimize form fields. Requires to click on the field to expand the form.
Default: false
order-as-on-page Boolean
Order form fields based on their position on the pages.
Default: false
logo String
Public logo image URL to use in the signing form.
language String
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.
i18n 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: {}
go-to-last Boolean
Navigate to the last unfinished step.
Default: true
skip-fields Boolean
Allow skipping form fields.
Default: false
autoscroll-fields Boolean
Set `false` to disable auto-scrolling to the next document field.
Default: true
with-field-names Boolean
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
with-field-placeholder Boolean
Set `true` to display field name placeholders instead of the field type icons.
Default: false
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
background-color String
Form background color. Only HEX color codes are supported.
Example: #d9d9d9
with-title Boolean
Set `false` to remove the document title from the form.
Default: true
with-decline Boolean
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
only-required-fields Boolean
Set to `true` to display only required fields in the step-by-step form, hiding all optional fields.
Default: false
allow-to-resubmit Boolean
Set `false` to disallow user to re-submit the form.
Default: true
signature String
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.
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`.
reuse-signature Boolean
Set `false` to not reuse the signature in the second signature field and collect a new one.
Default: true
allow-typed-signature Boolean
Set `false` to disallow users to type their signature.
Default: true
completed-redirect-url String
URL to redirect to after the submission completion.
Example: https://docuseal.com/success
completed-message Object
Message displayed after the form completion.
title String
Message title.
Example: Documents have been signed!
body String
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
values Object
Pre-assigned values for form fields.
Example: { 'First Name': 'Jon', 'Last Name': 'Doe' }
external-id String
Your application-specific unique string key to identify signer within your app.
metadata Object
Metadata object with additional signer information.
Example: { customData: 'custom value' }
readonly-fields Array
List of read-only fields.
Example: ['First Name','Last Name']
custom-css String
Custom CSS styles to be applied to the form.
Example: #submit_form_button { background-color: #d9d9d9; }
@init Function
Function to be called on initializing the form component.
Example: onFormLoad
@load Function
Function to be called on loading the form data.
Example: onFormLoad
@complete Function
Function to be called after the form completion.
Example: onFormComplete
@decline Function
Function to be called after the form decline.
Example: onFormDecline