かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

WordPress ContactForm7 select の先頭の空白 option のテキストを変更したい

6億年ぶりに WordPress 案件をやっています。
Contact Form 7 の select をカスタマイズするメモ。

include_blank で追加される空の項目のテキストを変更したい

Contact Form 7 でフォームを作る際に 空の項目をドロップダウンメニューの先頭に追加する。 (include_blank) オプションを選ぶと先頭に <option value="">---</option> が追加されます。この HTML は固定値でショートコードからテキストを変更することができそうにありません。

wpcf7_form_elements filter を使って Contact Form 7 が出力する DOM をカスタマイズできる

functions.phpwpcf7_form_elements というフィルターを追加します

<?php // functions.php
function my_wpcf7_form_elements($html) {
  $text = '選択してください';
  $html = str_replace('<option value="">---</option>', '<option class="placeholder" value="" disabled selected>' . $text . '</option>', $html);
  return $html;
}

add_filter('wpcf7_form_elements', 'my_wpcf7_form_elements');

wpcf7_form_elements フィルターに渡される引数はまるっと フォームパーツの DOM が入っているので、変更したい箇所を力技で replace しています。 変更後の option に disabledselected 属性を追加することで最初だけ選ばれているけど変更すると選べなくなるので placeholder 的な挙動にすることができます。

デフォルト状態 Contact Form 7 select 👇 選択後 Contact Form 7 select

いいかんじになりました!
おわり₍ ᐢ. ̫ .ᐢ ₎


[参考]

最後に Contact Form 関係の記事書いたの5年前じゃん…

selector WIXOSS 救いがなくてとても好き…