お問い合わせフォーム付きモーダル
ボタンクリックで開くモーダルウインドウ内にお問い合わせフォームを設置するサンプルです。
氏名・メール・内容を入力でき、送信先（エンドポイント）の設定も可能。
背景スクロールの制御や閉じる操作にも対応しており、シンプルかつ実用的な問い合わせ窓口を手軽に実装できます。
コードについて
本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
デモ
お問い合わせフォーム付きモーダル
ボタンをクリックすると、お問い合わせフォームをモーダル表示します。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ページタイトル -->
<title>お問い合わせフォーム付きモーダルウインドウ</title>
<!-- CSS読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモエリア -->
<div class="contact-form-modal-window_wrap">
<div class="contact-form-modal-window_title">
お問い合わせフォーム付きモーダル
</div>
<p class="contact-form-modal-window_text">
ボタンをクリックすると、お問い合わせフォームをモーダル表示します。
</p>
<button class="contact-form-modal-window_open" type="button" data-modal-open>
お問い合わせ
</button>
</div>
<!-- モーダル全体 -->
<div class="contact-form-modal-window_overlay" data-modal-overlay>
<!-- モーダル本体 -->
<div class="contact-form-modal-window_modal" role="dialog" aria-modal="true">
<div class="contact-form-modal-window_modal-title">
お問い合わせフォーム
</div>
<!-- お問い合わせフォーム -->
<form class="contact-form-modal-window_form">
<label>
お名前
<input type="text" placeholder="山田 太郎">
</label>
<label>
メールアドレス
<input type="email" placeholder="sample@example.com">
</label>
<label>
お問い合わせ内容
<textarea placeholder="お問い合わせ内容を入力してください"></textarea>
</label>
<div class="contact-form-modal-window_buttons">
<button class="contact-form-modal-window_close" type="button" data-modal-close>
閉じる
</button>
<button class="contact-form-modal-window_submit" type="submit">
送信
</button>
</div>
</form>
</div>
</div>
<!-- JavaScript読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。
sample/
├── index.html
├── style.css
└── script.js
index.html をブラウザで開くと、お問い合わせフォーム付きのモーダルウインドウを確認できます。このサンプルはフォームの表示デモであり、メール送信処理は含まれていません。
コメント