「Contact Form 7」を使ってお問い合わせフォームを作っているとき、フォームのインプットやテキストエリアが、親要素をはみ出して表示されてしまうことがあります。

これ、CSSでwidth:100%;を指定しても効かないんですよね。

問題の原因は自動で出力されている［size属性］です。

今日は、この『Contact Form 7 で出力されるsize属性』を出力しない方法を紹介します。

functions.php を使って制御

フォーム出力時に自動的に生成されるsize属性を削除したい場合、フィルターフックを使って制御可能です。
具体的なコードは以下。

add_filter('wpcf7_form_elements', function($content) {
	$content = preg_replace('/\s*size="\d+"/i', '', $content);
	return $content;
});

説明：

  1. 「wpcf7_form_elements」フィルターフックを利用して、生成されるHTMLからsize属性を取り除きます。
  2. 正規表現で『size=”数字”』を検出し、削除します。

このコードを functions.php の適当な場所に記述すると「size属性の削除」が自動的に適用されます。
導入後はフォームの見た目をさらに柔軟にカスタマイズできます。

ぜひお試しください。