Embedded Signing Form | Zignature Docs

Signing Form Form Builder

This component enables seamless integration of a signing form within any section of your website or application. It offers compatibility with JS+HTML, React, Vue, and Angular, providing you with versatile options for integration.

HTML + JavaScript

<!-- Include the Zignature embed script -->
<script src="https://cdn.zignature.io/js/form.js"></script>

<zignature-form
  id="zignatureForm"
  data-src="https://app.zignature.io/d/{{ template_slug }}"
  data-email="{{ signer_email }}">
</zignature-form>

<script>
  window.zignatureForm.addEventListener('completed', (e) => {
    console.log(e.detail)
  })
</script>

import React from "react"
import { ZignatureForm } from '@zignature/react'

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

<template>
  <ZignatureForm
    :src="'https://app.zignature.io/d/LEVGR9rhZYf86M'"
    :email="'signer@example.com'"
    @completed="onCompleted"
  />
</template>

<script setup>
import { ZignatureForm } from '@zignature/vue'

const onCompleted = (data) => {
  console.log(data)
}
</script>

import { Component } from '@angular/core';
import { ZignatureFormModule } from '@zignature/angular';

@Component({
  selector: 'app-signing',
  standalone: true,
  imports: [ZignatureFormModule],
  template: `
    <zignature-form
      [src]="'https://app.zignature.io/d/LEVGR9rhZYf86M'"
      [email]="'signer@example.com'"
      (completed)="onCompleted($event)">
    </zignature-form>
  `
})
export class SigningComponent {
  onCompleted(data: any) {
    console.log(data);
  }
}

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-token String

JSON Web Token (JWT HS256) with a payload signed using the API key. JWT can be generated only on the backend.

data-previewBoolean

Show form in preview mode without ability to submit it.

Default: false

data-expandBoolean

Expand form on open.

Default: true

data-minimizeBoolean

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

Default: false

data-order-as-on-pageBoolean

Order form fields based on their position on the pages.

Default: false

data-logoString

Public logo image URL to use in the signing form.

data-languageString

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.

data-i18nString

JSON encoded string that contains i18n keys to replace the default UI text with custom values.

Default: {}

data-go-to-lastBoolean

Navigate to the last unfinished step.

Default: true

data-skip-fieldsBoolean

Allow skipping form fields.

Default: false

data-autoscroll-fieldsBoolean

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

Default: true

data-send-copy-emailBoolean

Set false to disable automatic email sending with signed documents to the signers.

Default: true

data-with-titleBoolean

Set false to remove the document title from the form.

Default: true

data-with-declineBoolean

Set true to display the decline button in the form.

Default: false

data-with-field-namesBoolean

Set false to hide field names. Hiding field names can be useful when they are not in a human-readable format.

Default: true

data-with-field-placeholderBoolean

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

Default: false

data-with-download-buttonBoolean

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

Default: true

data-with-send-copy-buttonBoolean

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

Default: true

data-with-complete-buttonBoolean

Set true to display the complete button in the form header.

Default: false

data-only-required-fieldsBoolean

Set to true to display only required fields in the step-by-step form, hiding all optional fields.

Default: false

data-allow-to-resubmitBoolean

Set false to disallow users to re-submit the form.

Default: true

data-allow-typed-signatureBoolean

Set false to disallow users to type their signature.

Default: true

data-signatureString

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.

data-remember-signatureBoolean

Whether the signature should be remembered for future use. Remembered signatures are stored in the signer's browser local storage.

data-reuse-signatureBoolean

Set false to not reuse the signature in the second signature field and collect a new one.

Default: true

data-background-colorString

Form background color. Only HEX color codes are supported.

Example: #d9d9d9

data-valuesObject

Pre-assigned values for form fields.

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

data-external-idString

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

data-metadataObject

Signer metadata Object in JSON format.

Example: {"customData":"customValue"}

data-readonly-fieldsString

Comma separated read-only field names.

Example: First Name,Last Name

data-completed-redirect-urlString

URL to redirect to after the submission completion.

Example: https://yourapp.com/success

data-completed-message-titleString

Message title displayed after the form completion.

Example: Documents have been completed

data-completed-message-bodyString

Message body displayed after the form completion.

Example: If you have any questions, please contact us.

data-completed-button-titleString

Button title displayed after the form completion.

Example: Go Back

data-completed-button-urlString

URL of the button displayed after the form completion.

Example: https://example.com

data-custom-cssString

Custom CSS styles to be applied to the form.

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

Callbacks

init Event

Custom event triggered on initializing the form component.

document.querySelector('zignature-form').addEventListener('init', () => console.log('init'))

load Event

Custom event triggered on loading the form data.

document.querySelector('zignature-form').addEventListener('load', (e) => e.detail)

completed Event

Custom event triggered after form completion. The event detail contains the submission data including signed document URLs.

document.querySelector('zignature-form').addEventListener('completed', (e) => e.detail)

declined Event

Custom event triggered after form decline. Only fires when data-with-decline is set to true.

document.querySelector('zignature-form').addEventListener('declined', (e) => e.detail)

Live Example

Interactive live preview of the Zignature embedded signing form. This is the actual embed component running from app.zignature.io.

Fill in your details

Non-Disclosure Agreement

Sent by Acme Corp • 3 pages • Expires Dec 31, 2026

Full Name *

Email *

Company

Title

Date

Signature *

Live embed will appear here once app.zignature.io is deployed. This is a visual preview of the signing experience.

Related Guides

Attributes

Callbacks