このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

2025年12月の記事(2件)

TransmitMail でパスワード保護付きのメールフォームを作る

PHP で動作する汎用メールフォーム TransmitMail で、WordPress の機能にあるようなパスワード保護(パスワードを知ってる人だけが本文を閲覧可能)を設定して、パスワードを入れないとフォームが表示されない仕組みを作ってみました。

JavaScript で実装することもできますが、ブラウザのソースを見たらフォーム部分がわかりますし、デベロッパーツールでソースを編集してフォームを表示することもできてしまいます。

一方、TransmitMail は PHP で動作しますので、PHP で実装することにしました。PHP を使えばブラウザのソースには現れません。

“TransmitMail でパスワード保護付きのメールフォームを作る” の続きを読む »

Contact Form 7 でエラー時にフォームの先頭にスクロールするカスタマイズで、フォーカスも移動させる

WordPress のメールフォームプラグイン Contact From 7。デフォルトでは、送信ボタンを押下した時のエラーメッセージや送信完了などのメッセージはフォームの下に表示されます。

この応答メッセージをフォームの上に表示して、エラーがある場合にフォームの先頭にスクロールさせるというカスタマイズがあります。よく紹介されているのが次のようなものです。

まずフォームのソースで応答メッセージを表示するショーコード [response] をフォームの先頭に入れます。

[response]
(フォーム要素)
[submit "送信する"]

そして、バリデーションエラー時に発火するイベント wpcf7invalid を使ってエラーメッセージの要素 '.wpcf7-response-output' へスクロールさせます。

document.addEventListener('wpcf7invalid', function(event) {
	var position = $('.wpcf7-response-output').offset().top;
	$('html, body').animate({
		scrollTop: position
	}, 300);
}, false );

確かにこれで送信ボタン押下時にエラーがあると、フォームの先頭に表示したエラーメッセージにスクロールするのですが、このままではフォーカス移動の問題があります。

“Contact Form 7 でエラー時にフォームの先頭にスクロールするカスタマイズで、フォーカスも移動させる” の続きを読む »