公開したフォームは、公開ページのほかに、Web サイトへの埋め込みと API(ヘッドレス)でも受け付けられます。コードは、フォームの「共有」のタブからコピーできます。
Web サイトに埋め込む
「共有」のタブの「Web サイトに埋め込む」にある 2 行を、フォームを出したい場所に貼ります。
<div data-mukumo-form="公開の ID"></div>
<script src="https://app.mukumo.com/f/embed.js" async></script>- 高さは中身に合わせて自動で変わります。
- 送ったあとに移るページを決めていると、Web サイトのページごと移ります。
- 送ったとき、
divにmukumo-form:submittedのイベントが出ます。計測のタグをつなげるときに使えます。 - 隠しの値に、Web サイトの URL の値(例:
?utm_source=...)を渡すときは、divにdata-hidden="utm_source,utm_campaign"のようにキーを書きます。
スクリプトを貼れないところ(一部のブログのブロックなど)では、同じタブの iframe のコードを使います。この場合、高さは固定です。
自分のサイトのデザインで送る(API)
自分のサイトのフォームの送り先だけを mukumo にします。
- ふつうの HTML のフォームなら、
actionをhttps://app.mukumo.com/api/forms/公開の ID/submissions、methodをpostにします。各項目のnameは、「共有」のタブの「項目のキー」と同じにします。送れたら、送ったあとに移るページ(なければ公開ページの完了の画面)へ移ります。 - JavaScript から送るときは、JSON で
POSTします。受け付けると201で{ "ok": true, "id": "…", "number": 12 }が返ります。答えがおかしいときは400で、fieldsに項目ごとの理由(requiredかinvalid)が返ります。 - フォームの項目は
GET https://app.mukumo.com/api/forms/公開の IDで読めます。
機械からの送信よけに、_hp という名前の空の欄を、人に見えない形で置いてください。埋まっていた送信は残しません。
使えるサイトを絞る
設定の「埋め込み・API を使えるサイト」にサイトの URL(例: https://example.com)を入れると、そのサイトだけで埋め込め、ブラウザからの API の送信もそのサイトからだけ受け付けます。空のときは、どのサイトからでも使えます。
Webhook で回答を受け取る
設定の「Webhook」に送り先の URL(https)を入れると、回答が届くたびに、回答を JSON で送ります。ヘッダーの X-Webhook-Signature(t=時刻,v1=署名)は、設定の「署名の秘密」で "時刻.本文" を HMAC-SHA256 で計算した値です。同じになるかを確かめると、mukumo から届いたことを確かめられます。