登録フォームを作成して埋め込む

Published: 2026年7月16日 · Last updated: 2026年7月21日 · By Marcus Biel

埋め込みフォームは、ウェブサイト上の既存ページ内に直接配置されます。周囲のコンテンツの上に表示されるのではなく、そのコンテンツの一部として表示されます。

埋め込みフォームは、ブログ記事、自社ウェブサイトのランディングページ、ニュースレターセクション、サイドバー、フッターなどに適しています。フォームコードを追加した場所によって、フォームの表示位置が決まります。

このガイドでは、埋め込みフォームに固有の手順を説明します。共通するビジュアル編集機能については、メインの登録フォームビルダーガイドで説明しています。

埋め込みフォームの作成

「Signup Forms」を開き、「Create Form」をクリックして、「Embedded Form」を選択します。わかりやすい内部名を入力し、ビルダーに進みます。

Signup Forms Overviewでフォーム名をクリックして、既存のフォームを編集することもできます。

内部名が訪問者に自動表示されることはありません。フォームの場所や目的にちなんだ名前を付けてください。たとえば、「Homepage Newsletter」、「Blog Footer」、「Product Updates」などです。

スターターデザインの選択

埋め込みフォームでは、空白のフォーム、標準フォーム、および4種類のデザインテンプレートを利用できます。

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

フォームを表示するウェブサイトのスペースや雰囲気に最も合うデザインを選択します。どのスターターデザインも、選択後に完全に変更できます。

埋め込みフォームのデザイン

「Layout」と「Content」を使ってフォームを配置します。埋め込みフォームには、登録フォームのほか、補足テキスト、画像、リスト、ボタン、ソーシャルリンク、購読者カウンター、スペーサー、区切り線などを含めることができます。

幅の狭いサイドバーやフッターでは、通常、1列レイアウトが最も読みやすくなります。幅の広いページセクションでは、2列レイアウトを使って、フィールドの横に短い説明や画像を配置できます。

登録フォームブロックを選択すると、購読者フィールド、必須フィールド、ラベル、非表示タグ、進捗インジケーター、任意の購読者カウンターを設定できます。その後、フォームコンテナ、フィールド、送信ボタンを個別にスタイル設定できます。

「Page settings」を開くと、埋め込みフォームのキャンバスの背景と全体的なデザインの初期設定を変更できます。周囲のウェブサイトとの調和を考慮してください。透明またはシンプルな背景は自然に統合されやすく、対照的な背景は登録オファーを目立たせるのに役立ちます。

レイアウト、コンテンツ、レイヤー、フィールド、タグ、タイポグラフィ、外観についての詳しい手順は、Signup Form Builderの使用方法で確認できます。

登録フローの接続

ビルダーのヘッダーにある登録フローのコントロールを使って、送信後の処理、送信されるDouble Opt-inメール、確認後に訪問者に表示される内容を確認します。

既存のフローを選択したり、割り当てられたフローを編集したり、新しいフローを作成したりできます。選択したフローを他のフォームと共有している場合、編集するとそれらのフォームにも影響する可能性があることに注意してください。

プレビューと保存

「Preview」をクリックして、ウェブサイトに配置する前にフォーム全体を確認します。フィールドの順序、ラベル、エラー表示用のスペース、ボタンのテキスト、補足コンテンツの量を確認してください。

「Save changes」をクリックして現在のバージョンを保存します。埋め込みの準備ができたら、Signup Forms Overviewに戻ります。

フォームの有効化

公開コードを使用する前に、埋め込みフォームを有効にする必要があります。

フォームが無効な場合は、Signup Forms Overviewでフォームの3点メニューを開き、「Activate」を選択します。有効なフォームには「Show Code Snippet」アクションが表示されます。

ウェブサイトでフォームを利用できないようにする場合は、フォームを無効化します。無効化すると、デザインや過去のレポートデータを削除せずにフォームをオフラインにできます。

JavaScriptコードのコピー

「Show Code Snippet」をクリックし、「JavaScript」タブを開きます。Maildroppaは、一意のフォームIDを含む短いスクリプトを提供します。

コードは次の構造になっています。

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

スクリプトのアドレスやフォームIDを変更せず、コード全体をコピーします。

JavaScriptオプションは、Maildroppaのフォームランタイムを通じて、現在保存されているフォームを読み込みます。後でMaildroppa上の同じフォームを編集して保存しても、既存のスニペットは引き続きそのフォームIDを参照します。テキストやデザインを変更するだけであれば、新しいフォームを作成する必要はありません。

フォームをウェブサイトに追加

埋め込みフォームを表示したいページの場所にスクリプトを貼り付けます。

具体的な手順は、使用しているウェブサイトシステムによって異なります。ページビルダーやコンテンツ管理システムでは、カスタムHTMLまたはスクリプトコードを受け付けるブロックを使用します。カスタムウェブサイトでは、該当するテンプレートまたはページのマークアップにスクリプトを追加します。

セキュリティ上の理由で、スクリプトタグを削除するウェブサイトエディターもあります。ページを公開した後にフォームが表示されない場合は、まずエディターがMaildroppaのスクリプト全体を保持しているか確認してください。システム専用のカスタムコード領域を使用するか、ウェブサイトの管理者に相談する必要がある場合があります。

同じページ内の複数の場所に同じフォームを意図的に表示し、その設定をテスト済みである場合を除き、同じ埋め込みフォームのスニペットを1ページに何度も貼り付けないでください。

HTMLタブの使用

「HTML」タブには、生成されたフォームのマークアップが表示されます。このオプションは、レンダリングされたHTMLを直接操作したいカスタム実装向けです。

この方法を選択する場合は、マークアップ全体をコピーします。カスタムHTML統合は、ウェブサイトのスタイルや実装の影響を受ける可能性があるため、フィールド、バリデーション、送信、確認フローを入念にテストしてください。

通常のMaildroppa管理フォームでは、JavaScriptスニペットのほうが短い統合方法であり、IDを使って現在の公開フォーム設定を読み込みます。

埋め込みフォームのテスト

コードを含むウェブサイトのページを公開またはプレビューします。その後、訪問者と同じようにフォームをテストします。

1. フォームが正しい位置に表示されることを確認します。
2. ページを広い画面と狭い画面で表示します。
3. 必須フィールドをすべて入力します。
4. フォームを送信し、表示される応答を確認します。
5. Double Opt-inメールを開きます。
6. アドレスを確認し、最終的な応答を確認します。
7. 購読者と非表示タグがMaildroppaに正しく表示されることを確認します。

フォームがウェブサイトのコンテナより広い場合は、ビルダーでフォームの幅、列レイアウト、パディング、モバイル時のスタック設定を調整します。生成されたMaildroppaコードを変更してレイアウトの問題を解決することは避けてください。

埋め込みフォームの更新

Maildroppaで同じフォームを開き、変更を加えてプレビューし、「Save changes」をクリックします。ウェブサイト上のJavaScriptスニペットは同じフォームIDを引き続き使用し、保存された公開設定を読み込みます。

フォームを一時的に削除する場合は、Signup Forms Overviewで無効化します。不要になった場合は、ページに未使用のコードが残らないよう、ウェブサイトからもスニペットを削除してください。