お問い合わせフォーム付きモーダルウインドウの作り方
お問い合わせフォーム付きモーダルウインドウを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、「お問い合わせ」ボタンをクリックすると画面中央に入力フォームを表示する仕組みを作成します。フォームには、お名前・メールアドレス・お問い合わせ内容の3項目を用意しており、通常はフォームを非表示にしておき、必要なときだけモーダルウインドウで表示できます。
企業サイトのお問い合わせ窓口やサービス紹介ページ、会員サイトのサポート画面など、現在のページを離れずに入力フォームを表示したい場面に適しています。すべての項目には必須入力を設定しており、未入力の項目がある場合はブラウザの標準機能によって送信が制限されます。メールアドレスには形式チェックも設定しています。また、モーダル内には説明文と入力例を示すプレースホルダーを用意し、利用者が入力する内容を分かりやすくしています。
「送信する」ボタンをクリックすると、HTMLのaction属性とmethod=”post”で指定した送信先URLへ、お名前・メールアドレス・お問い合わせ内容の3項目をPOST送信できます。受信処理やメール送信、データ保存などは、利用者自身で用意する必要があります。また、「閉じる」ボタンをクリックするとモーダルウインドウを非表示にし、入力内容を初期状態へ戻します。CSSではモーダルの横幅や余白、背景色、角丸、入力欄、ボタンのデザインなどを自由に調整でき、スマートフォン・タブレット・PCでも利用しやすいレスポンシブ対応の構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると、モーダルウインドウ内にお問い合わせフォームを表示します。
下記のフォームに必要事項をご入力の上、送信してください。
「お問い合わせ」をクリックするとフォームが表示されます。すべての項目が必須入力です。お名前・メールアドレス・お問い合わせ内容を入力し、「送信する」をクリックするとデモ用メッセージが表示されます。実際の送信は行われません。「閉じる」をクリックすると、入力内容とメッセージがリセットされます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>お問い合わせフォーム付きモーダルウインドウ</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- モーダルを開くボタン -->
<button class="contact-form-modal-window_open" id="contact-form-modal-window-open" type="button">
お問い合わせ
</button>
<!-- モーダルウインドウ -->
<div class="contact-form-modal-window_modal" id="contact-form-modal-window-modal" role="dialog" aria-modal="true" aria-labelledby="contact-form-modal-window-title">
<!-- モーダルタイトル -->
<div class="contact-form-modal-window_modal-title" id="contact-form-modal-window-title">
お問い合わせ
</div>
<!-- モーダル説明文 -->
<p class="contact-form-modal-window_modal-text">
下記のフォームに必要事項をご入力の上、送信してください。
</p>
<!--
お問い合わせフォームの送信先設定
1. 利用者自身でPOST送信に対応した受信先を用意してください。
例：PHPで作成した受信処理や、POST形式に対応したフォーム受付サービス。
2. 受信先のURLを確認してください。
PHPの場合は、サーバーに設置した受信処理ファイルのURLを使用します。
外部サービスの場合は、そのサービスから指定された送信先URLを使用します。
3. action="YOUR_POST_URL" のYOUR_POST_URLを、
実際の送信先URLへ置き換えてください。
4. method="post"はそのまま使用してください。
5. 送信先では次の3項目を受け取れるようにしてください。
name ：お名前
email ：メールアドレス
message ：お問い合わせ内容
このサンプルには、受信処理・メール送信・データ保存・
サーバー側の入力検証やセキュリティ対策は含まれていません。
これらは送信先のシステムで用意してください。
-->
<form class="contact-form-modal-window_form" id="contact-form-modal-window-form" action="YOUR_POST_URL" method="post">
<!-- お名前入力欄 -->
<div class="contact-form-modal-window_field">
<!-- お名前ラベルと必須表示 -->
<label class="contact-form-modal-window_label" for="contact-form-modal-window-name">
お名前
<span class="contact-form-modal-window_required">必須</span>
</label>
<!--
お名前を入力するテキストフィールド
name="name"で送信し、requiredで未入力を防止します。
-->
<input
class="contact-form-modal-window_input"
id="contact-form-modal-window-name"
name="name"
type="text"
autocomplete="name"
placeholder="山田 太郎"
required>
</div>
<!-- メールアドレス入力欄 -->
<div class="contact-form-modal-window_field">
<!-- メールアドレスラベルと必須表示 -->
<label class="contact-form-modal-window_label" for="contact-form-modal-window-email">
メールアドレス
<span class="contact-form-modal-window_required">必須</span>
</label>
<!--
メールアドレスを入力するテキストフィールド
name="email"で送信します。
type="email"で形式を確認し、requiredで未入力を防止します。
-->
<input
class="contact-form-modal-window_input"
id="contact-form-modal-window-email"
name="email"
type="email"
autocomplete="email"
placeholder="sample@example.com"
required>
</div>
<!-- お問い合わせ内容入力欄 -->
<div class="contact-form-modal-window_field">
<!-- お問い合わせ内容ラベルと必須表示 -->
<label class="contact-form-modal-window_label" for="contact-form-modal-window-message">
お問い合わせ内容
<span class="contact-form-modal-window_required">必須</span>
</label>
<!--
お問い合わせ内容を入力するテキストエリア
name="message"で送信し、requiredで未入力を防止します。
-->
<textarea
class="contact-form-modal-window_textarea"
id="contact-form-modal-window-message"
name="message"
placeholder="お問い合わせ内容をご入力ください"
required></textarea>
</div>
<!-- 操作ボタン -->
<div class="contact-form-modal-window_actions">
<!-- モーダルを閉じるボタン -->
<button class="contact-form-modal-window_close" id="contact-form-modal-window-close" type="button">
閉じる
</button>
<!-- 指定したURLへPOST送信するボタン -->
<button class="contact-form-modal-window_submit" type="submit">
送信する
</button>
</div>
</form>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではお問い合わせボタンとモーダルウインドウ、3項目の入力フォームを作成し、CSSで表示位置や入力欄、ボタンのデザインを設定します。JavaScriptではモーダルの開閉と入力内容のリセットを行います。配布コードにはPOST送信の設定が含まれていますが、実際に利用するには送信先のURLと、POSTデータを受信するシステムを利用者自身で用意する必要があります。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは、お問い合わせボタン、モーダルウインドウ、入力フォームを構成するファイルです。お名前・メールアドレス・お問い合わせ内容の3項目があり、すべてに必須入力を設定しています。各項目のラベルやプレースホルダー、モーダル内の説明文、POST送信先のURLを変更できます。
style.cssは、モーダルウインドウとフォームのデザインを設定するファイルです。モーダルの横幅、余白、角丸、背景色、影、入力欄の枠線、ボタンの色や配置などを変更できます。
script.jsは、モーダルウインドウの開閉を制御するファイルです。「お問い合わせ」ボタンをクリックするとモーダルを表示し、「閉じる」ボタンをクリックすると非表示にしてフォームの入力内容をリセットします。フォームの送信処理はJavaScriptで停止せず、HTMLのPOST送信を利用します。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存すると、index.htmlからCSSとJavaScriptが読み込まれます。まず、index.htmlをブラウザで開き、「お問い合わせ」ボタンをクリックしてモーダルの表示や入力欄の動作を確認してください。
実際にフォームを送信するには、利用者自身でPOST形式のデータを受信できるシステムを用意してください。PHPなどで受信処理を作成する場合は、そのファイルをサーバーへ設置し、ブラウザからアクセスできるURLを確認します。外部のフォーム受付サービスを使用する場合は、そのサービスが指定するPOST送信先URLを確認してください。
次に、index.html内のaction="YOUR_POST_URL"を探し、YOUR_POST_URLを取得した送信先URLへ置き換えます。method="post"はそのまま使用します。送信先のシステムでは、name・email・messageという3つの項目名でPOSTデータを受信できるようにしてください。既存の受信システムで異なる項目名を使用している場合は、HTMLのname属性を受信側の仕様に合わせて変更します。
送信先URLの設定後は、お名前・メールアドレス・お問い合わせ内容を入力して「送信する」をクリックし、受信側で正しく処理できることを確認してください。未入力の項目がある場合やメールアドレスの形式が正しくない場合は、ブラウザの標準機能によって送信が制限されます。
このサンプルが担当するのは、フォームの表示、ブラウザ側の入力チェック、指定URLへのPOST送信までです。実際のメール送信、データ保存、送信完了画面、サーバー側の入力検証、迷惑送信対策などは含まれていません。これらは利用者自身が用意する受信システム側で実装してください。HTMLの必須入力チェックだけでは、サーバー側のセキュリティ対策の代わりにはなりません。
カスタマイズできる内容
index.htmlでは、モーダルを開くボタンの文字、モーダルタイトル、説明文、入力項目のラベル、プレースホルダー、ボタンの文字などを変更できます。お名前・メールアドレス・お問い合わせ内容の3項目は、それぞれHTMLのname属性によって送信されるため、項目を追加・変更する場合は受信側のシステムも対応させてください。
style.cssでは、モーダルの最大横幅、内側余白、角丸、背景色、影、入力欄のサイズ、フォーカス時の色、閉じるボタンと送信ボタンのデザインなどを変更できます。また、script.jsのcontactFormModalWindowForm.reset();を削除すると、モーダルを閉じたときに入力内容をリセットしない動作へ変更できます。
数値調整
style.css
padding:12px 24px;
お問い合わせボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
border-radius:8px;
お問い合わせボタンや入力欄、操作ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:calc(100% - 40px);
モーダルの横幅です。画面幅から40pxを引くことで左右に余白を確保します。40pxを大きくすると画面端との間隔が広がります。
max-width:520px;
モーダルの最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。
max-height:calc(100vh - 40px);
モーダルの最大高さです。画面の高さから40pxを引いた範囲に収めます。内容が最大高さを超える場合は、モーダル内で縦スクロールできます。
padding:28px;
モーダルの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
モーダルの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルの影です。20pxは影の上下位置、40pxはぼかし範囲を表します。値を大きくすると影の位置や広がりが変わります。
font-size:22px;
モーダルタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 28px;
モーダル説明文の下側余白です。28pxを大きくするとフォームとの間隔が広がり、小さくすると狭くなります。
gap:22px;
フォーム内の入力項目同士の間隔です。値を大きくすると各項目の間隔が広がります。
gap:8px;
各入力項目のラベルと入力欄の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:12px 14px;
テキスト入力欄とテキストエリアの内側余白です。上下の12pxを大きくすると入力欄が高くなり、左右の14pxを大きくすると文字と枠線の間隔が広がります。
min-height:120px;
お問い合わせ内容を入力するテキストエリアの最小高さです。値を大きくすると入力できる表示領域が高くなり、小さくすると低くなります。
outline:3px solid rgba(37,99,235,.15);
入力欄にフォーカスしたときの外側の強調枠です。3pxを大きくすると枠が太くなり、小さくすると細くなります。
gap:14px;
閉じるボタンと送信ボタンの間隔です。値を大きくするとボタン同士の間隔が広がります。
min-width:140px;
閉じるボタンと送信ボタンの最小横幅です。値を大きくするとボタンが横に広がり、小さくするとコンパクトになります。
padding:13px 24px;
閉じるボタンと送信ボタンの内側余白です。上下の13pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:calc(100% - 40px);とmax-width:520px;によって、画面幅に合わせてモーダルの横幅を調整します。また、max-height:calc(100vh - 40px);とoverflow-y:auto;により、画面の高さに内容が収まらない場合はモーダル内を縦スクロールできます。
画面幅640px以下では、モーダルの内側余白をpadding:24px 18px;へ変更します。さらに、操作ボタンの間隔を10pxに縮小し、閉じるボタンと送信ボタンを均等な横幅に調整します。スマートフォン・タブレット・PCで画面幅に応じた表示ができる構成です。
コメント