お問い合わせフォームの「同意する」チェックボックスと送信ボタン連動の作り方

シュウ

今回は【HTML/CSS/JS】お問い合わせフォームの「同意する」チェックボックスと送信ボタン連動の作り方の解説になります！

こんな方に読んでほしい

お問い合わせフォームを作成している方
個人情報の取り扱いに同意してもらってから、送信してもらう仕組みを作りたい方です。
フロントエンド初心者の方
HTML・CSS・JavaScriptを使った、基本的なフォームの制御を学びたい方です。
コピペで簡単に実装したい方
今回は、そのまま使えるコードを用意して解説しています。

[記事の内容]

チェックボックスと送信ボタンの連動とは

お問い合わせフォームでは、個人情報の取り扱いに同意してもらったうえで送信してもらうケースが多くあります。
デモサイトはコチラから。
そこで、「同意する」にチェックを入れるまで、送信ボタンを押せないようにする仕組みを実装します。
完成イメージは以下のようになります。

チェックを入れる前は送信ボタンがグレーで押せず、チェックを入れると黒色になり押せるようになります。

メリット

同意の確認漏れを防止：同意なしで送信されることを防げます。
状態が分かりやすい：ボタンの色が変わるため、送信できるかどうかが一目で分かります。
実装が簡単：JavaScriptは数行だけで、ライブラリも不要です。

HTMLの記述方法について

まずは、ベースとなるHTML構造を作成します。
プライバシーポリシー、同意チェックボックス、送信ボタンの3つを用意することがポイントです。
書き方は以下のようになります。

<div class="policy-area" role="region" aria-label="個人情報に関する取り扱いについて" tabindex="0">
    <h3 class="policy-ttl">個人情報に関する取り扱いについて</h3>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

<div class="contactForm__agree">
    <label class="contactForm__agreeLabel">
        <input id="agree" class="contactForm__agreeCheck" name="agree" type="checkbox" value="1" />
        <span class="contactForm__agreeText">個人情報に関する取り扱いについて同意する</span>
    </label>
</div>

<p class="submitbtn">
    <input id="submitbtn" type="submit" value="送信する" disabled />
</p>
<input type="hidden" name="mailToNum" value="0" />
<input type="hidden" name="mode" value="confirm" />

●①policy-area: 個人情報の取り扱いについて記載するエリアです。role="region"とaria-labelを指定し、スクリーンリーダーでも内容が分かるようにしています。

●②contactForm__agree: 同意チェックボックスを囲むエリアです。labelで囲むことで、テキストをクリックしてもチェックを切り替えられます。

●③id=”agree”: チェックボックスのIDです。JavaScriptで、チェックの状態を取得するために使用します。

●④id=”submitbtn”と disabled: 送信ボタンのIDです。disabledを指定しておくことで、初期状態では押せないようにします。

●⑤type=”hidden”: 画面には表示されない、フォームの送信用データです。今回のサンプルでは、mailToNumとmodeを指定しています。ご利用のフォームに合わせて変更してください。

※<form>タグの中に記述してください。tabindex="0"を指定しているため、キーボード操作でもポリシーエリアにフォーカスできます。

CSSのスタイル調整について

次に、CSSでチェックボックスと送信ボタンのデザインを調整します。
チェックボックスはブラウザ標準の見た目を消して、オリジナルのデザインにしています。
書き方は以下のようになります。

/* --- 同意チェックボックス --- */
.contactForm__agree {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.contactForm__agreeLabel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.contactForm__agreeCheck {
	appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 1px solid #CCC;
	border-radius: 8px;
	background-color: #fff;
	cursor: pointer;
	transition: background-color 0.08s ease-out, border-color 0.2s ease;
}

.contactForm__agreeCheck:checked {
	background-color: #007bff;
	border-color: #007bff;
}

.contactForm__agreeCheck:checked::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 10px;
	width: 7px;
	height: 13px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.contactForm__agreeText {
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 0.02em;
	white-space: nowrap;
	line-height: 1;
}

/* --- 送信ボタン --- */
.submitbtn {
	text-align: center;
}

/* 非活性（無効）時：グレー */
.submitbtn input[type="submit"]:disabled {
	background-color: #ccc;
	color: #666;
	cursor: not-allowed;
	border: none;
}

/* 有効時：黒 */
.submitbtn input[type="submit"] {
	background-color: #000;
	color: #fff;
	cursor: pointer;
	border: none;
	padding: 12px 40px;
	font-size: 1.6rem;
	font-weight: bold;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

●①appearance: none;: チェックボックスのブラウザ標準デザインを消し、widthやborderで自由にデザインできるようにします。

●②:checked: チェックが入ったときのスタイルです。背景色と枠線の色を青に変更します。

●③:checked::after: 疑似要素でチェックマークを作成します。枠線を2辺だけ指定し、rotate(45deg)で回転させることで「✓」の形になります。

●④white-space: nowrap;: 同意テキストが途中で改行されないようにします。

●⑤:disabled: 送信ボタンが無効のときのスタイルです。グレーにして、cursor: not-allowed;で押せないことを分かりやすくします。

●⑥input[type=”submit”]: 送信ボタンが有効のときのスタイルです。黒色の背景に白文字を指定します。

デザインの数値や色は、ご自身のサイトに合わせて自由に変更してください。

JavaScriptで動作を制御について

最後に、JavaScriptでチェックボックスの状態に合わせて、送信ボタンの有効・無効を切り替えます。
書き方は以下のようになります。

document.addEventListener('DOMContentLoaded', () => {
	const agreeCheckbox = document.getElementById('agree');
	const submitBtn = document.getElementById('submitbtn');

	// ボタンの有効・無効を切り替える関数
	const toggleSubmitButton = () => {
		submitBtn.disabled = !agreeCheckbox.checked;
	};

	// ページ読み込み時の初期状態を反映（リロード対策）
	toggleSubmitButton();

	// チェックボックス操作時に状態を反映
	agreeCheckbox.addEventListener('change', toggleSubmitButton);
});

●①DOMContentLoaded: HTMLの読み込みが完了してから処理を実行します。要素が存在しない状態で、取得しようとするエラーを防げます。

●②要素を取得: getElementById()を使用して、チェックボックスと送信ボタンを取得します。

●③切り替え用の関数を作成: agreeCheckbox.checkedは、チェックが入っているとtrueになります。!で反転させて、disabledに代入しています。

●④初期状態を反映: ページ読み込み時にも、関数を1回実行します。ブラウザの機能でチェック状態が復元された場合にも、正しく反映できます。

●⑤changeイベントで切り替え: addEventListener('change', ...)を使用して、チェックの状態が変わるたびに、送信ボタンの状態を更新します。

JavaScriptの制御は、あくまで画面上の補助的な仕組みです。ブラウザの開発者ツールなどでdisabledを外すと、同意なしでも送信できてしまいます。必要な場合は、サーバー側でもagreeの値を確認するようにしましょう。

まとめ

今回はこれで以上です。
今回は、お問い合わせフォームの「同意する」チェックボックスと、送信ボタンを連動させる方法を解説しました。
HTMLでdisabled付きの送信ボタンを用意し、CSSで状態ごとのデザインを調整し、JavaScriptでchangeイベントに合わせて切り替えるだけで実装できます。
ぜひ、ご自身のフォームにも取り入れてみてください。

POINT