お問い合わせはコチラから

Contact form 7のtextareaを自動追従するようにするカスタマイズ

サイト運営

Contact form7でtextareaを使うと、入力欄の行数をどれぐらいにしておくか悩みます。

PCならば、入力欄を調整してもらえばいいので気にならないのですが、スマホの場合は入力欄を拡大するのが面倒、もしくは出来ません。

そんなことからスマホでは、textareaの行数を多くすれば邪魔となり、少なくすれば入力しにくくなるという問題がでます。

入力した文字数に応じて勝手に入力欄が広がるのが一番よいので、そんなカスタマイズが無いか探した結果をまとめておきます。

Contact form 7が勝手に追加するspanタグが邪魔をする

textarea自動調整とか自動追従とかで検索すると出てくるカスタマイズが結構あります。

しかし、Contact form 7にそのまま適用できないものが多いです。

例えば、有名な記事で以下のものがあります。

内容に応じてサイズが可変する を素敵に実装する - Qiita
概要内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計…

一見良さそうに見えるのですが、Contact form 7に組み込むとデザインが崩れます。

想定しているHTML構造とContact form 7のHTML構造が異なるためです。

余計なHTMLタグを追加したり、追加するCSSも多いので、ありものに組み合わせるのは、ちょっと面倒です。

Contact form 7のtextareaを簡単に自動調整するカスタマイズ

半分諦めていたのですが、探したらとても簡単にtextareaを自動追従させるカスタマイズがありました。

HTMLの追加が無いので、Contact form 7にも簡単に組み込めます。

JavaScriptでtextareaの高さを計算して自動で可変させる方法 | WebDev Tech
お問い合わせフォームなどを作成する場合、textareaタグを使用することが多いですよね。 textareaは主に長文を入力してもらう際に使用しますが、 文章の長さに応じてtextareaの高さを可変させたいスクロールバーを表示したくない

実際適用してみたところ、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以外でも適用しやすいと思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました