mukumoヘルプセンター
アプリを開くGitHub

Web サイトに埋め込む・API で送る

このページの内容

公開したフォームは、公開ページのほかに、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 から届いたことを確かめられます。

まずキーワードで検索します。見つからないときは「意味で探す」をお試しください。