mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-26 09:32:37 +02:00
1077 lines
129 KiB
HTML
1077 lines
129 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-help/New-Document/request-signatures" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.9.2">
|
||
<title data-rh="true">Request signatures | OpenSign™</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docs.opensignlabs.com/img/docusaurus-social-card.png"><meta data-rh="true" name="twitter:image" content="https://docs.opensignlabs.com/img/docusaurus-social-card.png"><meta data-rh="true" property="og:url" content="https://docs.opensignlabs.com/docs/help/New-Document/request-signatures"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Request signatures | OpenSign™"><meta data-rh="true" name="description" content="Interface Overview"><meta data-rh="true" property="og:description" content="Interface Overview"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.opensignlabs.com/docs/help/New-Document/request-signatures"><link data-rh="true" rel="alternate" href="https://docs.opensignlabs.com/docs/help/New-Document/request-signatures" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.opensignlabs.com/docs/help/New-Document/request-signatures" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Create New OpenSign Document","item":"https://docs.opensignlabs.com/docs/category/create-new-opensign-document"},{"@type":"ListItem","position":2,"name":"Request signatures","item":"https://docs.opensignlabs.com/docs/help/New-Document/request-signatures"}]}</script><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="OpenSign™ RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="OpenSign™ Atom Feed"><link rel="stylesheet" href="/assets/css/styles.03fa8acf.css">
|
||
<script src="/assets/js/runtime~main.93dafb88.js" defer="defer"></script>
|
||
<script src="/assets/js/main.bbcaf299.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<svg style="display: none;"><defs>
|
||
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
|
||
</defs></svg>
|
||
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_mb4j" style="background-color:#cae4fa;color:#091E42" role="banner"><div class="content_knG7 announcementBarContent_xLdY">Help use spread the word - ⭐ OpenSign on <a target="_blank" rel="noopener" href="https://github.com/opensignlabs/opensign">GitHub</a></div></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.png" alt="OpenSign™ Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.png" alt="OpenSign™ Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">OpenSign™</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/help/intro">Help</a><a class="navbar__item navbar__link" href="/docs/API-docs/v1.2">APIs</a><a class="navbar__item navbar__link" href="/docs/contribute/CODE_OF_CONDUCT">Contribute</a><a href="https://www.opensignlabs.com/plans-pricing" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Cloud Pricing<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a class="navbar__item navbar__link" href="/docs/self-host/intro">Self-host</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/opensignlabs/opensign" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/help/intro"><span title="Intro" class="linkLabel_WmDU">Intro</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--active" href="/docs/category/create-new-opensign-document"><span title="Create New OpenSign Document" class="categoryLinkLabel_W154">Create New OpenSign Document</span></a><button aria-label="Collapse sidebar category 'Create New OpenSign Document'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/sign-yourself"><span title="Sign your-self" class="linkLabel_WmDU">Sign your-self</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/help/New-Document/request-signatures"><span title="Request signatures" class="linkLabel_WmDU">Request signatures</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/widgets"><span title="Widgets in OpenSign" class="linkLabel_WmDU">Widgets in OpenSign</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/edit-document-before-sending"><span title="Editing Your Document Before Sending" class="linkLabel_WmDU">Editing Your Document Before Sending</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/enforce-email-verification"><span title="Enforce email OTP verification" class="linkLabel_WmDU">Enforce email OTP verification</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/conditional_logic"><span title="Conditional logic" class="linkLabel_WmDU">Conditional logic</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/New-Document/guestsigning"><span title="Guest signing flow" class="linkLabel_WmDU">Guest signing flow</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/manage-docs-using-opensign-drive"><span title="Manage Docs using OpenSign™ Drive" class="categoryLinkLabel_W154">Manage Docs using OpenSign™ Drive</span></a><button aria-label="Expand sidebar category 'Manage Docs using OpenSign™ Drive'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/documents"><span title="Documents" class="categoryLinkLabel_W154">Documents</span></a><button aria-label="Expand sidebar category 'Documents'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/templates"><span title="Templates" class="categoryLinkLabel_W154">Templates</span></a><button aria-label="Expand sidebar category 'Templates'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/settings"><span title="Settings" class="categoryLinkLabel_W154">Settings</span></a><button aria-label="Expand sidebar category 'Settings'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/user-menu"><span title="User Menu" class="categoryLinkLabel_W154">User Menu</span></a><button aria-label="Expand sidebar category 'User Menu'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/category/faqs"><span title="FAQs" class="categoryLinkLabel_W154">FAQs</span></a><button aria-label="Expand sidebar category 'FAQs'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_xLCN"><div class="docItemContainer_jfFK"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/docs/category/create-new-opensign-document"><span>Create New OpenSign Document</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Request signatures</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><div class="row"><div class="col col--12 markdown"><header><h1>Request signatures using OpenSign™</h1></header>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="interface-overview">Interface Overview<a href="#interface-overview" class="hash-link" aria-label="Direct link to Interface Overview" title="Direct link to Interface Overview" translate="no"></a></h2>
|
||
<p>The OpenSign™ Request signatures interface is designed to streamline the process of creating, preparing, and sending documents for electronic signature.</p>
|
||
<h1>How to Create and Send a Document for Signature with OpenSign™</h1>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-1-begin-new-document-creation">Step 1: Begin New Document Creation<a href="#step-1-begin-new-document-creation" class="hash-link" aria-label="Direct link to Step 1: Begin New Document Creation" title="Direct link to Step 1: Begin New Document Creation" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>Navigate to Request Signatures form</strong>: Start by navigating to 'Request Signatures' from the main menu to initiate the creation of a document for signatures.</li>
|
||
</ul>
|
||
<img width="866" alt="requets signature" src="https://github.com/user-attachments/assets/f3edeafa-66d1-416a-854e-ce666f27e7b7">
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="uploading-your-document">Uploading Your Document<a href="#uploading-your-document" class="hash-link" aria-label="Direct link to Uploading Your Document" title="Direct link to Uploading Your Document" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[1] Choose File</strong>: Once the "Request signature" form opens, click "Choose file" button to select and upload the document file from your computer that needs to be signed. Currently you can upload only 1 file at a time but you can add additional documents by clicking "Add pages" in the next step.</li>
|
||
<li class=""><strong>[2] Choose File from Dropbox</strong>: Click the dropbox icon to select the document file from your dropbox account.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="entering-document-details-and-signers">Entering Document Details And Signers<a href="#entering-document-details-and-signers" class="hash-link" aria-label="Direct link to Entering Document Details And Signers" title="Direct link to Entering Document Details And Signers" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[3] Title</strong> <em>(Required)</em>: Input the title of your document. This identifier will be visible to signers and in your document management.</li>
|
||
<li class=""><strong>[4] Signers</strong>: Use the dropdown to select existing signers or use the addition button to add a new signer who needs to sign the document. (Here, add the signer's details such as name, email, and phone number).</li>
|
||
<li class=""><strong>[5] Note</strong>: Optionally add a note to give context or instructions regarding the document.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="organizing-your-document">Organizing Your Document<a href="#organizing-your-document" class="hash-link" aria-label="Direct link to Organizing Your Document" title="Direct link to Organizing Your Document" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[6] Folder</strong>: Select a folder where you want the document to be stored, or leave it to default to the 'Root' folder. You can browse your documents in a beautiful explorer view by navigating to "OpenSign™ Drive".</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="set-the-sending-order">Set the sending order<a href="#set-the-sending-order" class="hash-link" aria-label="Direct link to Set the sending order" title="Direct link to Set the sending order" translate="no"></a></h3>
|
||
<img width="866" alt="request signature2" src="https://github.com/user-attachments/assets/f2e07e62-5a46-480d-b9a9-94f406805ce6">
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>[7] Send in Order</strong></p>
|
||
<p><strong>If you choose:</strong></p>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Yes</strong>: Selecting this option will send the signing request to the first signer initially. Once the first signer completes their part, the next signer in the sequence will receive the request. This process continues until all signers have signed the document. This method ensures that the document is signed in a specific order.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>No</strong>: Selecting this option will send the signing links to all signers simultaneously. Every signer can sign the document at their convenience, regardless of whether other signers have completed their signatures. This method is faster but does not enforce any signing order among the participants.
|
||
Select the option that best suits the needs of your document processing.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Enforce strict order</strong>: When this feature is enabled, signers must sign the document strictly in the predefined order. A signer assigned to the second position cannot sign the document until the first signer has completed their signing process.
|
||
If a subsequent signer attempts to sign the document before the previous signer has signed, an error message will be displayed, and the document signing process cannot be completed.</p>
|
||
<img width="866" alt="Enforce strict order" src="https://github.com/user-attachments/assets/79876739-a8a8-4597-bd67-a6845761ec63">
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="setting-the-time-frame">Setting the Time Frame<a href="#setting-the-time-frame" class="hash-link" aria-label="Direct link to Setting the Time Frame" title="Direct link to Setting the Time Frame" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>Time To Complete (Days)</strong> <em>(Required)</em>: <strong>[8]</strong> Specify the number of days the signers have to complete the signatures. After that, the document will no longer be available for signing.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="setting-bcc-and-cc">Setting BCC and CC<a href="#setting-bcc-and-cc" class="hash-link" aria-label="Direct link to Setting BCC and CC" title="Direct link to Setting BCC and CC" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>BCC</strong>: <strong>[9]</strong> The BCC (Blind Carbon Copy) feature allows users to receive document completion emails at specified email addresses.
|
||
You can add multiple contacts in the BCC field to notify several recipients.
|
||
You can either:
|
||
Click "Add New" to enter a new email contact, or
|
||
Select from existing contacts using the dropdown list.</li>
|
||
<li class=""><strong>CC</strong>: <strong>[10]</strong> The CC (Carbon Copy) feature allows users to receive document completion emails at specified email addresses.
|
||
You can add multiple contacts in the CC field to notify several recipients.
|
||
You can either:
|
||
Click "Add New" to enter a new email contact, or
|
||
Select from existing contacts using the dropdown list.</li>
|
||
</ul>
|
||
<p><strong>Merge Certificate to PDF</strong> [11]:</p>
|
||
<ul>
|
||
<li class=""><strong>Yes</strong>: This will ensure that the completion certificate is included in the final PDF document. However, please note that once merged, the certificate cannot be separated from the main document.</li>
|
||
<li class=""><strong>No</strong>: If you choose not to merge, the completion certificate will be provided as a separate PDF file along with the signed document.
|
||
This feature only available for the paid users.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="auto-reminder">Auto reminder<a href="#auto-reminder" class="hash-link" aria-label="Direct link to Auto reminder" title="Direct link to Auto reminder" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[12]</strong> Once you enable the auto reminder, a text field will appear allowing you to set the reminder for a specific number of days.</li>
|
||
<li class=""><strong>Remind once in every (Days)</strong>: You can specify the reminder interval in days (e.g., every 1 or every 2 days).
|
||
Note: You can set a maximum of 15 reminders. For example, if the document completion time is 16 days and you try to schedule a reminder every day, the system will not allow it, as the reminder limit would be exceeded.
|
||
This feature only available for the paid users.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="security-setting">Security Setting<a href="#security-setting" class="hash-link" aria-label="Direct link to Security Setting" title="Direct link to Security Setting" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Enable OTP Verification</strong> [13] :</p>
|
||
<ul>
|
||
<li class="">If set to "Yes," the signer will be required to complete email OTP verification before viewing and signing the document.</li>
|
||
<li class="">If "Enable OTP Verification" is set to "No," the signer will not be prompted for OTP verification during the signing process.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>Note: This feature is available exclusively on paid plans.</p>
|
||
<ul>
|
||
<li class=""><strong>Allow offline signing</strong> :
|
||
<strong>[14]</strong> Choose whether signers can submit a copy of this document signed using an external tool for owner review.<!-- -->
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Yes</strong>: Signers will see a “Sign Offline” option, allowing them to upload an externally signed PDF and submit it to the document owner for approval.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>On Approval: Once the owner approves the submission, the signer’s signing process will be marked as completed. After the document is approved by the owner, a notification email will be sent to the signer confirming that the document has been approved and their signing process is complete. At the same time, a request signature email will be triggered and sent to the next signer in the signing order.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>On Declined: If the document is incorrectly filled out or improperly formatted, the owner can decline it and add comments. The signer can then use the same signing link that was initially shared to them to either re-upload a corrected offline file or continue the process using OpenSign’s online signing interface.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>No</strong>: Signers can only sign within the app. The Sign Offline option will be hidden.</p>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>This setting defaults to your account preference under Preferences and is available on paid plans.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="enable-tour">Enable tour:<a href="#enable-tour" class="hash-link" aria-label="Direct link to Enable tour:" title="Direct link to Enable tour:" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[15]</strong> If set to "Yes," the signer will see the tour guide while signing the document. If your signer is familiar with OpenSign and you prefer not to display the tour guide, you can select "No," and the tour guide will not be shown to your signers.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="notify-on-signatures">Notify on signatures:<a href="#notify-on-signatures" class="hash-link" aria-label="Direct link to Notify on signatures:" title="Direct link to Notify on signatures:" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[16]</strong> If set to "Yes," the document owner will receive an email notification each signer completes their signature.
|
||
Note: This feature is available exclusively on paid plans.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="allow-modifications">allow modifications:<a href="#allow-modifications" class="hash-link" aria-label="Direct link to allow modifications:" title="Direct link to allow modifications:" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[17]</strong> If set to Yes, the signer will be allowed to make modifications to the document during the signing process. However, they cannot edit or remove any fields that were already placed by the document owner. They can only add basic fields such as signature, stamp, initials, text, and cells.</li>
|
||
</ul>
|
||
<p>If both Allow Modification and Enable OTP are set to Yes, the signer will still not be able to edit or delete existing fields, but will gain access to additional advanced fields to add during signing. These include: signature, stamp, initials, name, job title, company, text, cells, and email.</p>
|
||
<p>Note: This feature is available exclusively on paid plans.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="redirect-url">Redirect url:<a href="#redirect-url" class="hash-link" aria-label="Direct link to Redirect url:" title="Direct link to Redirect url:" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[18]</strong> After signing the document and upon its completion, the signer will be redirected to the specified URL.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="pen-colors">Pen colors:<a href="#pen-colors" class="hash-link" aria-label="Direct link to Pen colors:" title="Direct link to Pen colors:" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>[19]</strong> Choose the pen color for signing the document. The selected color will be available during the signing process. OpenSign currently supports red, blue, and black pen colors.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-2-proceed-to-document-creation-panel">Step 2: Proceed to Document Creation Panel<a href="#step-2-proceed-to-document-creation-panel" class="hash-link" aria-label="Direct link to Step 2: Proceed to Document Creation Panel" title="Direct link to Step 2: Proceed to Document Creation Panel" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>Next</strong>: Once all the necessary fields are filled, click this button to proceed to create the document for signing.</li>
|
||
<li class=""><strong>Cancel</strong>: If you need to start over or make changes, click this button to clear the form.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-3-document-creation">Step 3: Document Creation<a href="#step-3-document-creation" class="hash-link" aria-label="Direct link to Step 3: Document Creation" title="Direct link to Step 3: Document Creation" translate="no"></a></h3>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="prefill-widgets">Prefill Widgets<a href="#prefill-widgets" class="hash-link" aria-label="Direct link to Prefill Widgets" title="Direct link to Prefill Widgets" translate="no"></a></h3>
|
||
<p>The <strong>Prefill Widgets</strong> feature lets document creators prefill specific fields before sending a document for signature. This ensures that important details (such as date, name, email, images, checkboxes, radio buttons, or custom text) are already completed when recipients receive the document. By default, prefilled data cannot be edited by signers.</p>
|
||
<img width="866" alt="Prfill" src="https://github.com/user-attachments/assets/4794b2a9-acc0-4ef8-8110-076f0d90cc57">
|
||
<hr>
|
||
<p><strong>✨ Key Benefits</strong></p>
|
||
<ul>
|
||
<li class="">✅ Save time by auto-filling repetitive information.</li>
|
||
<li class="">✅ Ensure accuracy for critical fields (e.g., company name, contract number).</li>
|
||
<li class="">✅ Maintain consistency across multiple signers and templates.</li>
|
||
<li class="">✅ Reduce signer effort for a smoother signing experience.</li>
|
||
</ul>
|
||
<hr>
|
||
<p><strong>🛠️ How It Works</strong></p>
|
||
<ol>
|
||
<li class="">
|
||
<p><strong>Add Widgets to the Document</strong></p>
|
||
<ul>
|
||
<li class="">Open the right-side panel, select <strong>Prefill Widgets</strong>, then drag and drop the required widgets (Text, Date, Checkbox, Dropdown, Image, etc.) onto the document.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Enter Prefill Value</strong></p>
|
||
<ul>
|
||
<li class="">Provide the default value (e.g., <em>"Company: OpenSign Labs"</em>, <em>Date: 30/09/2025</em>).</li>
|
||
<li class="">For option-based widgets (Dropdown, Radio, Checkbox), choose the option to be prefilled.</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
<hr>
|
||
<p><strong>📋 Supported Widgets for Prefill</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Text Field</strong> – Names, job titles, company names, contract IDs</li>
|
||
<li class=""><strong>Date Field</strong> – Default signing date or contract start date</li>
|
||
<li class=""><strong>Dropdown</strong> – Preselect an option</li>
|
||
<li class=""><strong>Radio Button</strong> – Prefill with a selected choice</li>
|
||
<li class=""><strong>Checkbox</strong> – Prefill as checked or unchecked</li>
|
||
<li class=""><strong>Image</strong> – Insert a default image (e.g., logo or stamp)</li>
|
||
<li class=""><strong>Draw</strong> – Allows the user to draw directly in this widget; use it when a prefill drawing is required.</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="signersrecipients">Signers/Recipients<a href="#signersrecipients" class="hash-link" aria-label="Direct link to Signers/Recipients" title="Direct link to Signers/Recipients" translate="no"></a></h2>
|
||
<p>Below the <strong>Prefill</strong> section, you'll find the list of signers that were added while creating the document. From this panel, you can select a recipient to assign widgets or use the <strong>Add Recipient</strong> option to include additional signers.</p>
|
||
<p>Each recipient can be assigned one of the following roles:</p>
|
||
<p><strong>Signer</strong>: If the role is selected as Signer, the signer must fill in all required fields while signing the document before they can complete the signing process.</p>
|
||
<p><strong>Viewer</strong>: If the role is selected as Viewer, widgets cannot be assigned to that user. The Viewer role only allows the user to view the document.</p>
|
||
<p><strong>Approver</strong>: If the role is selected as Approver, it works similarly to the Signer role. However, the main difference is that the Approver role does not require a signature widget. The approver can approve the document even if no widgets are assigned.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="access-code">Access code<a href="#access-code" class="hash-link" aria-label="Direct link to Access code" title="Direct link to Access code" translate="no"></a></h2>
|
||
<p>The <strong>Access Code</strong> feature in OpenSign adds an extra layer of security to your documents by requiring recipients to enter a unique access code before they can view and sign a document. This feature helps ensure that only authorized recipients can access sensitive documents, even if the signing link is accidentally shared or intercepted.</p>
|
||
<img width="866" alt="Access code" src="https://github.com/user-attachments/assets/e227e069-ee56-41ee-832d-b2c210cd3d63">
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-the-access-code-works">How the Access Code Works<a href="#how-the-access-code-works" class="hash-link" aria-label="Direct link to How the Access Code Works" title="Direct link to How the Access Code Works" translate="no"></a></h3>
|
||
<ol>
|
||
<li class="">
|
||
<p>The document owner can enable <strong>Access Code</strong> protection by clicking the <strong>Lock</strong> icon next to the signer's details. This opens the <strong>Access Code</strong> dialog, where the owner can enter a unique <strong>6-digit numeric access code</strong> (for example, <code>809966</code>). After entering the code, click <strong>Save</strong> to assign it to the signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Send the document for signature.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>The signer receives an email invitation containing the document signing link. Alternatively, the document owner can share the signing link manually through another secure communication channel, such as SMS, a messaging application, or email.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>When the signer opens the document signing link, they are prompted to enter the assigned <strong>6-digit access code</strong> before they can access the document. The signer must obtain this access code directly from the document owner, who should share it using a separate and secure communication channel (such as a phone call, SMS, or messaging application).</p>
|
||
</li>
|
||
<li class="">
|
||
<p>If the signer enters the correct access code, the document opens and they can proceed with reviewing and signing it.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>If the signer enters an incorrect access code, access to the document is denied. The signer must enter the correct <strong>6-digit numeric access code</strong> provided by the document owner to continue.</p>
|
||
</li>
|
||
</ol>
|
||
<div><div style="width:640px;height:360px"></div></div>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="add-widgets-for-signers">Add Widgets for Signers<a href="#add-widgets-for-signers" class="hash-link" aria-label="Direct link to Add Widgets for Signers" title="Direct link to Add Widgets for Signers" translate="no"></a></h2>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="1-add-a-signature-widget">1. Add a Signature Widget<a href="#1-add-a-signature-widget" class="hash-link" aria-label="Direct link to 1. Add a Signature Widget" title="Direct link to 1. Add a Signature Widget" translate="no"></a></h2>
|
||
<p>Once your document is loaded in the document creation panel, you'll need to add a signature widget for each signer. Select the signer from the right side panel, click on the signature widget, and position it where the signature is required.</p>
|
||
<img width="866" alt="create document" src="https://github.com/user-attachments/assets/fa5471f0-f7cb-4170-982f-cb213e4db13d">
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="signature-widget-options">Signature Widget Options<a href="#signature-widget-options" class="hash-link" aria-label="Direct link to Signature Widget Options" title="Direct link to Signature Widget Options" translate="no"></a></h3>
|
||
<p>After placing the Signature widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class=""><strong>Add Signer/Change Signer</strong>: Clicking the first icon on the signature widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</li>
|
||
<li class=""><strong>Copy Signature</strong>: Clicking on this option reveals the following choices.<!-- -->
|
||
<ul>
|
||
<li class="">All pages: It will copy the signature widget to all pages.</li>
|
||
<li class="">All pages but last: It will copy the signature widget to all pages except the last page.</li>
|
||
<li class="">All pages but first: It will copy the signature widget to all pages except the first page.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="add-other-widgets">Add Other Widgets<a href="#add-other-widgets" class="hash-link" aria-label="Direct link to Add Other Widgets" title="Direct link to Add Other Widgets" translate="no"></a></h2>
|
||
<p>Depending on your needs, you can include additional widgets such as:</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="2-stamp">2. Stamp<a href="#2-stamp" class="hash-link" aria-label="Direct link to 2. Stamp" title="Direct link to 2. Stamp" translate="no"></a></h2>
|
||
<p>The stamp widget allows signers to add a stamp to the document. Signers can upload their stamp during the signing process.</p>
|
||
<p>After placing the Stamp widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.</li>
|
||
<li class="">Add Signer/Change Signer: Clicking the second option on the stamp widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</li>
|
||
<li class="">Copy Stamp: Clicking on this option reveals the following choices.<!-- -->
|
||
<ul>
|
||
<li class="">All pages : It will copy the stamp widget to all pages.</li>
|
||
<li class="">All pages but last: It will copy the stamp widget to all pages except the last page.</li>
|
||
<li class="">All pages but first: It will copy the stamp widget to all pages except the first page.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="3-initials">3. Initials<a href="#3-initials" class="hash-link" aria-label="Direct link to 3. Initials" title="Direct link to 3. Initials" translate="no"></a></h2>
|
||
<p>The initials widget allows signers to add their initials to the document. During the signing process, signers can draw, upload, or type their initials.
|
||
After placing the Initials widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.</li>
|
||
<li class="">Add Signer/Change Signer: Clicking the first icon on the Initials widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</li>
|
||
<li class="">Copy Initials: Clicking on this option reveals the following choices.<!-- -->
|
||
<ul>
|
||
<li class="">All pages : It will copy the initials widget to all pages.</li>
|
||
<li class="">All pages but last: It will copy the initials widget to all pages except the last page.</li>
|
||
<li class="">All pages but first: It will copy the initials widget to all pages except the first page.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="4-text-input">4. Text Input<a href="#4-text-input" class="hash-link" aria-label="Direct link to 4. Text Input" title="Direct link to 4. Text Input" translate="no"></a></h2>
|
||
<p>The text input field is used to collect input from the signer. Signers can type their responses directly into this field. After placing the Text Input widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">Setting : The widget settings panel provides additional customization options, including:<!-- -->
|
||
<ul>
|
||
<li class="">Choosing a <strong>font color</strong></li>
|
||
<li class="">Setting the <strong>font size</strong></li>
|
||
<li class="">Marking the field as <strong>required</strong> or <strong>optional</strong></li>
|
||
<li class="">Providing a <strong>default value</strong></li>
|
||
<li class="">Making the field <strong>read-only</strong></li>
|
||
<li class=""><strong>Hide text with asterisks</strong>: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.</li>
|
||
<li class="">Adding a <strong>hint</strong>, which will be displayed on the widget for better clarity</li>
|
||
<li class=""><strong>Custom Validations</strong> are also supported, including:</li>
|
||
<li class="">Predefined formats like <strong>SSN</strong>, <strong>email</strong>, or <strong>numeric values</strong></li>
|
||
<li class="">Custom JavaScript validations using regular expressions<!-- -->
|
||
<ul>
|
||
<li class="">For example:</li>
|
||
<li class=""><code>^\d+$</code> – allows only digits</li>
|
||
<li class=""><code>^[A-Z]+$</code> – allows only uppercase letters</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>You can enter your regex pattern in the <strong>Validations</strong> field of the widget.<br>
|
||
<em>(Optional reference: <a href="https://www.w3schools.com/jsref/jsref_obj_regexp.asp" target="_blank" rel="noopener noreferrer" class="">JavaScript RegExp guide</a>)</em></p>
|
||
<p><strong>Conditional Logic</strong>:</p>
|
||
<p>The Text Input widget also supports <strong>Conditional Logic</strong>, allowing you to dynamically show, hide, make required, or make optional the field based on values entered or selected in other widgets.
|
||
Conditional Logic enables the Text Input widget to respond dynamically based on values from other widgets.</p>
|
||
<p>Depending on the configured rule, the Text Input field can:</p>
|
||
<ul>
|
||
<li class="">Show the field</li>
|
||
<li class="">Hide the field</li>
|
||
<li class="">Make the field Required</li>
|
||
<li class="">Make the field Optional</li>
|
||
</ul>
|
||
<img width="1897" alt="conditional logic textinput" src="https://github.com/user-attachments/assets/ef89a946-ba4a-4a14-a7ef-97b2a8119e6b">
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="supported-conditions">Supported Conditions<a href="#supported-conditions" class="hash-link" aria-label="Direct link to Supported Conditions" title="Direct link to Supported Conditions" translate="no"></a></h2>
|
||
<p>The <strong>Text Input</strong> widget supports conditional logic based on the values of other widgets.
|
||
The available conditions depend on the selected trigger widget.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="text-input">Text Input<a href="#text-input" class="hash-link" aria-label="Direct link to Text Input" title="Direct link to Text Input" translate="no"></a></h3>
|
||
<p>Supported operators:</p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong> If the value entered in <strong>TextInput1</strong> is equal to <strong>HR</strong>, then <strong>TextInput2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">text Condition: TextInput1 = HR </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show TextInput2</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="number">Number<a href="#number" class="hash-link" aria-label="Direct link to Number" title="Direct link to Number" translate="no"></a></h3>
|
||
<p>Supported operators:</p>
|
||
<ul>
|
||
<li class="">Equals</li>
|
||
<li class="">Does Not Equal</li>
|
||
</ul>
|
||
<p>Example
|
||
If <code>number_widget1 = 5</code>
|
||
Then <code>Show TextInput1</code></p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="any-condition-or">Any Condition (OR)<a href="#any-condition-or" class="hash-link" aria-label="Direct link to Any Condition (OR)" title="Direct link to Any Condition (OR)" translate="no"></a></h3>
|
||
<p>When <strong>Any Condition (OR)</strong> is selected, the configured action is performed if <strong>at least one</strong> of the specified conditions is satisfied.</p>
|
||
<p><strong>Example</strong></p>
|
||
<p>text Condition 1: Number Field = 10 OR Condition 2: Checkbox = Checked</p>
|
||
<p>Action:</p>
|
||
<p>Show TextInput1</p>
|
||
<p><strong>TextInput1</strong> is displayed if either the Number field equals <strong>10</strong> or the Checkbox is checked.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no"></a></h2>
|
||
<table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td><strong>Trigger Widget</strong></td><td>Number</td></tr><tr><td><strong>Condition</strong></td><td>Equals</td></tr><tr><td><strong>Condition Value</strong></td><td>5</td></tr><tr><td><strong>Condition 2 checkbox</strong></td><td>checked</td></tr><tr><td><strong>Action</strong></td><td>Show TextInput1</td></tr></tbody></table>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>TextInput1</strong> widget becomes visible when <strong>either</strong> the Number field equals <strong>10</strong> <strong>or</strong> the Checkbox is checked.</p>
|
||
<div><div style="width:640px;height:360px"></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-conditional-logic-guides">Related Conditional Logic Guides<a href="#related-conditional-logic-guides" class="hash-link" aria-label="Direct link to Related Conditional Logic Guides" title="Direct link to Related Conditional Logic Guides" translate="no"></a></h3>
|
||
<p>The <strong>Text Input</strong> widget also supports Conditional Logic using the following trigger widgets:</p>
|
||
<ul>
|
||
<li class=""><strong>Number Widget</strong> - <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#number-widget-as-the-trigger" target="_blank" rel="noopener noreferrer" class="">Read more</a></li>
|
||
<li class=""><strong>Dropdown Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#dropdown-widget-as-the-trigger" target="_blank" rel="noopener noreferrer" class="">Read more</a></li>
|
||
<li class=""><strong>Checkbox Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#checkbox-widget-as-the-trigger" target="_blank" rel="noopener noreferrer" class="">Read more</a></li>
|
||
<li class=""><strong>Radio Button Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#radio-button-as-the-trigger" target="_blank" rel="noopener noreferrer" class="">Read more</a></li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="additional-widget-options">Additional Widget Options<a href="#additional-widget-options" class="hash-link" aria-label="Direct link to Additional Widget Options" title="Direct link to Additional Widget Options" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Add Signer / Change Signer</strong>: Click the first icon on the Text Input widget to assign the widget to a different signer. You can select an existing signer or add a new recipient.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Copy</strong>: Click the <strong>Copy</strong> icon to duplicate the Text Input widget.</p>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="5-number-widget">5. Number widget<a href="#5-number-widget" class="hash-link" aria-label="Direct link to 5. Number widget" title="Direct link to 5. Number widget" translate="no"></a></h2>
|
||
<p>The Number widget is used to collect numeric input from the signer. It accepts only numeric values, helping ensure data accuracy and consistency. The Number widget also supports formulas, allowing you to perform automatic calculations using values from other Number widgets. After placing the Number widget, you will see the following options:</p>
|
||
<ul>
|
||
<li class=""><strong>Settings</strong>: The widget settings panel provides additional customization options, including:<!-- -->
|
||
<ul>
|
||
<li class="">Choosing a <strong>font color</strong></li>
|
||
<li class="">Setting the <strong>font size</strong></li>
|
||
<li class="">Marking the field as <strong>required</strong> or <strong>optional</strong></li>
|
||
<li class="">Providing a <strong>default value</strong></li>
|
||
<li class="">Making the field <strong>read-only</strong></li>
|
||
<li class="">Adding a <strong>placeholder</strong> to guide the signer on the expected input</li>
|
||
<li class="">Assigning a unique <strong>Name</strong> to the widget. This name is used when referencing the widget in formulas.<!-- -->
|
||
<ul>
|
||
<li class="">Example:<!-- -->
|
||
<ul>
|
||
<li class=""><code>number-1</code></li>
|
||
<li class=""><code>subtotal</code></li>
|
||
<li class=""><code>tax</code></li>
|
||
<li class=""><code>grand_total</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">Defining a <strong>Formula</strong> to automatically calculate values using other Number widgets.<!-- -->
|
||
<ul>
|
||
<li class="">Example:<!-- -->
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">{{quantity}} * {{price}}</span><br></span></code></pre></div></div>
|
||
</li>
|
||
<li class="">Supported mathematical operators include:<!-- -->
|
||
<ul>
|
||
<li class=""><code>+</code> Addition</li>
|
||
<li class=""><code>-</code> Subtraction</li>
|
||
<li class=""><code>*</code> Multiplication</li>
|
||
<li class=""><code>/</code> Division</li>
|
||
<li class=""><code>%</code> Modulus (Remainder)</li>
|
||
<li class=""><code>()</code> Parentheses for grouping operations</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="conditional-logic"><strong>Conditional Logic</strong><a href="#conditional-logic" class="hash-link" aria-label="Direct link to conditional-logic" title="Direct link to conditional-logic" translate="no"></a></h3>
|
||
<p>The Number widget also supports <strong>Conditional Logic</strong>, allowing you to dynamically show, hide, make required, or make optional the field based on values entered or selected in other widgets.</p>
|
||
<p>Conditional Logic enables the Number widget to respond dynamically based on values from other widgets.</p>
|
||
<p>Depending on the configured rule, the Number widget can:</p>
|
||
<ul>
|
||
<li class="">Show the field</li>
|
||
<li class="">Hide the field</li>
|
||
<li class="">Make the field <strong>Required</strong></li>
|
||
<li class="">Make the field <strong>Optional</strong></li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="supported-conditions-1">Supported Conditions<a href="#supported-conditions-1" class="hash-link" aria-label="Direct link to Supported Conditions" title="Direct link to Supported Conditions" translate="no"></a></h2>
|
||
<p>The <strong>Number</strong> widget supports Conditional Logic based on the values of other widgets.</p>
|
||
<p>The available conditions depend on the selected trigger widget.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="text-input-1">Text Input<a href="#text-input-1" class="hash-link" aria-label="Direct link to Text Input" title="Direct link to Text Input" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If the value entered in <strong>TextInput1</strong> is equal to <strong>HR</strong>, then <strong>Number1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: TextInput1 = HR</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Number1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="number-1">Number<a href="#number-1" class="hash-link" aria-label="Direct link to Number" title="Direct link to Number" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If <strong>Number1</strong> equals <strong>10</strong>, then <strong>Number2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Number1 = 10</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Number2</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="any-condition-or-1">Any Condition (OR)<a href="#any-condition-or-1" class="hash-link" aria-label="Direct link to Any Condition (OR)" title="Direct link to Any Condition (OR)" translate="no"></a></h3>
|
||
<p>When <strong>Any Condition (OR)</strong> is selected, the configured action is performed when <strong>at least one</strong> of the configured conditions is satisfied.</p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="example-1">Example<a href="#example-1" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no"></a></h4>
|
||
<p><strong>Conditions</strong></p>
|
||
<ul>
|
||
<li class="">Number Field = <strong>10</strong></li>
|
||
<li class=""><strong>OR</strong></li>
|
||
<li class="">Checkbox = <strong>Checked</strong></li>
|
||
</ul>
|
||
<p><strong>Action</strong></p>
|
||
<p>Show <strong>Number1</strong></p>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>Number1</strong> widget is displayed when either of the following conditions is met:</p>
|
||
<ul>
|
||
<li class="">The signer enters <strong>10</strong> in the Number field.</li>
|
||
<li class="">The signer checks the Checkbox.</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="configuration-example">Configuration Example<a href="#configuration-example" class="hash-link" aria-label="Direct link to Configuration Example" title="Direct link to Configuration Example" translate="no"></a></h2>
|
||
<table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td><strong>Condition Type</strong></td><td>Any Condition (OR)</td></tr><tr><td><strong>Trigger Widget 1</strong></td><td>Number</td></tr><tr><td><strong>Condition</strong></td><td>Equals</td></tr><tr><td><strong>Condition Value</strong></td><td>10</td></tr><tr><td><strong>Trigger Widget 2</strong></td><td>Checkbox</td></tr><tr><td><strong>Condition</strong></td><td>Is Checked</td></tr><tr><td><strong>Action</strong></td><td>Show Number1</td></tr></tbody></table>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>Number1</strong> widget becomes visible when <strong>either</strong> the Number field equals <strong>10</strong> <strong>or</strong> the Checkbox is checked.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-conditional-logic-guides-1">Related Conditional Logic Guides<a href="#related-conditional-logic-guides-1" class="hash-link" aria-label="Direct link to Related Conditional Logic Guides" title="Direct link to Related Conditional Logic Guides" translate="no"></a></h3>
|
||
<p>The <strong>Number</strong> widget also supports Conditional Logic using the following trigger widgets:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Text Input</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#number-widget-triggered-by-a-text-input" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Dropdown Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#number-widget-triggered-by-a-dropdown" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Checkbox Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#number-widget-triggered-by-a-checkbox" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Radio Button Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#supported-operators-6" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Number Widget Triggered by Another Number Widget</strong> - <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#number-widget-triggered-by-another-number-widget" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="additional-widget-options-1">Additional Widget Options<a href="#additional-widget-options-1" class="hash-link" aria-label="Direct link to Additional Widget Options" title="Direct link to Additional Widget Options" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Add Signer / Change Signer</strong>: Click the first icon on the Number widget to assign the widget to a different signer. You can choose an existing signer or add a new recipient.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Copy</strong>: Click the <strong>Copy</strong> icon to duplicate the Number widget.</p>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="6-name">6. Name<a href="#6-name" class="hash-link" aria-label="Direct link to 6. Name" title="Direct link to 6. Name" translate="no"></a></h2>
|
||
<p>The name widget allows signers to add their name or any other text, functioning like a text field during the signing process. After placing the name widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p>Setting icon: By clicking on the option, you can set the color and font.</p>
|
||
<ul>
|
||
<li class=""><strong>Hide text with asterisks</strong>: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">
|
||
<p>Add Signer/Change Signer: Clicking the first icon on the Name widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Copy : Clicking on this you can duplicate the name widget.</p>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="7-job-title">7. Job title<a href="#7-job-title" class="hash-link" aria-label="Direct link to 7. Job title" title="Direct link to 7. Job title" translate="no"></a></h2>
|
||
<p>The Job title widget allows signers to add their Job title or any other text, functioning like a text field during the signing process. After placing the job title widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p>Setting icon: By clicking on the option, you can set the color and font.</p>
|
||
<ul>
|
||
<li class=""><strong>Hide text with asterisks</strong>: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">
|
||
<p>Add Signer/Change Signer: Clicking the first icon on the Job title widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Copy : Clicking on this you can duplicate the job title widget.</p>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="8-company">8. Company<a href="#8-company" class="hash-link" aria-label="Direct link to 8. Company" title="Direct link to 8. Company" translate="no"></a></h2>
|
||
<p>The company widget allows signers to add their company or any other text, functioning like a text field during the signing process. After placing the company widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p>Setting icon: By clicking on the option, you can set the color and font.</p>
|
||
<ul>
|
||
<li class=""><strong>Hide text with asterisks</strong>: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">
|
||
<p>Add Signer/Change Signer: Clicking the first icon on the Company widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Copy : Clicking on this you can duplicate the Company widget.</p>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="9-email">9. Email<a href="#9-email" class="hash-link" aria-label="Direct link to 9. Email" title="Direct link to 9. Email" translate="no"></a></h2>
|
||
<p>The email widget is used to enter an email address during the signing process. It only accepts input in a valid email format. If the signer enters invalid text, a validation error will occur, and the document cannot be completed until it's corrected. After placing the email widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p>Setting icon: By clicking on the option, you can set the color and font.</p>
|
||
<ul>
|
||
<li class=""><strong>Hide text with asterisks</strong>: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">
|
||
<p>Add Signer/Change Signer: Clicking the first icon on the Email widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Copy : Clicking on this you can duplicate the email widget.</p>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="10-date-widget">10. Date Widget<a href="#10-date-widget" class="hash-link" aria-label="Direct link to 10. Date Widget" title="Direct link to 10. Date Widget" translate="no"></a></h2>
|
||
<p>The <strong>Date widget</strong> allows signers to enter a date while signing the document. Once the widget is placed, you can configure its behavior using the available settings in the <strong>Widget Info</strong> panel.</p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="️-widget-options">⚙️ Widget Options<a href="#️-widget-options" class="hash-link" aria-label="Direct link to ⚙️ Widget Options" title="Direct link to ⚙️ Widget Options" translate="no"></a></h4>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Date Format</strong>: Choose the preferred date format (for example, <code>MM/dd/yyyy</code>, <code>dd-mm-yyyy</code>, or <code>dd/mm/yyyy</code>) from the Format dropdown. This determines how the date appears to the signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Set Date</strong>: This option allows the user to set a default date, which will be displayed while signing the document.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Signing Date</strong>: When selected, the date on which the signer signs the document will be automatically displayed in the Date widget.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Clear</strong>: Removes the selected date setting.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Date Range</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Min Date</strong>: Sets the earliest date the signer can select.</li>
|
||
<li class=""><strong>Max Date</strong>: Sets the latest date the signer can select.</li>
|
||
<li class="">Use <strong>Clear</strong> to remove the minimum or maximum date restrictions.</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Required / Optional</strong><br>
|
||
<!-- -->Mark the widget as <strong>Required</strong> if the signer must fill it in before completing the signing, or <strong>Optional</strong> if it is not mandatory.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Font Settings</strong>
|
||
Customize the <strong>font size</strong> and <strong>text color</strong> to match the document’s style.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Read Only</strong>
|
||
Enable this option to display a date that cannot be edited by the signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Save</strong>
|
||
Click <strong>Save</strong> to apply all selected settings to the Date widget.</p>
|
||
</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="11-cells">11. Cells<a href="#11-cells" class="hash-link" aria-label="Direct link to 11. Cells" title="Direct link to 11. Cells" translate="no"></a></h2>
|
||
<p>The <strong>Cells widget</strong> is ideal for documents that require input in a structured, table-like format, allowing the signer to fill in details within individual cells. After dragging and dropping the widget onto the document, you can adjust the number of cells by moving the <strong>blue marker</strong>.</p>
|
||
<img width="800" alt="Cells widget" src="https://github.com/user-attachments/assets/2a301776-5275-4daf-b361-fd48af2878fc">
|
||
<p>The widget settings panel provides additional customization options, including:</p>
|
||
<ul>
|
||
<li class="">Manually entering the <strong>number of cells</strong></li>
|
||
<li class="">Choosing a <strong>font color</strong></li>
|
||
<li class="">Setting the <strong>font size</strong></li>
|
||
<li class="">Marking the field as <strong>required</strong> or <strong>optional</strong></li>
|
||
<li class="">Providing a <strong>default value</strong></li>
|
||
<li class="">Making the field <strong>read-only</strong></li>
|
||
<li class=""><strong>Hide text with asterisks</strong>: **"which masks the entered text (*) to protect sensitive information while filling out the document. The final embedded document will also display the text as asterisks, keeping the actual value hidden.</li>
|
||
<li class="">Adding a <strong>hint</strong>, which will be displayed on the widget for better clarity</li>
|
||
</ul>
|
||
<p><strong>Custom Validations</strong> are also supported, including:</p>
|
||
<ul>
|
||
<li class="">Predefined formats like <strong>SSN</strong>, <strong>email</strong>, or <strong>numeric values</strong></li>
|
||
<li class="">Custom JavaScript validations using regular expressions</li>
|
||
</ul>
|
||
<p>For example:</p>
|
||
<ul>
|
||
<li class=""><code>^\d+$</code> – allows only digits</li>
|
||
<li class=""><code>^[A-Z]+$</code> – allows only uppercase letters</li>
|
||
</ul>
|
||
<p>You can enter your regex pattern in the <strong>Validations</strong> field of the widget.<br>
|
||
<em>(Optional reference: <a href="https://www.w3schools.com/jsref/jsref_obj_regexp.asp" target="_blank" rel="noopener noreferrer" class="">JavaScript RegExp guide</a>)</em></p>
|
||
<img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/dee17fe8-243b-4113-896a-00424d12ea8a">
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="12-checkbox">12. Checkbox<a href="#12-checkbox" class="hash-link" aria-label="Direct link to 12. Checkbox" title="Direct link to 12. Checkbox" translate="no"></a></h2>
|
||
<p>The checkbox widget is used to capture input in the form of a checkbox selection. Once you drop the checkbox widget, a popup will open where you can set the checkbox name and options. Additionally, there are a few options available such as setting the minimum and maximum checks, making the checkbox read-only, and hiding the label.</p>
|
||
<p><strong>Conditional Logic</strong></p>
|
||
<p>The <strong>Checkbox</strong> widget supports <strong>Conditional Logic</strong>, allowing you to dynamically show, hide, make required, or make optional the field based on values entered or selected in other widgets.</p>
|
||
<p>Conditional Logic enables the Checkbox widget to respond dynamically based on values from other widgets.</p>
|
||
<p>Depending on the configured rule, the Checkbox field can:</p>
|
||
<ul>
|
||
<li class="">Show the field</li>
|
||
<li class="">Hide the field</li>
|
||
<li class="">Make the field <strong>Required</strong></li>
|
||
<li class="">Make the field <strong>Optional</strong></li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="supported-conditions-2">Supported Conditions<a href="#supported-conditions-2" class="hash-link" aria-label="Direct link to Supported Conditions" title="Direct link to Supported Conditions" translate="no"></a></h2>
|
||
<p>The <strong>Checkbox</strong> widget supports Conditional Logic based on the values of other widgets.</p>
|
||
<p>The available conditions depend on the selected trigger widget.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="text-input-2">Text Input<a href="#text-input-2" class="hash-link" aria-label="Direct link to Text Input" title="Direct link to Text Input" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If the value entered in <strong>TextInput1</strong> is <strong>HR</strong>, then <strong>Checkbox1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: TextInput1 = HR</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Checkbox1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="number-2">Number<a href="#number-2" class="hash-link" aria-label="Direct link to Number" title="Direct link to Number" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If <strong>Number1</strong> equals <strong>10</strong>, then <strong>Checkbox1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Number1 = 10</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Checkbox1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="dropdown">Dropdown<a href="#dropdown" class="hash-link" aria-label="Direct link to Dropdown" title="Direct link to Dropdown" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If the selected value of <strong>Dropdown1</strong> is <strong>Manager</strong>, then <strong>Checkbox1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Dropdown1 = Manager</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Checkbox1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="checkbox">Checkbox<a href="#checkbox" class="hash-link" aria-label="Direct link to Checkbox" title="Direct link to Checkbox" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Is Checked</strong></li>
|
||
<li class=""><strong>Is Not Checked</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If <strong>Checkbox1</strong> is checked, then <strong>Checkbox2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Checkbox1 is Checked</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Checkbox2</span><br></span></code></pre></div></div>
|
||
<p>Another example:</p>
|
||
<p>If <strong>Checkbox1</strong> is <strong>not checked</strong>, then <strong>Checkbox2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Checkbox1 is Not Checked</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Checkbox2</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="radio-button">Radio Button<a href="#radio-button" class="hash-link" aria-label="Direct link to Radio Button" title="Direct link to Radio Button" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Is Checked</strong></li>
|
||
<li class=""><strong>Is Not Checked</strong></li>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If <strong>Radio Button1</strong> is checked, then <strong>Checkbox1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Radio Button1 is Checked</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Checkbox1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="any-condition-or-2">Any Condition (OR)<a href="#any-condition-or-2" class="hash-link" aria-label="Direct link to Any Condition (OR)" title="Direct link to Any Condition (OR)" translate="no"></a></h3>
|
||
<p>When <strong>Any Condition (OR)</strong> is selected, the configured action is performed when <strong>at least one</strong> of the configured conditions is satisfied.</p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="example-2">Example<a href="#example-2" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no"></a></h4>
|
||
<p><strong>Conditions</strong></p>
|
||
<ul>
|
||
<li class="">Number Field = <strong>10</strong></li>
|
||
<li class=""><strong>OR</strong></li>
|
||
<li class="">Checkbox = <strong>Checked</strong></li>
|
||
</ul>
|
||
<p><strong>Action</strong></p>
|
||
<p>Show <strong>Checkbox1</strong></p>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>Checkbox1</strong> widget is displayed when <strong>either</strong> of the following conditions is met:</p>
|
||
<ul>
|
||
<li class="">The signer enters <strong>10</strong> in the Number field.</li>
|
||
<li class="">The signer checks the Checkbox.</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="configuration-example-1">Configuration Example<a href="#configuration-example-1" class="hash-link" aria-label="Direct link to Configuration Example" title="Direct link to Configuration Example" translate="no"></a></h2>
|
||
<table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td><strong>Condition Type</strong></td><td>Any Condition (OR)</td></tr><tr><td><strong>Trigger Widget 1</strong></td><td>Number</td></tr><tr><td><strong>Condition</strong></td><td>Equals</td></tr><tr><td><strong>Condition Value</strong></td><td>10</td></tr><tr><td><strong>Trigger Widget 2</strong></td><td>Checkbox</td></tr><tr><td><strong>Condition</strong></td><td>Is Checked</td></tr><tr><td><strong>Action</strong></td><td>Show Checkbox1</td></tr></tbody></table>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>Checkbox1</strong> widget becomes visible when <strong>either</strong> the Number field equals <strong>10</strong> <strong>or</strong> the Checkbox is checked.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-conditional-logic-guides-2">Related Conditional Logic Guides<a href="#related-conditional-logic-guides-2" class="hash-link" aria-label="Direct link to Related Conditional Logic Guides" title="Direct link to Related Conditional Logic Guides" translate="no"></a></h3>
|
||
<p>The <strong>Checkbox</strong> widget also supports Conditional Logic using the following trigger widgets:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Text Input Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#dropdown-triggered-by-a-text-input" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Number Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#checkbox-triggered-by-a-number-widget" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Dropdown Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#checkbox-triggered-by-a-dropdown" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Radio Button Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#checkbox-triggered-by-a-radio-button" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Checkbox Triggered by Another Checkbox</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#checkbox-triggered-by-another-checkbox" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="additional-widget-options-2">Additional Widget Options<a href="#additional-widget-options-2" class="hash-link" aria-label="Direct link to Additional Widget Options" title="Direct link to Additional Widget Options" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Add Signer / Change Signer</strong>: Click the first icon on the Checkbox widget to assign the widget to a different signer. You can select an existing signer or add a new recipient.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Copy</strong>: Click the <strong>Copy</strong> icon to duplicate the Checkbox widget.</p>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="13-dropdown">13. Dropdown<a href="#13-dropdown" class="hash-link" aria-label="Direct link to 13. Dropdown" title="Direct link to 13. Dropdown" translate="no"></a></h2>
|
||
<p>Once you drop the dropdown widget, a popup will open where you can set the dropdown name and options. Additionally, there are a few options available such as setting a default value and marking the dropdown as required or optional.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="conditional-logic-1"><strong>Conditional Logic</strong><a href="#conditional-logic-1" class="hash-link" aria-label="Direct link to conditional-logic-1" title="Direct link to conditional-logic-1" translate="no"></a></h3>
|
||
<p>The <strong>Dropdown</strong> widget supports <strong>Conditional Logic</strong>, allowing you to dynamically show, hide, make required, or make optional the field based on values entered or selected in other widgets.</p>
|
||
<p>Conditional Logic enables the Dropdown widget to respond dynamically based on values from other widgets.</p>
|
||
<p>Depending on the configured rule, the Dropdown field can:</p>
|
||
<ul>
|
||
<li class="">Show the field</li>
|
||
<li class="">Hide the field</li>
|
||
<li class="">Make the field <strong>Required</strong></li>
|
||
<li class="">Make the field <strong>Optional</strong></li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="supported-conditions-3">Supported Conditions<a href="#supported-conditions-3" class="hash-link" aria-label="Direct link to Supported Conditions" title="Direct link to Supported Conditions" translate="no"></a></h2>
|
||
<p>The <strong>Dropdown</strong> widget supports Conditional Logic based on the values of other widgets.</p>
|
||
<p>The available conditions depend on the selected trigger widget.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="text-input-3">Text Input<a href="#text-input-3" class="hash-link" aria-label="Direct link to Text Input" title="Direct link to Text Input" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If the value entered in <strong>TextInput1</strong> is equal to <strong>HR</strong>, then <strong>Dropdown1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: TextInput1 = HR</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Dropdown1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="number-3">Number<a href="#number-3" class="hash-link" aria-label="Direct link to Number" title="Direct link to Number" translate="no"> </a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If <strong>Number1</strong> equals <strong>10</strong>, then <strong>Dropdown1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Number1 = 10</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Dropdown1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="dropdown-1">Dropdown<a href="#dropdown-1" class="hash-link" aria-label="Direct link to Dropdown" title="Direct link to Dropdown" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If the selected value of <strong>Dropdown1</strong> is <strong>Manager</strong>, then <strong>Dropdown2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Dropdown1 = Manager</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show Dropdown2</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="any-condition-or-3">Any Condition (OR)<a href="#any-condition-or-3" class="hash-link" aria-label="Direct link to Any Condition (OR)" title="Direct link to Any Condition (OR)" translate="no"></a></h3>
|
||
<p>When <strong>Any Condition (OR)</strong> is selected, the configured action is performed when <strong>at least one</strong> of the configured conditions is satisfied.</p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="example-3">Example<a href="#example-3" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no"></a></h4>
|
||
<p><strong>Conditions</strong></p>
|
||
<ul>
|
||
<li class="">Number Field = <strong>10</strong></li>
|
||
<li class=""><strong>OR</strong></li>
|
||
<li class="">Checkbox = <strong>Checked</strong></li>
|
||
</ul>
|
||
<p><strong>Action</strong></p>
|
||
<p>Show <strong>Dropdown1</strong></p>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>Dropdown1</strong> widget is displayed when <strong>either</strong> of the following conditions is met:</p>
|
||
<ul>
|
||
<li class="">The signer enters <strong>10</strong> in the Number field.</li>
|
||
<li class="">The signer checks the Checkbox.</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="configuration-example-2">Configuration Example<a href="#configuration-example-2" class="hash-link" aria-label="Direct link to Configuration Example" title="Direct link to Configuration Example" translate="no"></a></h2>
|
||
<table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td><strong>Condition Type</strong></td><td>Any Condition (OR)</td></tr><tr><td><strong>Trigger Widget 1</strong></td><td>Number</td></tr><tr><td><strong>Condition</strong></td><td>Equals</td></tr><tr><td><strong>Condition Value</strong></td><td>10</td></tr><tr><td><strong>Trigger Widget 2</strong></td><td>Checkbox</td></tr><tr><td><strong>Condition</strong></td><td>Is Checked</td></tr><tr><td><strong>Action</strong></td><td>Show Dropdown1</td></tr></tbody></table>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>Dropdown1</strong> widget becomes visible when <strong>either</strong> the Number field equals <strong>10</strong> <strong>or</strong> the Checkbox is checked.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-conditional-logic-guides-3">Related Conditional Logic Guides<a href="#related-conditional-logic-guides-3" class="hash-link" aria-label="Direct link to Related Conditional Logic Guides" title="Direct link to Related Conditional Logic Guides" translate="no"></a></h3>
|
||
<p>The <strong>Dropdown</strong> widget also supports Conditional Logic using the following trigger widgets:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Text input</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#dropdown-triggered-by-a-text-input" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Number</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#dropdown-triggered-by-a-number-widget" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Checkbox Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#dropdown-triggered-by-a-checkbox" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Radio Button Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#dropdown-triggered-by-a-radio-button" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Dropdown Triggered by Another Dropdown</strong> <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#dropdown-triggered-by-another-dropdown" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="additional-widget-options-3">Additional Widget Options<a href="#additional-widget-options-3" class="hash-link" aria-label="Direct link to Additional Widget Options" title="Direct link to Additional Widget Options" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Add Signer / Change Signer</strong>: Click the first icon on the Dropdown widget to assign the widget to a different signer. You can select an existing signer or add a new recipient.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Copy</strong>: Click the <strong>Copy</strong> icon to duplicate the Dropdown widget.</p>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="14-radio-button">14. Radio button<a href="#14-radio-button" class="hash-link" aria-label="Direct link to 14. Radio button" title="Direct link to 14. Radio button" translate="no"></a></h2>
|
||
<p>The radio button widget is used to capture input in the form of a radio button selection. Once you drop the radio button widget, a popup will open where you can set the radio button name and options. Additionally, there are a few options available such as setting a default value, making the radio button read-only, and hiding the label.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="conditional-logic-2"><strong>Conditional Logic</strong><a href="#conditional-logic-2" class="hash-link" aria-label="Direct link to conditional-logic-2" title="Direct link to conditional-logic-2" translate="no"></a></h3>
|
||
<p>The <strong>Radio Button</strong> widget supports <strong>Conditional Logic</strong>, allowing you to dynamically show, hide, make required, or make optional the field based on values entered or selected in other widgets.</p>
|
||
<p>Conditional Logic enables the Radio Button widget to respond dynamically based on values from other widgets.</p>
|
||
<p>Depending on the configured rule, the Radio Button field can:</p>
|
||
<ul>
|
||
<li class="">Show the field</li>
|
||
<li class="">Hide the field</li>
|
||
<li class="">Make the field <strong>Required</strong></li>
|
||
<li class="">Make the field <strong>Optional</strong></li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="supported-conditions-4">Supported Conditions<a href="#supported-conditions-4" class="hash-link" aria-label="Direct link to Supported Conditions" title="Direct link to Supported Conditions" translate="no"></a></h2>
|
||
<p>The <strong>Radio Button</strong> widget supports Conditional Logic based on the values of other widgets.</p>
|
||
<p>The available conditions depend on the selected trigger widget.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="text-input-4">Text Input<a href="#text-input-4" class="hash-link" aria-label="Direct link to Text Input" title="Direct link to Text Input" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If the value entered in <strong>TextInput1</strong> is <strong>HR</strong>, then <strong>RadioButton1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: TextInput1 = HR</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="number-4">Number<a href="#number-4" class="hash-link" aria-label="Direct link to Number" title="Direct link to Number" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If <strong>Number1</strong> equals <strong>10</strong>, then <strong>RadioButton1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Number1 = 10</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="dropdown-2">Dropdown<a href="#dropdown-2" class="hash-link" aria-label="Direct link to Dropdown" title="Direct link to Dropdown" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If the selected value of <strong>Dropdown1</strong> is <strong>Manager</strong>, then <strong>RadioButton1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Dropdown1 = Manager</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="checkbox-1">Checkbox<a href="#checkbox-1" class="hash-link" aria-label="Direct link to Checkbox" title="Direct link to Checkbox" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Is Checked</strong></li>
|
||
<li class=""><strong>Is Not Checked</strong></li>
|
||
</ul>
|
||
<p><strong>Example</strong></p>
|
||
<p>If <strong>Checkbox1</strong> is checked, then <strong>RadioButton1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Checkbox1 is Checked</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton1</span><br></span></code></pre></div></div>
|
||
<p>Another example:</p>
|
||
<p>If <strong>Checkbox1</strong> is <strong>not checked</strong>, then <strong>RadioButton1</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: Checkbox1 is Not Checked</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton1</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="radio-button-1">Radio Button<a href="#radio-button-1" class="hash-link" aria-label="Direct link to Radio Button" title="Direct link to Radio Button" translate="no"></a></h3>
|
||
<p><strong>Supported operators:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Is Checked</strong></li>
|
||
<li class=""><strong>Is Not Checked</strong></li>
|
||
<li class=""><strong>Equals</strong></li>
|
||
<li class=""><strong>Does Not Equal</strong></li>
|
||
</ul>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="example-1--using-is-checked">Example 1 – Using <strong>Is Checked</strong><a href="#example-1--using-is-checked" class="hash-link" aria-label="Direct link to example-1--using-is-checked" title="Direct link to example-1--using-is-checked" translate="no"></a></h4>
|
||
<p>If <strong>RadioButton1</strong> is selected, then <strong>RadioButton2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: RadioButton1 is Checked</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton2</span><br></span></code></pre></div></div>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="example-2--using-equals">Example 2 – Using <strong>Equals</strong><a href="#example-2--using-equals" class="hash-link" aria-label="Direct link to example-2--using-equals" title="Direct link to example-2--using-equals" translate="no"></a></h4>
|
||
<p>If the selected value of <strong>RadioButton1</strong> is <strong>Approved</strong>, then <strong>RadioButton2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: RadioButton1 = Approved</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton2</span><br></span></code></pre></div></div>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="example-3--using-does-not-equal">Example 3 – Using <strong>Does Not Equal</strong><a href="#example-3--using-does-not-equal" class="hash-link" aria-label="Direct link to example-3--using-does-not-equal" title="Direct link to example-3--using-does-not-equal" translate="no"></a></h4>
|
||
<p>If the selected value of <strong>RadioButton1</strong> is <strong>not</strong> <strong>Approved</strong>, then <strong>RadioButton2</strong> is displayed.</p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Condition: RadioButton1 Does Not Equal Approved</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Action: Show RadioButton2</span><br></span></code></pre></div></div>
|
||
<hr>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="any-condition-or-4">Any Condition (OR)<a href="#any-condition-or-4" class="hash-link" aria-label="Direct link to Any Condition (OR)" title="Direct link to Any Condition (OR)" translate="no"></a></h3>
|
||
<p>When <strong>Any Condition (OR)</strong> is selected, the configured action is performed when <strong>at least one</strong> of the configured conditions is satisfied.</p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="example-4">Example<a href="#example-4" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no"></a></h4>
|
||
<p><strong>Conditions</strong></p>
|
||
<ul>
|
||
<li class="">Number Field = <strong>10</strong></li>
|
||
<li class=""><strong>OR</strong></li>
|
||
<li class="">Checkbox = <strong>Checked</strong></li>
|
||
</ul>
|
||
<p><strong>Action</strong></p>
|
||
<p>Show <strong>RadioButton1</strong></p>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>RadioButton1</strong> widget is displayed when <strong>either</strong> of the following conditions is met:</p>
|
||
<ul>
|
||
<li class="">The signer enters <strong>10</strong> in the Number field.</li>
|
||
<li class="">The signer checks the Checkbox.</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="configuration-example-3">Configuration Example<a href="#configuration-example-3" class="hash-link" aria-label="Direct link to Configuration Example" title="Direct link to Configuration Example" translate="no"></a></h2>
|
||
<table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td><strong>Condition Type</strong></td><td>Any Condition (OR)</td></tr><tr><td><strong>Trigger Widget 1</strong></td><td>Number</td></tr><tr><td><strong>Condition</strong></td><td>Equals</td></tr><tr><td><strong>Condition Value</strong></td><td>10</td></tr><tr><td><strong>Trigger Widget 2</strong></td><td>Checkbox</td></tr><tr><td><strong>Condition</strong></td><td>Is Checked</td></tr><tr><td><strong>Action</strong></td><td>Show RadioButton1</td></tr></tbody></table>
|
||
<p><strong>Result</strong></p>
|
||
<p>The configured <strong>RadioButton1</strong> widget becomes visible when <strong>either</strong> the Number field equals <strong>10</strong> <strong>or</strong> the Checkbox is checked.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-conditional-logic-guides-4">Related Conditional Logic Guides<a href="#related-conditional-logic-guides-4" class="hash-link" aria-label="Direct link to Related Conditional Logic Guides" title="Direct link to Related Conditional Logic Guides" translate="no"></a></h3>
|
||
<p>The <strong>Radio Button</strong> widget also supports Conditional Logic using the following trigger widgets:</p>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Text Input Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#radio-button-triggered-by-a-text-input" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Number Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#radio-button-triggered-by-a-number-widget" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Dropdown Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#radio-button-triggered-by-a-dropdown" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Checkbox Widget</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#radio-button-triggered-by-a-checkbox" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Radio Button Triggered by Another Radio Button</strong> – <a href="https://docs.opensignlabs.com/docs/help/New-Document/conditional_logic/#radio-button-triggered-by-another-radio-button" target="_blank" rel="noopener noreferrer" class="">Read more</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="additional-widget-options-4">Additional Widget Options<a href="#additional-widget-options-4" class="hash-link" aria-label="Direct link to Additional Widget Options" title="Direct link to Additional Widget Options" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Add Signer / Change Signer</strong>: Click the first icon on the Radio Button widget to assign the widget to a different signer. You can select an existing signer or add a new recipient.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Copy</strong>: Click the <strong>Copy</strong> icon to duplicate the Radio Button widget.</p>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="15-image">15. Image<a href="#15-image" class="hash-link" aria-label="Direct link to 15. Image" title="Direct link to 15. Image" translate="no"></a></h2>
|
||
<p>The image widget allows signers to upload an image during the signing process. After placing the Image widget, you will see the options on the widget such as:</p>
|
||
<ul>
|
||
<li class="">Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.</li>
|
||
<li class="">Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</li>
|
||
<li class="">Copy : Clicking on this you can duplicate the image widget.</li>
|
||
</ul>
|
||
<hr>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="16--attachment-widget">16. 📎 Attachment Widget<a href="#16--attachment-widget" class="hash-link" aria-label="Direct link to 16. 📎 Attachment Widget" title="Direct link to 16. 📎 Attachment Widget" translate="no"></a></h2>
|
||
<p>The <strong>Attachment Widget</strong> allows signers to upload supporting files directly while completing and signing a document. This is useful when additional documents or evidence are required as part of the signing workflow.</p>
|
||
<ul>
|
||
<li class="">Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing. Additionally, you can add a hint or instruction to guide signers on what information or file is expected in the widget.</li>
|
||
<li class="">Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.</li>
|
||
<li class="">Copy : Clicking on this you can duplicate the image widget.</li>
|
||
</ul>
|
||
<img width="918" alt="image" src="https://github.com/user-attachments/assets/f52e704d-c69f-464a-b3fa-f76f27d98fed">
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-the-attachment-widget-works">How the Attachment Widget Works<a href="#how-the-attachment-widget-works" class="hash-link" aria-label="Direct link to How the Attachment Widget Works" title="Direct link to How the Attachment Widget Works" translate="no"></a></h2>
|
||
<ol>
|
||
<li class="">Signers can upload up to <strong>5 files</strong> using a single Attachment Widget.</li>
|
||
<li class="">Each file can be a maximum of <strong>10 MB</strong> in size.</li>
|
||
<li class="">A single Attachment Widget can therefore accept up to <strong>50 MB</strong> of attachments in total.</li>
|
||
<li class="">Supported file formats include:<!-- -->
|
||
<ul>
|
||
<li class="">PDF (<code>.pdf</code>)</li>
|
||
<li class="">Microsoft Word (<code>.docx</code>)</li>
|
||
<li class="">PNG (<code>.png</code>)</li>
|
||
<li class="">JPG (<code>.jpg</code>)</li>
|
||
<li class="">JPEG (<code>.jpeg</code>)</li>
|
||
</ul>
|
||
</li>
|
||
<li class="">Once the signer uploads the files and completes the signing process, the uploaded files are appended as additional pages to the end of the original PDF document.</li>
|
||
</ol>
|
||
<img width="918" alt="document attchement" src="https://github.com/user-attachments/assets/6325793e-a4ed-4aed-ab12-5e29e625f28a">
|
||
<blockquote>
|
||
<p><strong>Note:</strong> All uploaded attachments become part of the completed document package, making it easier to store, review, and share the signed document along with its supporting files.</p>
|
||
</blockquote>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="-document-page-controls">📄 Document Page Controls<a href="#-document-page-controls" class="hash-link" aria-label="Direct link to 📄 Document Page Controls" title="Direct link to 📄 Document Page Controls" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">
|
||
<p><strong>Navigating Between Pages in OpenSign™</strong>
|
||
To navigate between pages of a document that you have uploaded either click on the previous page ∧ & V next page buttons at the top or click on any of the page previews loaded on the left side.</p>
|
||
<img width="918" alt="OpenSign Page controls" src="https://github.com/user-attachments/assets/c577e165-f8ac-45c7-bc6f-d499c710a7ed">
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Add Pages</strong><br>
|
||
<!-- -->In the left-side panel, users will see an <strong>"Add" button</strong>. Clicking it allows users to select and merge new documents into the current one.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Delete Page</strong><br>
|
||
<!-- -->An option is available to <strong>delete</strong> any unwanted page from the document.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Reorder Pages</strong><br>
|
||
<!-- -->Users can reorder pages by clicking the <strong>"Reorder" button</strong>, which opens a popup displaying all pages. Use the <strong>Up</strong> and <strong>Down</strong> arrows to change the order. Click <strong>Save</strong> to apply the new page order.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Zoom In / Zoom Out</strong><br>
|
||
<!-- -->Controls are available to <strong>zoom in</strong> or <strong>zoom out</strong> of the document view.</p>
|
||
</li>
|
||
<li class="">
|
||
<p><strong>Rotate Page</strong><br>
|
||
<!-- -->Options are provided to <strong>rotate pages</strong> in both <strong>clockwise</strong> and <strong>counterclockwise</strong> directions.</p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-4-next">Step 4: Next:<a href="#step-4-next" class="hash-link" aria-label="Direct link to Step 4: Next:" title="Direct link to Step 4: Next:" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><strong>Next</strong>: After adding the widgets and signatures, click the 'Next' button. The document will then be created.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-5-send-mail">Step 5: Send Mail<a href="#step-5-send-mail" class="hash-link" aria-label="Direct link to Step 5: Send Mail" title="Direct link to Step 5: Send Mail" translate="no"></a></h3>
|
||
<p>After finishing the document creation, a 'Send Mail' popup will appear, offering options to Send Email, Customize Email, Copy Link, or Share the document.</p>
|
||
<ul>
|
||
<li class="">
|
||
<p>Send Email: Click the 'Send' button to send the document for signing to all signers. If the sending order is set to 'Yes', it will send the document to the first signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Customize Email: Click the 'Customize Email' button to open the email editor. Here, you can set variables and customize the content. After clicking 'Send', the document will be sent for signing to all signers, or if the sending order is set to 'Yes', it will be sent to the first signer with the customized email.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Copy Link: You can copy the link to sign the document.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>Share: Use this option to share the document via email, WhatsApp and other Windows apps</p>
|
||
</li>
|
||
</ul>
|
||
<img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/e2344479-daae-43ff-a61a-14ea98b237d6">
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="signers-signing-process">Signers Signing Process<a href="#signers-signing-process" class="hash-link" aria-label="Direct link to Signers Signing Process" title="Direct link to Signers Signing Process" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-6-email-otp-verification">Step 6: Email OTP verification<a href="#step-6-email-otp-verification" class="hash-link" aria-label="Direct link to Step 6: Email OTP verification" title="Direct link to Step 6: Email OTP verification" translate="no"></a></h3>
|
||
<p>Once the email is received, the signer can click the 'Sign Here' button. This will open the email verification page. After clicking the 'Get Verification Code' button, an OTP (one-time password) will be sent to the signer’s email address. Enter the received OTP into the verification textbox and click the 'Verify' button.</p>
|
||
<div><img width="800" alt="OpenSign send OTP" src="https://github.com/user-attachments/assets/b82c796a-98e3-4296-bde1-fe86b1b993ad"></div>
|
||
<div><img width="800" alt="OpenSign verify otp" src="https://github.com/user-attachments/assets/63cf4b75-9d47-4630-a83c-e916a5c13b3c"></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-7-finalizing-the-process">Step 7: Finalizing the Process:<a href="#step-7-finalizing-the-process" class="hash-link" aria-label="Direct link to Step 7: Finalizing the Process:" title="Direct link to Step 7: Finalizing the Process:" translate="no"></a></h3>
|
||
<p>After verification, the signer will be redirected to the document signing page, where he can view the document received for signing. To sign, the signer simply clicks on the signature widget, which allows them to draw, upload a digitally scanned signature, or type the signature.</p>
|
||
<p>After filling out all assigned widgets, click the 'Finish' button. Once the document is finished,.</p>
|
||
<ul>
|
||
<li class="">
|
||
<p>The signer has the option of downloading or printing the signed document. He will also obtain the completion certificate if he is the final signer.</p>
|
||
</li>
|
||
<li class="">
|
||
<p>If there are more than one signer, the document will be immediately sent to the next signer. Once all signers have finished their signatures, they can download and print the signed document as well as the completion certificate.</p>
|
||
</li>
|
||
</ul>
|
||
<img width="800" alt="OpenSignFinalStep" src="https://github.com/user-attachments/assets/f4783aa0-2879-4ec2-9ddc-16d59f3a1fc0">
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="additional-information">Additional Information<a href="#additional-information" class="hash-link" aria-label="Direct link to Additional Information" title="Direct link to Additional Information" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">All fields marked with an asterisk (*) must be completed before the document can be submitted.</li>
|
||
<li class="">Ensure that the document format is supported by OpenSign before uploading.</li>
|
||
<li class="">Signed documents can be accessed in the designated 'Root' folder or the one you have specified.</li>
|
||
</ul>
|
||
<p>If you require more help, feel free to reach out to our customer support on <a href="mailto:support@opensignlabs.com" target="_blank" rel="noopener noreferrer" class="">support@opensignlabs.com</a>.</p>
|
||
<p>Happy signing with OpenSign™!</p></div></div></div><div class="row"><div class="col col--12"><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href="https://github.com/opensignlabs/opensign/tree/feat-docs/docs/docs/help/New-Document/request-signatures.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></div></div></article><div class="row"><div class="col col--12"><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/help/New-Document/sign-yourself"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Sign your-self</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/help/New-Document/widgets"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Widgets in OpenSign</div></a></nav></div></div></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#interface-overview" class="table-of-contents__link toc-highlight">Interface Overview</a><ul><li><a href="#step-1-begin-new-document-creation" class="table-of-contents__link toc-highlight">Step 1: Begin New Document Creation</a></li><li><a href="#uploading-your-document" class="table-of-contents__link toc-highlight">Uploading Your Document</a></li><li><a href="#entering-document-details-and-signers" class="table-of-contents__link toc-highlight">Entering Document Details And Signers</a></li><li><a href="#organizing-your-document" class="table-of-contents__link toc-highlight">Organizing Your Document</a></li><li><a href="#set-the-sending-order" class="table-of-contents__link toc-highlight">Set the sending order</a></li><li><a href="#setting-the-time-frame" class="table-of-contents__link toc-highlight">Setting the Time Frame</a></li><li><a href="#setting-bcc-and-cc" class="table-of-contents__link toc-highlight">Setting BCC and CC</a></li><li><a href="#auto-reminder" class="table-of-contents__link toc-highlight">Auto reminder</a></li><li><a href="#security-setting" class="table-of-contents__link toc-highlight">Security Setting</a></li><li><a href="#enable-tour" class="table-of-contents__link toc-highlight">Enable tour:</a></li><li><a href="#notify-on-signatures" class="table-of-contents__link toc-highlight">Notify on signatures:</a></li><li><a href="#allow-modifications" class="table-of-contents__link toc-highlight">allow modifications:</a></li><li><a href="#redirect-url" class="table-of-contents__link toc-highlight">Redirect url:</a></li><li><a href="#pen-colors" class="table-of-contents__link toc-highlight">Pen colors:</a></li><li><a href="#step-2-proceed-to-document-creation-panel" class="table-of-contents__link toc-highlight">Step 2: Proceed to Document Creation Panel</a></li><li><a href="#step-3-document-creation" class="table-of-contents__link toc-highlight">Step 3: Document Creation</a></li><li><a href="#prefill-widgets" class="table-of-contents__link toc-highlight">Prefill Widgets</a></li></ul></li><li><a href="#signersrecipients" class="table-of-contents__link toc-highlight">Signers/Recipients</a></li><li><a href="#access-code" class="table-of-contents__link toc-highlight">Access code</a><ul><li><a href="#how-the-access-code-works" class="table-of-contents__link toc-highlight">How the Access Code Works</a></li></ul></li><li><a href="#add-widgets-for-signers" class="table-of-contents__link toc-highlight">Add Widgets for Signers</a></li><li><a href="#1-add-a-signature-widget" class="table-of-contents__link toc-highlight">1. Add a Signature Widget</a><ul><li><a href="#signature-widget-options" class="table-of-contents__link toc-highlight">Signature Widget Options</a></li></ul></li><li><a href="#add-other-widgets" class="table-of-contents__link toc-highlight">Add Other Widgets</a></li><li><a href="#2-stamp" class="table-of-contents__link toc-highlight">2. Stamp</a></li><li><a href="#3-initials" class="table-of-contents__link toc-highlight">3. Initials</a></li><li><a href="#4-text-input" class="table-of-contents__link toc-highlight">4. Text Input</a></li><li><a href="#supported-conditions" class="table-of-contents__link toc-highlight">Supported Conditions</a><ul><li><a href="#text-input" class="table-of-contents__link toc-highlight">Text Input</a></li><li><a href="#number" class="table-of-contents__link toc-highlight">Number</a></li><li><a href="#any-condition-or" class="table-of-contents__link toc-highlight">Any Condition (OR)</a></li></ul></li><li><a href="#example" class="table-of-contents__link toc-highlight">Example</a><ul><li><a href="#related-conditional-logic-guides" class="table-of-contents__link toc-highlight">Related Conditional Logic Guides</a></li><li><a href="#additional-widget-options" class="table-of-contents__link toc-highlight">Additional Widget Options</a></li></ul></li><li><a href="#5-number-widget" class="table-of-contents__link toc-highlight">5. Number widget</a><ul><li><a href="#conditional-logic" class="table-of-contents__link toc-highlight"><strong>Conditional Logic</strong></a></li></ul></li><li><a href="#supported-conditions-1" class="table-of-contents__link toc-highlight">Supported Conditions</a><ul><li><a href="#text-input-1" class="table-of-contents__link toc-highlight">Text Input</a></li><li><a href="#number-1" class="table-of-contents__link toc-highlight">Number</a></li><li><a href="#any-condition-or-1" class="table-of-contents__link toc-highlight">Any Condition (OR)</a></li></ul></li><li><a href="#configuration-example" class="table-of-contents__link toc-highlight">Configuration Example</a><ul><li><a href="#related-conditional-logic-guides-1" class="table-of-contents__link toc-highlight">Related Conditional Logic Guides</a></li><li><a href="#additional-widget-options-1" class="table-of-contents__link toc-highlight">Additional Widget Options</a></li></ul></li><li><a href="#6-name" class="table-of-contents__link toc-highlight">6. Name</a></li><li><a href="#7-job-title" class="table-of-contents__link toc-highlight">7. Job title</a></li><li><a href="#8-company" class="table-of-contents__link toc-highlight">8. Company</a></li><li><a href="#9-email" class="table-of-contents__link toc-highlight">9. Email</a></li><li><a href="#10-date-widget" class="table-of-contents__link toc-highlight">10. Date Widget</a></li><li><a href="#11-cells" class="table-of-contents__link toc-highlight">11. Cells</a></li><li><a href="#12-checkbox" class="table-of-contents__link toc-highlight">12. Checkbox</a></li><li><a href="#supported-conditions-2" class="table-of-contents__link toc-highlight">Supported Conditions</a><ul><li><a href="#text-input-2" class="table-of-contents__link toc-highlight">Text Input</a></li><li><a href="#number-2" class="table-of-contents__link toc-highlight">Number</a></li><li><a href="#dropdown" class="table-of-contents__link toc-highlight">Dropdown</a></li><li><a href="#checkbox" class="table-of-contents__link toc-highlight">Checkbox</a></li><li><a href="#radio-button" class="table-of-contents__link toc-highlight">Radio Button</a></li><li><a href="#any-condition-or-2" class="table-of-contents__link toc-highlight">Any Condition (OR)</a></li></ul></li><li><a href="#configuration-example-1" class="table-of-contents__link toc-highlight">Configuration Example</a><ul><li><a href="#related-conditional-logic-guides-2" class="table-of-contents__link toc-highlight">Related Conditional Logic Guides</a></li><li><a href="#additional-widget-options-2" class="table-of-contents__link toc-highlight">Additional Widget Options</a></li></ul></li><li><a href="#13-dropdown" class="table-of-contents__link toc-highlight">13. Dropdown</a><ul><li><a href="#conditional-logic-1" class="table-of-contents__link toc-highlight"><strong>Conditional Logic</strong></a></li></ul></li><li><a href="#supported-conditions-3" class="table-of-contents__link toc-highlight">Supported Conditions</a><ul><li><a href="#text-input-3" class="table-of-contents__link toc-highlight">Text Input</a></li><li><a href="#number-3" class="table-of-contents__link toc-highlight">Number</a></li><li><a href="#dropdown-1" class="table-of-contents__link toc-highlight">Dropdown</a></li><li><a href="#any-condition-or-3" class="table-of-contents__link toc-highlight">Any Condition (OR)</a></li></ul></li><li><a href="#configuration-example-2" class="table-of-contents__link toc-highlight">Configuration Example</a><ul><li><a href="#related-conditional-logic-guides-3" class="table-of-contents__link toc-highlight">Related Conditional Logic Guides</a></li><li><a href="#additional-widget-options-3" class="table-of-contents__link toc-highlight">Additional Widget Options</a></li></ul></li><li><a href="#14-radio-button" class="table-of-contents__link toc-highlight">14. Radio button</a><ul><li><a href="#conditional-logic-2" class="table-of-contents__link toc-highlight"><strong>Conditional Logic</strong></a></li></ul></li><li><a href="#supported-conditions-4" class="table-of-contents__link toc-highlight">Supported Conditions</a><ul><li><a href="#text-input-4" class="table-of-contents__link toc-highlight">Text Input</a></li><li><a href="#number-4" class="table-of-contents__link toc-highlight">Number</a></li><li><a href="#dropdown-2" class="table-of-contents__link toc-highlight">Dropdown</a></li><li><a href="#checkbox-1" class="table-of-contents__link toc-highlight">Checkbox</a></li><li><a href="#radio-button-1" class="table-of-contents__link toc-highlight">Radio Button</a></li><li><a href="#any-condition-or-4" class="table-of-contents__link toc-highlight">Any Condition (OR)</a></li></ul></li><li><a href="#configuration-example-3" class="table-of-contents__link toc-highlight">Configuration Example</a><ul><li><a href="#related-conditional-logic-guides-4" class="table-of-contents__link toc-highlight">Related Conditional Logic Guides</a></li><li><a href="#additional-widget-options-4" class="table-of-contents__link toc-highlight">Additional Widget Options</a></li></ul></li><li><a href="#15-image" class="table-of-contents__link toc-highlight">15. Image</a></li><li><a href="#16--attachment-widget" class="table-of-contents__link toc-highlight">16. 📎 Attachment Widget</a></li><li><a href="#how-the-attachment-widget-works" class="table-of-contents__link toc-highlight">How the Attachment Widget Works</a><ul><li><a href="#-document-page-controls" class="table-of-contents__link toc-highlight">📄 Document Page Controls</a></li><li><a href="#step-4-next" class="table-of-contents__link toc-highlight">Step 4: Next:</a></li><li><a href="#step-5-send-mail" class="table-of-contents__link toc-highlight">Step 5: Send Mail</a></li></ul></li><li><a href="#signers-signing-process" class="table-of-contents__link toc-highlight">Signers Signing Process</a><ul><li><a href="#step-6-email-otp-verification" class="table-of-contents__link toc-highlight">Step 6: Email OTP verification</a></li><li><a href="#step-7-finalizing-the-process" class="table-of-contents__link toc-highlight">Step 7: Finalizing the Process:</a></li></ul></li><li><a href="#additional-information" class="table-of-contents__link toc-highlight">Additional Information</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/help/intro">Help</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/API-docs/v1.1">APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/contribute/intro">Contribute</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/self-host/intro">Self-host</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://discord.com/invite/xe9TDuyAyj" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://www.linkedin.com/company/opensign%E2%84%A2/" target="_blank" rel="noopener noreferrer" class="footer__link-item">LinkedIn<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://www.twitter.com/opensignhq" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://www.facebook.com/profile.php?id=61551030403669" target="_blank" rel="noopener noreferrer" class="footer__link-item">Facebook<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://www.opensignlabs.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Official Website<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/opensignlabs/opensign" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 OpenSign™. <br>The best Open Source DocuSign alternative.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |