Webflow フォーム統合

WebflowサイトにLeadDuoフォームを埋め込み、ld_keyを含めて安全にリードを送信する方法です。Embed.js（推奨）とシンプルなHTMLフォームの2つの方法があります。

方法 1: Embed.js（推奨）

カスタマイズやスタイリング、追加の質問を使いたい場合は、この方法を推奨します。

LeadDuoダッシュボードでフォームを作成し、Form ID と LD Key をコピーします。
Webflowで対象プロジェクトを開き、Project Settings → Custom Code に移動します。
Before </body> セクションに以下のコードを貼り付け、YOUR_FORM_ID と YOUR_LD_KEY を置き換えます。

<!-- LeadDuo Embed Form -->
<div id="leadduo-form"></div>

<script src="https://cdn.leadduo.io/embed/v1.js"></script>
<script>
  LeadDuo.init('leadduo-form', {
    formId: 'YOUR_FORM_ID',
    formKey: 'YOUR_LD_KEY'
  });
</script>

公開後、フォームページにアクセスするとLeadDuoフォームが表示され、ld_key（formKey）が自動的に渡されます。

方法 2: シンプルなHTMLフォーム

スタイリング不要で、シンプルなフォームだけを使いたい場合はこちらを利用できます。

LeadDuoダッシュボードから Form ID と LD Key をコピーします。
Webflowのページに HTML Embed ブロックを追加します。
以下のコードを貼り付け、YOUR_FORM_ID と YOUR_LD_KEY を置き換えます。

<form action="https://api.leadduo.io/api/v1/form/YOUR_FORM_ID" method="POST">
  <input type="hidden" name="ld_key" value="YOUR_LD_KEY" />
  <input type="email" name="email" placeholder="Email" required />
  <input type="text" name="name" placeholder="Name" />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Submit</button>
</form>

ld_key は hidden フィールドとして送信されるため、LeadDuo側でフォームの正当性を検証できます。

トラブルシューティング

フォームが表示されない場合は、公開済みURLを確認し、ブラウザコンソールにエラーがないか確認してください。
LeadDuoダッシュボードのForm ID / LD Keyを再確認し、正しくコピーされているか確認してください。
テスト送信後、LeadDuoダッシュボードにリードが表示されることを確認してください。