会員登録フォーム付きモーダルウインドウの作り方
会員登録フォーム付きモーダルウインドウをHTML・CSS・JavaScriptだけで作る方法を紹介します。ボタンをクリックするとモーダルウインドウが開き、名前・メールアドレス・パスワードなどの入力フォームを表示できるサンプルです。ページ遷移せずに会員登録画面を表示したい場合に利用できます。
このサンプルではモーダルウインドウの表示・非表示、フォームレイアウト、背景クリックや閉じるボタンによる閉じる処理を実装しています。ライブラリを使用していないため、そのままコピーして利用でき、デザインも自由に変更できます。
実際の会員登録処理は含まれていません。PHPなどのサーバーサイドと組み合わせることで、入力内容の保存やパスワードのハッシュ化、メール認証などの機能を追加できます。会員サイトや管理画面、予約システムなど、さまざまなWebサイトで活用できます。
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本記事を利用したことによって発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると会員登録フォーム付きモーダルウインドウを表示します。
「会員登録フォームを表示」をクリックするとモーダルウインドウが表示されます。背景または「×」ボタンをクリックすると閉じます。
コードをコピーして使おう！
<!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>
<!--
==================================================
このサンプルについて
==================================================
このサンプルはHTML・CSS・JavaScriptのみで
会員登録フォーム付きモーダルウインドウを表示するサンプルです。
PHPと組み合わせて会員登録機能を実装する場合
・formタグのaction属性へ送信先PHPを指定してください。
・method属性をpostへ変更してください。
・name属性(name・email・password・password_confirm)は
PHPで受け取る項目名として利用できます。
例
action="signup.php"
method="post"
会員登録処理・入力チェック・メールアドレス重複確認・
パスワードのハッシュ化・データベース保存などは
PHP側で実装してください。
==================================================
-->
<!-- モーダルを開くエリア -->
<div class="signup-modal-window_wrap">
<!-- タイトル -->
<div class="signup-modal-window_title">
会員登録フォーム付きモーダル
</div>
<!-- 説明文 -->
<p class="signup-modal-window_text">
ボタンをクリックすると会員登録フォームを表示します。
</p>
<!-- 開くボタン -->
<button
class="signup-modal-window_open"
type="button"
data-signup-modal-open>
会員登録フォームを表示
</button>
</div>
<!-- モーダル背景 -->
<div
class="signup-modal-window_overlay"
data-signup-modal-overlay>
<!-- モーダル本体 -->
<div
class="signup-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="signup-modal-title">
<!-- 閉じるボタン -->
<button
class="signup-modal-window_close"
type="button"
data-signup-modal-close
aria-label="閉じる">
×
</button>
<!-- タイトル -->
<div
id="signup-modal-title"
class="signup-modal-window_heading">
会員登録
</div>
<!-- 会員登録フォーム -->
<form
class="signup-modal-window_form"
action="#"
method="get">
<!-- お名前入力欄 -->
<label>
お名前
<input
type="text"
name="name"
placeholder="山田 太郎"
required>
</label>
<!-- メールアドレス入力欄 -->
<label>
メールアドレス
<input
type="email"
name="email"
placeholder="sample@example.com"
required>
</label>
<!-- パスワード入力欄 -->
<label>
パスワード
<input
type="password"
name="password"
placeholder="********"
required>
</label>
<!-- パスワード確認入力欄 -->
<label>
パスワード（確認）
<input
type="password"
name="password_confirm"
placeholder="********"
required>
</label>
<!-- 会員登録ボタン -->
<button
class="signup-modal-window_submit"
type="submit">
会員登録
</button>
</form>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには会員登録フォーム付きモーダルウインドウの構造、CSSにはフォームとモーダル全体のデザイン、JavaScriptにはモーダルの開閉処理を記述しています。ライブラリを使用せず、HTML・CSS・JavaScriptだけで動作するため、そのままコピーして利用できます。
PHPと組み合わせて実際の会員登録機能を作成する場合は、index.htmlのform要素に送信先PHPを指定し、method属性をpostへ変更します。フォームにはお名前・メールアドレス・パスワード・確認用パスワードのname属性が設定されているため、PHP側ではPOSTデータとして受け取れます。入力チェック、メールアドレス重複確認、パスワードのハッシュ化、データベース保存などの会員登録処理は送信先PHPで実装してください。
このサンプルは会員登録フォームの見た目とモーダルの開閉動作を確認するためのコードです。PHPと組み合わせる場合もHTML・CSS・JavaScriptはそのまま利用でき、form要素のaction属性とmethod属性を変更するだけで会員登録処理へ接続できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
会員登録フォーム、モーダル本体、開くボタン、閉じるボタンを配置します。PHPと組み合わせる場合は、form要素のaction属性へ送信先PHPを指定し、method属性をpostへ変更します。name=”name”、name=”email”、name=”password”、name=”password_confirm”はPHP側でそのまま受け取れます。
style.css
モーダル全体のデザインを管理します。背景色、文字色、入力欄、ボタン、余白、角丸、影、フォーム全体のレイアウトなどを自由に変更できます。PHPと組み合わせた場合でも、このファイルはそのまま利用できます。
script.js
モーダルを開く処理、閉じるボタンで閉じる処理、背景クリックで閉じる処理を管理します。サンプルでは送信を停止するだけで、会員登録処理は行いません。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/index.htmlをブラウザで開くと動作を確認できます。「会員登録フォームを表示」をクリックするとモーダルウインドウが開き、「×」ボタンまたは背景部分をクリックすると閉じます。
PHPと組み合わせる場合は、index.htmlのform要素を次のように変更します。
action=”#”
method=”get”
を、
action=”signup.php”
method=”post”
へ変更します。送信先のsignup.phpでは、お名前・メールアドレス・パスワード・確認用パスワードを受け取り、会員登録処理を実装してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、各入力欄、送信先PHPを変更できます。style.cssではモーダルの横幅、背景色、入力欄のサイズ、余白、角丸、影、ボタン色などを変更できます。script.jsではモーダルの開閉動作を編集できます。
数値調整
style.cssのmax-width:460px;を変更するとモーダルの横幅が変わります。padding:32px;を変更するとモーダル内部の余白が変わります。gap:18px;を変更すると入力欄同士の間隔が変わります。width:36px;とheight:36px;を変更すると閉じるボタンの大きさが変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、max-height:90vh、padding、@media (max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではモーダルや余白が自動で縮小され、タブレットやPCでは最大横幅を保ったまま中央に表示されます。
コメント