こんにちは、現在フリーのweb制作者として活動しているしょーご（@samuraibrass）といいます。
みなさん、フォームを制作するときバリデーションはかけてますでしょうか？
入力してない箇所をコメントで示したり、入力しなければ、送信できないようにしたり、です。
特にWordPressでなく静的サイトにフォームを埋め込む場合は、JavaScriptやjQueryで制御することが多いかと思います。
最低限、フォームやプライバシーポリシーに同意しなければ、送信できないようにしておくのは、誤送信防止やスパムチェックのためにやっておきたいところ。
jQuery利用でフォームの入力欄＆プライバシーポリシーに同意が埋まるまでsubmitボタンが押せないようにすることができるようになる
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
フォームの完成形
前提事項
この記事のフォームはGoogleフォームとの紐付けを行っている前提なので、nameやactionにGoogleフォームと同様の情報を載せています。
各々自分で作成したGoogleフォームのnameやaction URLを該当部分に書いてください。
フォームのソースコード解説
まずはhtmlとcss
<body>
<div class="form-wrapper">
<form
action="https://docs.google.com/forms/u/0/d/e/hoge-/formResponse"
id="form">
<div class="box">
<label for="name">お名前</label>
<input type="text" name="entry.396xxxxx" id="name" placeholder="お名前" required>
</div>
<div class="box">
<label for="mail">メールアドレス</label>
<input type="mail" name="entry.1934xxxxx" id="mail" placeholder="メールアドレス" required>
</div>
<div class="box">
<p class="box">お好きなプログラミング言語</p>
<div class="flex-box">
<label>
<input type="radio" name="entry.1977xxxx" required value="scala">
<span>scala</span>
</label>
</div>
<div class="flex-box">
<label>
<input type="radio" name="entry.1977xxxx" required value="kotlin">
<span>kotlin</span>
</label>
</div>
<div class="flex-box">
<label>
<input type="radio" name="entry.1977xxxx" required value="basic">
<span>basic</span>
</label>
</div>
</div>
<div class="box">
<textarea name="entry.181xxxxx" id="" cols="30" rows="10" placeholder="自由記述"></textarea><!-- /# -->
</div>
<div class="box">
<label for="privacyCheck">プライバシーポリシーに同意します</label>
<input type="checkbox" id="privacyCheck" required>
</div>
<input type="submit" id="js-submit" disabled>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>.form-wrapper {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.flex-box {
display: flex;
align-items: center;
}ここで重要なのはformのidの部分と、inputのtypeで使用しているtype、プライバシーポリシーのid、submitボタンのidぐらいです。あとはGoogleフォームとの紐付けやcssのクラスなどを当てているので、今回のsubmitボタン操作には直接的には関係ないです。
それとjQueryを読み込んでおいてください。
次にjQuery。
$(document).ready(function () {
const $submitBtn = $('#js-submit')
$('#form input,#form textarea').on('change', function () {
if (
$('#form input[type="text"]').val() !== "" &&
$('#form input[type="email"]').val() !== "" &&
$('#form input[type="checkbox"]').val() !== "" &&
$('#form #privacyCheck').prop('checked') === true
) {
$submitBtn.prop('disabled', false);
} else {
$submitBtn.prop('disabled', true);
}
});
});ここのjQueryコードを解説していきます。
フォームinputに値が入っているか確認する
const $submitBtn = $('#js-submit')まずは定数submitBtnを定義します。submitボタンのidを指定します。
$('#form input,#form textarea').on('change', function () {
if (
$('#form input[type="text"]').val() !== "" &&
$('#form input[type="email"]').val() !== "" &&
$('#form input[type="checkbox"]').val() !== "" &&
$('#form #privacyCheck').prop('checked') === true
) ここのif文定義は、まず
- changeイベントでinput,textareaに変更があるたびに発火
- if文内で各inputに対して空じゃないかチェック
- 最後はprivacyCheck（プライバシーポリシーの部分）にcheckedがついているか確認
inputに値が入っているか確認したらdisabledを操作
{
$submitBtn.prop('disabled', false);
} else {
$submitBtn.prop('disabled', true);
}- 上記が満たされるのであれば、submitBtnからdisabledを外し、
- 空欄が存在するのであれば、disabledはfalseとなる
jQuery別の書き方
こちらでも動きます。よりシンプルな記述です。
$(document).ready(function () {
const $submitBtn = $('#js-submit');
const $form = $('#form');
$form.find('input, textarea').on('change', function () {
const allFilled = $form.find('input[type="text"]').val() !== "" &&
$form.find('input[type="email"]').val() !== "" &&
$form.find('#privacyCheck').prop('checked') === true;
$submitBtn.prop('disabled', !allFilled);
});
});
コードの解説を一行ずつAIに行ってもらう方法もあり、そちらはWeb制作でのChatGPTの使い方、Cursorの使い方記事を参照してください。
結構JSの勉強にも使えます。
アクセシビリティに準拠したフォームの作成はこちら
Googleフォームとの連携はこちら
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
