カテゴリー: HTML/CSS/JS
PHP で動作する汎用メールフォーム TransmitMail で、WordPress の機能にあるようなパスワード保護（パスワードを知ってる人だけが本文を閲覧可能）を設定して、パスワードを入れないとフォームが表示されない仕組みを作ってみました。
JavaScript で実装することもできますが、ブラウザのソースを見たらフォーム部分がわかりますし、デベロッパーツールでソースを編集してフォームを表示することもできてしまいます。
一方、TransmitMail は PHP で動作しますので、PHP で実装することにしました。PHP を使えばブラウザのソースには現れません。
“TransmitMail でパスワード保護付きのメールフォームを作る” の続きを読む »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 でエラー時にフォームの先頭にスクロールするカスタマイズで、フォーカスも移動させる” の続きを読む »カテゴリー: WordPress
この記事は2025年1月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。
メールフォームのスパム対策として、最近は Google reCAPTCHA を導入することがあります。制限はありますが（2024年4月1日に月100万回から1万回と大幅に縮小された）、無料で利用できるので。
WordPress のメジャーなメールフォームプラグイン Contact Form 7 では、標準で Google reCAPTCHA を連携できるようになっています。Contact Form 7 のサブメニュー「インテグレーション」から「reCAPTCHA (v3)」の「インテグレーションのセットアップ」で、取得したサイトキーとシークレットキーを入力するだけでよいのですが、ここで設定するとサイト全体に reCAPTCHA バッジが表示されてしまいます。
“Contact From 7 で Google reCAPTCHA をフォーム画面だけに表示する手軽な方法” の続きを読む »カテゴリー: アクセシビリティ
この記事は2024年1月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。
ラジオボタンやチェックボックスのデザインをカスタマイズする場合、デフォルトのフォームコントロールを隠して CSS で装飾するのが一般的ですが、Web 上で紹介されている手法のほとんどがアクセシビリティへの配慮が欠けていますので注意が必要です。
ここでのアクセシビリティへの配慮というのは、キーボード操作と Windows のハイコントラスト環境です。キーボード操作については配慮されている場合もありますが、特に Windows のハイコントラスト環境への配慮が欠けています。
“ラジオボタンやチェックボックスを CSS でカスタマイズする際のアクセシビリティ” の続きを読む »カテゴリー: HTML/CSS/JS
この記事は2022年7月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Copyright 表示不要の PHP 製汎用メールフォームシステムの TransmitMail。静的 HTML の Web ページでよく利用させていただいています。
この TransmitMail のテンプレートは HTML ファイルなのですが、ヘッダー部分などで PHP を使いたい場合があります。
だからと言って、header.html を header.php に変えて PHP を組み込み、input.html や confirm.html 等に書かれている {include:header.html} を {include:header.php} と書き換えても、PHP がそのまま文字列として処理されて機能しません。
このような場合、index.php にインクルードするか、直接記述すれば PHP が機能します。
“TransmitMail のテンプレートで PHP を使う” の続きを読む »カテゴリー: HTML/CSS/JS
この記事は2020年6月14日に書かれたものです。情報が古い可能性がありますのでご注意ください。
主に静的サイトにメールフォームを設置する際、TransmitMail をよく利用させていただいています。TransmitMail は Copyright 表示不要の PHP 製汎用メールフォームシステムで、ファイルの添付や CSV 出力など、柔軟で豊富な機能が特徴です。
一方 WordPress 案件では、用途に応じてプラグインの WP MW Form や ContactForm 7 を利用していますが、場合によってはこの TransmitMail をテーマに組み込んで利用することもあります。
ただ、TransmitMail はメールヘッダに Reply-To（返信先アドレス）を設定することができません。ググってもその方法が見つかりませんでしたので、私なりにカスタマイズしてみました。
“TransmitMail で Reply-To ヘッダを設定する” の続きを読む »カテゴリー: WordPress
この記事は2019年9月15日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のメールフォームプラグイン MW WP Form を利用しているサイトの一つで、下記のように各項目の内容が空のメールが送信される現象がありました。
お問い合わせフォームより送信されました。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
お名前 :
メールアドレス :
お電話番号 :
お問い合わせ内容 :
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
メールに送信元の情報を記載するようにしているので、そのIPアドレスを調べてみたら、発信元はロシアで、いくつかのスパムレポート（ブラックリスト）に載っていました。
各項目は必須項目となっていますが、そのチェックに引っ掛からずに送信されてます。恐らく、スパムボットによって直接メールフォームプログラムにアクセスして送信されているものと思われますが、その内容が、不正サイトに誘導するわけでもなく、空なのでスパム行為の意図が不明です。
でも、頻繁に空メールが送られてくるのは鬱陶しいので、対策を施してみました。
“MW WP Form で空メールが送信される現象とその対策” の続きを読む »カテゴリー: WordPress
この記事は2019年6月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のメールフォームプラグインといえば、Contact Form 7 と MW WP Form が有名ですが、それぞれに特徴があり、案件によって使い分けています。
簡単にフォームを作成できて、追加のプラグイン等による機能拡張が多いのが Contact Form 7、細かい設定ができて、出力される HTML をコントロールしやすいのが MW WP Form かなと感じています。
このたび、既に Contact Form 7 を使っているサイトで、新たなフォームの作成案件があり、その中に星形の5段階評価を付ける項目がありました。星形のインターフェイスは必須ではなかったのですが、要望ですし、フォームに（Contact Form 7 でというわけではなく）星形の5段階評価を作成する方法は、検索するといくつか紹介されていますので、できないことはないだろうと、実装してみました。
この記事は2017年9月4日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Welcart で商品購入時にお客様情報を入力する場合や発送先を入力する場合、あるいは会員登録する際のメンバー情報入力フォームについての問題。名前や住所、電話番号などの項目とテキスト入力欄などのフォーム部品には、ラベルによる関連付けがありません。ラベルはアクセシブルなフォームにとって最低限必要な要素であり、これではアクセシビリティ的によろしくありません。
メールアドレスとパスワードの入力枠については、テーマファイルに直接記述しますので、その記述の中でラベルによる関連付けを加えることができますが、名前や住所、電話番号などの項目はプラグインによって自動生成されますので、容易にソースを変更することができません。（プラグインのファイルを編集すれば可能ですが、アップデートの際の不具合の可能性や手間を考えるとプラグインのファイルは触りたくないので）
そこで jQuery を使ってラベルによる関連付けを加えてみました。
カテゴリー: WordPress
この記事は2017年4月19日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のメールフォームプラグイン「MW WP Form」のセレクトボックスで、先頭に「選択してください」と表示してこれを空欄とみなす方法として、サポートフォーラム等で紹介されている方法は、次のように JavaScript を使う方法です。
管理画面でセレクトボックスを配置するときに
[mwform_select name="hoge" children=",山,海,川"]のような感じでchildrenの最初に , を入れます。
これでvalueが空の項目が追加されます。
このままだと「選択してください」の表示がされないので、JavaScriptを使い<script type="text/javascript"> jQuery( function( $ ) { $( '#mw_wp_form_mw-wp-form-710 select option[value=""]' ) .html( '選択してください。' ); } ); </script>としてやると表示されるようになります（セレクタは適当に合わせてください）。
ただ、これだと option 要素の内容（label）がないので HTML5 の文法的にはバリデーションエラーとなります。もっとも、MW WP Form では form 要素の action 属性の値が空なので、ここもバリデーションエラーとなるのですが。
で、いろいろ試していたら、MW WP Form の機能だけで簡単に、先頭に「選択してください」と表示してこれを空欄とみなす処理ができることがわかりました。
“MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法（JavaScript 非使用）” の続きを読む »