お問い合わせフォーム付きドロワーメニューの作り方
お問い合わせフォーム付きドロワーメニューを作る方法を紹介します。ボタンをクリックすると画面の横からドロワーメニューが表示され、その中で名前やメールアドレス、お問い合わせ内容を入力できるサンプルです。フォームを目立たせたい場合や、ページ遷移せずに問い合わせ受付画面を表示したい場合に利用できます。
HTMLでフォームの構造を作成し、CSSでドロワーメニューや入力フォームのデザインを整え、JavaScriptでドロワーメニューの開閉を制御します。シンプルな構成のため、初心者でも仕組みを理解しやすく、既存サイトへ組み込みやすいサンプルです。
フォームのタイトルや説明文、入力項目のプレースホルダー、送信ボタンの文字、色や余白などは自由に変更できます。お問い合わせページだけでなく、資料請求や予約フォーム、アンケートフォームなどさまざまな用途へ応用できます。
フォーム送信処理は実装していません。送信機能が必要な場合は、PHPなどのサーバーサイド処理を追加してください。
デモ
コードをコピーして使おう！
<!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>
<!-- ドロワーメニューを開く操作エリア -->
<div class="contact-form-drawer-menu_wrap">
<!-- 操作エリアのタイトル -->
<div class="contact-form-drawer-menu_title">
お問い合わせフォーム付きドロワーメニュー
</div>
<!-- 操作エリアの説明文 -->
<p class="contact-form-drawer-menu_text">
ボタンをクリックすると、画面左側へお問い合わせフォームが表示されます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="contact-form-drawer-menu_open"
type="button"
data-contact-drawer-open>
お問い合わせフォームを開く
</button>
</div>
<!-- ドロワーメニュー表示時の背景 -->
<div
class="contact-form-drawer-menu_overlay"
data-contact-drawer-overlay
aria-hidden="true">
<!-- ドロワーメニュー本体 -->
<div
class="contact-form-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="contact-form-drawer-menu-heading">
<!-- ドロワーメニュー上部 -->
<div class="contact-form-drawer-menu_header">
<!-- ドロワーメニューのタイトル -->
<div
class="contact-form-drawer-menu_heading"
id="contact-form-drawer-menu-heading">
お問い合わせ
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="contact-form-drawer-menu_close"
type="button"
data-contact-drawer-close
aria-label="ドロワーメニューを閉じる">
×
</button>
</div>
<!-- フォームの説明文 -->
<p class="contact-form-drawer-menu_description">
必要事項を入力してください。
</p>
<!-- お問い合わせフォーム -->
<form
class="contact-form-drawer-menu_form"
data-contact-drawer-form>
<!-- お名前入力欄 -->
<div class="contact-form-drawer-menu_field">
<label
class="contact-form-drawer-menu_label"
for="contact-form-drawer-menu-name">
お名前
</label>
<input
class="contact-form-drawer-menu_input"
id="contact-form-drawer-menu-name"
type="text"
name="name"
placeholder="山田 太郎"
required>
</div>
<!-- メールアドレス入力欄 -->
<div class="contact-form-drawer-menu_field">
<label
class="contact-form-drawer-menu_label"
for="contact-form-drawer-menu-email">
メールアドレス
</label>
<input
class="contact-form-drawer-menu_input"
id="contact-form-drawer-menu-email"
type="email"
name="email"
placeholder="example@example.com"
required>
</div>
<!-- お問い合わせ内容入力欄 -->
<div class="contact-form-drawer-menu_field">
<label
class="contact-form-drawer-menu_label"
for="contact-form-drawer-menu-message">
お問い合わせ内容
</label>
<textarea
class="contact-form-drawer-menu_textarea"
id="contact-form-drawer-menu-message"
name="message"
placeholder="お問い合わせ内容を入力してください"
required></textarea>
</div>
<!-- 送信ボタン -->
<button
class="contact-form-drawer-menu_submit"
type="submit">
送信する
</button>
</form>
<!-- 送信処理についての注意書き -->
<p class="contact-form-drawer-menu_note">
このサンプルにはフォームの送信処理は実装されていません。
</p>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはお問い合わせフォーム付きドロワーメニューの構造、CSSにはフォームとドロワーメニューのデザイン、JavaScriptにはドロワーメニューの開閉処理を記述しています。現在のコードにはお問い合わせ内容を送信する処理は含まれておらず、画面表示とドロワーメニューの動作確認を目的としたサンプルです。
PHPと組み合わせて実際のお問い合わせフォームとして利用する場合は、index.htmlのform要素に送信先PHPを指定し、method属性をpostへ変更します。お名前・メールアドレス・お問い合わせ内容にはname属性が設定されているため、PHP側ではPOSTデータとして受け取れます。メール送信や入力チェック、保存処理などは送信先PHPで実装してください。
このサンプルはお問い合わせフォームの見た目とドロワーメニューの開閉を確認するためのコードです。PHPと組み合わせる場合も、HTML・CSS・JavaScriptの構成はそのまま利用でき、フォームのaction属性とmethod属性を変更することで送信処理へ接続できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html はお問い合わせフォーム、ドロワーメニュー本体、開くボタン、閉じるボタンを配置します。PHPと組み合わせる場合は、form要素のaction属性へ送信先PHPを指定し、method属性をpostへ変更します。お名前はname=”name”、メールアドレスはname=”email”、お問い合わせ内容はname=”message”としてPHP側で受け取れます。
style.css はドロワーメニューの横幅、背景色、余白、角丸、影、入力欄、送信ボタンなどのデザインを管理します。PHPと組み合わせた場合でも、このファイルはそのまま利用できます。
script.js はドロワーメニューを開く処理、閉じるボタンで閉じる処理、フォーム送信時のデモ用処理を管理します。デモでは送信ボタン押下時の表示のみを行い、実際のお問い合わせ送信処理は行いません。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/index.htmlをブラウザで開くと動作を確認できます。「お問い合わせフォームを開く」ボタンをクリックするとドロワーメニューが開き、「×」ボタンをクリックすると閉じます。
PHPと組み合わせる場合は、index.htmlのform要素を次のように変更します。
action=”#”
method=”get”
を、
action=”contact.php”
method=”post”
へ変更します。送信先のcontact.phpでは、name・email・messageを受け取り、入力チェックやメール送信、データ保存などの処理を実装してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、お名前欄、メールアドレス欄、お問い合わせ内容欄、送信先PHPを変更できます。style.cssではドロワーメニューの横幅、背景色、入力欄の余白、角丸、影、ボタン色などを変更できます。script.jsではドロワーメニューの開閉処理を編集できます。
数値調整
style.cssのwidth:420px;を変更するとドロワーメニューの横幅が変わります。padding:28px;を変更するとドロワー内部の余白が変わります。gap:20px;を変更すると入力欄同士の間隔が変わります。min-height:140px;を変更するとお問い合わせ内容入力欄の高さが変わります。animation:.35s;の0.35秒を変更するとドロワーメニュー表示アニメーションの速度が変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media (max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではドロワーメニューや余白が縮小され、タブレットやPCでは適切な横幅を保ったまま表示されます。
コメント