Contact form7でtextareaを使うと、入力欄の行数をどれぐらいにしておくか悩みます。
PCならば、入力欄を調整してもらえばいいので気にならないのですが、スマホの場合は入力欄を拡大するのが面倒、もしくは出来ません。
そんなことからスマホでは、textareaの行数を多くすれば邪魔となり、少なくすれば入力しにくくなるという問題がでます。
入力した文字数に応じて勝手に入力欄が広がるのが一番よいので、そんなカスタマイズが無いか探した結果をまとめておきます。
Contact form 7が勝手に追加するspanタグが邪魔をする
textarea自動調整とか自動追従とかで検索すると出てくるカスタマイズが結構あります。
しかし、Contact form 7にそのまま適用できないものが多いです。
例えば、有名な記事で以下のものがあります。
一見良さそうに見えるのですが、Contact form 7に組み込むとデザインが崩れます。
想定しているHTML構造とContact form 7のHTML構造が異なるためです。
余計なHTMLタグを追加したり、追加するCSSも多いので、ありものに組み合わせるのは、ちょっと面倒です。
Contact form 7のtextareaを簡単に自動調整するカスタマイズ
半分諦めていたのですが、探したらとても簡単にtextareaを自動追従させるカスタマイズがありました。
HTMLの追加が無いので、Contact form 7にも簡単に組み込めます。
実際適用してみたところ、textareaの横にスクロールバーが出てしまう現象が発生しました。
スクロールバーが表示されるとスクロールバーが2重になり、スクロールがしにくくなります。
textareaのスクロールバーは、本来は出ないはずです。
組み込む環境によっては、ちょっとしたズレが発生して表示されるのかもしれません。
もし表示されてしまった場合には、javascriptの高さ計算部分がちょっと足りないのが原因ですので、少し足してあげれば、スクロールバーが出なくなりました。
add_action('wp_footer',function(){
if(is_page('contact')){
?>
<script>
window.addEventListener("DOMContentLoaded", () => {
// textareaタグを全て取得
const textareaEls = document.querySelectorAll("textarea");
textareaEls.forEach((textareaEl) => {
// デフォルト値としてスタイル属性を付与
textareaEl.setAttribute("style", `height: ${textareaEl.scrollHeight}px;`);
// inputイベントが発生するたびに関数呼び出し
textareaEl.addEventListener("input", setTextareaHeight);
});
// textareaの高さを計算して指定する関数
function setTextareaHeight() {
this.style.height = "auto";
this.style.height = `${this.scrollHeight+16}px`;
}
});
</script>
<?php
}
});
まとめ
スマホの問い合わせフォームだと、入力欄の自動追従は必須だと思うので、このカスタマイズは、結構使えるTipsだと思います。
HTML構造を変更せずに、textareaタグを直接javascriptで書き換えているので、Contact form 7以外でも適用しやすいと思います。