メール確認付きゲスト応募と外部サイトへの埋め込み

応募フォームを外部サイトに埋め込む

作成済みの応募受付ページを、会社・イベントなどのWebサイト内に表示できます。訪問者はログインせず、メールアドレスを確認して応募します。

対象・事前準備

• 対象プログラムの管理者としてログインします。
• 応募受付ページを作成・公開しておきます。
• 掲載先サイトのHTML、またはHTML埋め込み欄を編集できることを確認します。
• ゲスト応募用のメール送信が利用できる必要があります。

画像はHackDay Summerのデモ画面です。実際の設定は、ご自身が管理するプログラムと掲載先サイトで行ってください。

設置・運用時の注意

• 許可するURLは、実際に掲載するサイトだけに限定してください。
• 同じコードを複数の許可サイトで使えます。掲載先ごとにHTMLへ貼り付けてください。
• 掲載先サイトの設定によっては、外部コンテンツやiframeを許可する必要があります。サイトの管理担当者に確認してください。
• ログイン不要でもメール確認は必要です。メールが届かない場合はメールアドレスと迷惑メールフォルダーを確認します。
• 応募元を取得できなかった過去の応募は、許可サイトから推測できません。

画像で見る操作手順

1. 作成済みの応募ページを選ぶ

応募受付ページ一覧で、埋め込む応募ページを選び、操作欄の地球アイコンを確認します。埋め込みコードを利用する前に、この応募ページを公開してください。

2. 外部埋め込み設定を開く

地球アイコンをクリックして「外部サイトへの埋め込み設定」を開きます。ページを作成した後、この画面から設定します。

3. メール確認付きのゲスト応募を有効にする

「外部サイトへの埋め込みを有効にする」をオンにします。訪問者はログインせず、メールアドレスを確認して応募できます。メール送信が未設定と表示された場合は、プラットフォーム管理者に設定を依頼してください。

4. 掲載先サイトのURLを入力する

「応募ページを表示するサイトのURL」に、https://から始まるサイトのURLを1行に1件入力します。例：https://example.com。/events などのページ名や * は使えません。複数サイトに設置する場合は、それぞれのURLを入力します（最大20サイト）。

5. 入力内容を確認して保存する

スイッチがオンになっていることと掲載先URLを確認し、「設定を保存」をクリックします。保存完了のメッセージを確認してください。

6. 保存済みの埋め込みコードを確認する

ページ公開・埋め込み設定の保存・メール送信設定が揃うと、「埋め込みコード」が表示されます。表示されない場合は、この3点を確認します。メール送信設定についてはプラットフォーム管理者に依頼してください。

7. 埋め込みコードをコピーする

「埋め込みコードをコピー」をクリックします。許可した複数のサイトに、同じコードを使えます。サイトごとに別のコードを作る必要はありません。

8. 掲載先サイトのHTMLに貼り付ける

掲載先サイトの編集画面で、HTMLブロックやHTML埋め込み欄にコピーしたコードを貼り付け、そのサイトを公開します。掲載先サイトのHTMLへの追加が一度必要です。サイトの編集権限がない場合は、管理担当者へコードを渡してください。

9. 掲載先で表示と応募の流れを確認する

許可した各サイトでフォームが表示され、ログインせずにメール確認に進めることを確認します。表示されない場合は、そのサイトの https:// から始まるURLと保存した許可サイトの設定を照合します。応募元を確認する際は、応募者一覧の応募元欄を確認してください。

10. 掲載先サンプルのHTMLを開く

掲載先サイトの管理画面を開き、応募フォームを置くページのHTML、またはHTML埋め込み欄を編集できる状態にします。

11. コピーしたコードをHTMLに追加する

応募フォームを表示したい位置に、先ほどコピーしたiframeコードを追加します。応募ページのURLをそのまま文章として貼るのではなく、iframeコード全体を貼り付けます。

12. HTMLを反映してフォームを表示する

掲載先サイトでHTMLを保存してページを公開します。応募フォームがページ内に表示されることを確認してください。表示されないときは、許可サイトのURL、iframeの利用制限、応募ページの公開状態を確認します。

13. 埋め込まれたフォームに名前などを入力する

掲載先ページ内に表示された応募フォームへ、お名前と会社・チーム名を入力します。別ページへ移動する必要はありません。

14. 応募内容と希望する役割を入力する

取り組みたい社会課題、活かせるスキル、希望する役割を入力します。表示される項目は、主催者が応募ページで設定したフォームに従います。

15. メール確認と応募送信の条件

入力だけでは応募は完了しません。実際に応募する場合はメールアドレスを入力してメール確認を行い、参加規約・作品公開方針を確認したうえで送信します。画面例はメール未入力・未提出の状態です。