登録フォームの作成と埋め込み

公開日: 2026年7月16日 · 最終更新日: 2026年9月12日 · 著者 Marcus Biel

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

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

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

埋め込みフォームの作成

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

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

管理用の名前が訪問者に自動で表示されることはありません。「トップページのメルマガ登録」「ブログのフッター」「製品の最新情報」など、設置場所や目的がわかる名前を付けてください。

基本デザインの選択

埋め込みフォームには、空白のフォーム、標準フォーム、4種類のデザインテンプレートが用意されています。

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

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

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

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

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

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

「Page settings」を開くと、埋め込みフォームのキャンバスの背景と、全体に適用するデザインの初期設定を変更できます。設置先のウェブサイトとの調和を意識しましょう。透明またはシンプルな背景はページに自然になじみやすく、周囲とコントラストのある背景は登録の案内を目立たせるのに役立ちます。

レイアウト、コンテンツ、レイヤー、入力項目、タグ、文字組み、外観の詳しい設定手順は、登録フォームビルダーの使い方をご覧ください。

登録フローの設定

ビルダーのヘッダーにある登録フローの設定で、フォーム送信後の処理、送信されるダブルオプトインの確認メール、登録確認後に訪問者に表示される内容を確認します。

既存のフローを選択するほか、割り当て済みのフローを編集したり、新しいフローを作成したりできます。選択したフローを他のフォームでも使っている場合、編集内容がそれらのフォームにも影響する可能性がある点に注意してください。

プレビューと保存

ウェブサイトに設置する前に、「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. ダブルオプトインの確認メールを開きます。
6. メールアドレスの確認手続きを行い、最後に表示される内容を確認します。
7. 購読者と、設定した非表示タグがMaildroppaに正しく表示されることを確認します。

フォームがウェブサイト側のコンテナの幅を超える場合は、ビルダーでフォームの幅、列レイアウト、パディング、モバイル表示時の縦並び設定を調整します。レイアウトの問題を解決するために、Maildroppaが生成したコードを変更することは避けてください。

埋め込みフォームの更新

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

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