申込WebフォームとDocuSignを連携 — PowerFormの利用

Masaki Kubomura

Published in

DocuSignDevJP

6 min readOct 11, 2018

DocuSignでは、署名してほしい相手に署名依頼を送る方法として、

メールでの署名依頼送信
Faxで送信
iPadなどのタブレットで、直接対面で署名を依頼

の3つがありますが、これ以外に、URLをクリックしてもらって署名する方法があります。これをDocuSignではPowerFormという機能として提供しています。

PowerFormの利用を検討すべき現状の業務例

文房具や備品の購入申請は現状プリントアウトされた紙で行われており、申請者、上長、購買担当がそれぞれ押印していく承認フローが可視化できていない。また、紙の情報を購買システムや会計システムなどに別途手入力している
自社で提供するサービスを外販するために、Webフォームを設置しているが、申込み内容がCSVで送られてくるため、一旦商談管理システムに手入力し、担当者に別メールで連絡している。

上記をPowerForm化した場合の業務例

イントラネットに、購買申請用のPowerForm URLを配置し、申請者がDocuSign上で購買内容と理由を入力して送信すると、上長、購買担当がそれぞれ内容を確認し、署名を行う。最終承認が降りたものを、DocuSign Connectを使って自動的にWebhookでシステム連携、もしくはDocuSign Retrieveで一括CSVとしてダウンロードし、システムに取り込みを行う。
既存のWebフォームを微修正し、フォームの送信先をPowerForm URLに変更する。サービス申込者は、Webフォームで入力した内容がそのままDocuSignの署名画面に転記されているため、署名を行うと、DocuSignで設定したワークフローに従い、サービス担当営業などに連携される。最終承認が降りたものを、DocuSign Connectを使って自動的にWebhookでシステム連携、もしくはDocuSign Retrieveで一括CSVとしてダウンロードし、システムに取り込みを行う。

WebフォームとPowerFormの連携の実装方法

上記の後者の例では、既存のWebフォームを一部修正し、そのままDocuSignに連携しています。この実装方法について、サンプルを用いてご説明します。実際に動作するデモは、こちらからアクセス可能です。

https://docusignjapan-samplewebformdemo01.netlify.com/

1. 開発者向けサンドボックス環境を作成

こちらのブログを参考に、テスト用サンドボックス環境を作成してください。もちろん、既存の環境をご利用いただいても構いません。

2. サンプルHTMLをダウンロード

下記のGitHubからコードをクローンするか、ダウンロードしてください。

https://github.com/DocuSignJapan/sample-app-loanco-jp-powerform

3. サンプルテンプレートをDocuSign環境にインポート

ダウンロードしたサンプルに、templateフォルダが含まれています。こちらにあるjsonファイルを、DocuSignのテンプレートタブから、新規 > テンプレートのアップロードメニューを使って取り込んでください。

4. PowerFormを作成

インポートされたテンプレートを開き、その他メニューから、「PowerFormを作成」を選択し、「作成」ボタンを押します。生成されたURLが表示されるので、こちらをコピーしてください。

5. HTMLファイルの修正

ダウンロードしたサンプルに、index.htmlファイルがあります。こちらのファイルをエディタで開き、105行目にある、formタグのaction属性に記載されたURLを上記4で取得したURLに変更し、保存してください。

6. ブラウザでHTMLファイルを開いて、動作確認

実装の注意点

受信者の名前とメールアドレス確認画面が表示される場合

テンプレート側で、名前とメールフィールドが配置されていない場合は、Webフォーム側から、最初の受信者の名前(姓と名をスペース区切りで結合)とメールアドレスを渡すようにすると、本ブログの最初の画像のように、Webフォームから直接DocuSignの署名画面が開きます。Inputタグのname属性値は、それぞれ、<役割名>_UserNameと<役割名>_Emailです。

もし、この2つが設定されていないと、下記の確認入力画面が表示されます。

テンプレートのフィールドのデータラベルと、HTMLフォームのname属性を合わせる

下記の画像に示すように、テンプレートのデータラベルに合わせて、Webフォーム側のInputタグのname属性を設定してください。また、もしテンプレート側で複数の受信者が設定されていて、かつ同じ名前のデータラベルのフィールドがある場合は、name属性値は、<役割名>_<データラベル名>としてください。