カテゴリー: HTML/CSS/JS
PHP で動作する汎用メールフォーム TransmitMail で、WordPress の機能にあるようなパスワード保護(パスワードを知ってる人だけが本文を閲覧可能)を設定して、パスワードを入れないとフォームが表示されない仕組みを作ってみました。
JavaScript で実装することもできますが、ブラウザのソースを見たらフォーム部分がわかりますし、デベロッパーツールでソースを編集してフォームを表示することもできてしまいます。
一方、TransmitMail は PHP で動作しますので、PHP で実装することにしました。PHP を使えばブラウザのソースには現れません。
“TransmitMail でパスワード保護付きのメールフォームを作る” の続きを読む »
カテゴリー: WordPress, アクセシビリティ
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 でエラー時にフォームの先頭にスクロールするカスタマイズで、フォーカスも移動させる” の続きを読む »