目次
注）本記事の内容は、記事掲載日時点の情報に基づき判断しておりますが、一若輩者の執筆であることから個別の案件での具体的な処理については責任を負いかねます旨ご理解いただきたく存じます。制度上の取扱いに言及しておりますが、個人的な見解であり、より制度深化に資すればと考えてのものです。
Ⅰ.前提・問題発生
池田一暁公認会計士事務所（福岡）の公式サイトにて、ある日お問い合わせフォーム🔗に不思議な現象が発生しました。
メールアドレスを入力すると、なぜか自動で “大文字” になってしまうのです。
今回はこの不具合に対して、AI（ChatGPT）と試行錯誤しながら解決に至った過程を、記録として記事に致します。
🔎 問題の内容：メール入力が強制的に大文字に
フォームのメール欄にアドレスを入力すると、画面上では「××@×××.MICROSOFT.COM」とすべて大文字に見えてしまいます。
その他の事象は以下の様です。
入力自体は正しく送信されている
しかしユーザーには「自分で大文字にしていないのに…？」と混乱を招く
これはひいては、潜在顧客の離脱を招いてしまう
当事務所では、WordPress + Contact Form 7 + Sydneyテーマを使用しています。
Ⅱ.試したこと・GPTの提案
🛠 試したこと①：text-transform のCSS指定
最初に疑ったのはCSSによる装飾です。
input[type="email"] {
text-transform: none !important;
}これを「外観 → カスタマイズ → 追加CSS」に追加しましたが……
結果：変わらず大文字表示のまま
ページIDを指定して強化：
body.page-id-57 input[type="email"] {
text-transform: none !important;
}これでも効果なし (´;ω;｀)
🧠 GPTの提案：フォームのHTMLやContact Form 7のショートコード調整
[email* your-email autocapitalize:off]autocapitalize:off はスマートフォンでの自動大文字化を防ぐための設定。
さらに、コンタクトフォーム自体のCSS設定を疑い、ショートコードについても修正を加えてみました。
これも効果なし (´;ω;｀)
結果、PC画面で、引き続き大文字化しているため根本原因ではなかったのです。
Ⅲ.開発者ツールでの調査
🔬 開発者ツールでの調査
さらに、解決していない旨をGPTに問いただすと、styleのコードをスクショで見せるように依頼されました。
スクショをアップして検討を依頼するとGPTは、思いもよらない箇所に原因があることを画像データから識別したのです。
Chromeの検証ツールで input[type="email"] に適用されているスタイルを追っていくと、
font-family: "Asap", "Playfair Display SC";この “Playfair Display SC” フォントが Small Caps（小文字も大文字風に見せる書体） だったことが判明！
本当は小文字で入力されているのに、大文字に見えるだけだったのです(´;ω;｀)
Ⅳ.結論と今回の学び
✅ 最終解決：フォントを上書きするCSS
body.page-id-57 input[type="email"] {
font-family: Arial, sans-serif !important;
text-transform: none !important;
}この1行で問題は解決！
メール欄に入力された文字が正しく小文字で表示されるようになりました。
コンタクトフォームの入力箇所のフォントを変えるという解決法です。
📘 今回の学び
見た目の大文字化は text-transform だけでなくフォントにも原因がある
Small Caps（SC）フォントに注意
AIと開発者ツールを併用すれば、CSS不具合の原因特定も可能
今回、非常に勉強になったのは、AI(Chat GPT)の予定していない解決策の発見方法についてです。
私は、課題を解決するまで、スタイルの記述方法に問題の所在があると疑ってやみませんでした。だからこそ、何度もその不具合についてGPTへ問いただし、掘り下げていたわけですけれども。
人間の論理的な思考過程の中で見えてこない部分、今回は、開発ツールのスクショの端からGPTが解決方法を見出したのです。
将棋の棋士である羽生善治が将棋の中終盤でみせる妙手、「羽生マジック」のような一手を垣間見ました。
本業の業務においてAIの利用は間違いもあるため慎重を期していますが、
課題への障壁を取り除くために、意図していない原因を発見するとても有用なツールになると認識しました。
🔍 関連キーワード
WordPress メール欄 大文字 表示される
Contact Form 7 メール入力 大文字化
フォーム 入力 小文字 表示する 方法
Sydney テーマ フォームの不具合 対処法
WordPress CSS 上書き text-transform
人間がAIと課題の解決を喜び分かち合うところ☟
