AI要約
レイアウトフィールド内で段落テキストフィールドを使用する際に、柔軟な高さを設定したいですか？ 段落テキストフィールドをレイアウトフィールドに追加すると、フィールドのデフォルトの高さが使用されます。しかし、カスタム CSS スニペットを使用して段落テキストフィールドをカスタマイズすれば、レイアウトフィールドの高さに合わせて自動的に調整させることができます。
このチュートリアルでは、段落テキストフォームフィールドの高さを簡単に調整して、レイアウトフィールドの高さを引き伸ばすスニペットを紹介します。
フォームの作成
まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。フォームビルダーで、フォームに レイアウトフィールド を含め、必要なすべてのフィールドを追加してください。
このチュートリアルでは、1つを除くすべてのフィールドが左側の列にあり、右側の列に段落テキストフォームフィールドがあることに注意してください。
スニペットの追加
次に、スニペットをサイトに追加します。以下のコードスニペットをコピーしてサイトに貼り付けてください。スニペットをサイトに追加する場所と方法についてサポートが必要な場合は、このチュートリアル を参照してください。
/**
* Add a flexible height to the Paragraph Text field when using with the Layout field
*
* @link https://wpforms.com/developers/how-to-provide-a-flexible-height-to-the-layout-field/
*/
function wpf_fit_textarea_to_column_css() {
// Field ID of the Paragraph Text form field.
$field_id = 3;
echo "
<style>
.wpforms-layout-column .wpforms-field-textarea[data-field-id=\"{$field_id}\"] {
height: 100%;
}
.wpforms-layout-column .wpforms-field-textarea[data-field-id=\"{$field_id}\"] > textarea {
height: calc( 100% - 24px ) !important;
}
</style>
";
}
add_action( 'wp_head', 'wpf_fit_textarea_to_column_css', 10 );
注意: 上記のスニペットでは、段落テキスト フォームフィールドの ID は 3 であり、スニペットで参照しています。この ID は、ご自身のフィールドの ID に合わせて更新する必要があります。フィールド ID の見つけ方がわからない場合は、このチュートリアル を参照してください。
これで、フォームが読み込まれると、段落テキストフィールドに柔軟な高さが表示され、フィールドの追加や削除に合わせて増減します。
よくある質問
以下に、レイアウトフィールドの段落テキストフィールドのカスタマイズに関するよくある質問への回答をまとめました。
単一のフォームを対象にするにはどうすればよいですか？
このスニペットを単一のフォームでのみ使用したい場合は、以下のスニペットを使用してください。
/**
* Add a flexible height to the Paragraph Text field when using with the Layout field
*
* @link https://wpforms.com/developers/how-to-provide-a-flexible-height-to-the-layout-field/
*/
function wpf_fit_textarea_to_column_css() {
// Field ID of the Paragraph Text form field.
$field_id = 19;
echo "
<style>
form#wpforms-form-3503 .wpforms-layout-column .wpforms-field-textarea[data-field-id=\"{$field_id}\"] {
height: 100%;
}
form#wpforms-form-3503 .wpforms-layout-column .wpforms-field-textarea[data-field-id=\"{$field_id}\"] > textarea {
height: calc( 100% - 24px ) !important;
}
</style>
";
}
add_action( 'wp_head', 'wpf_fit_textarea_to_column_css', 10 );
以下のスニペットは、IDが3503のフォームを対象としています。このIDは、カスタマイズしたいフォームのIDに置き換える必要があります。フォームIDの見つけ方がわからない場合は、このチュートリアルを確認してください。
これで、レイアウトフィールド内で使用する際の段落テキストフィールドの高さをカスタマイズする方法を学びました。
次に、フィールドに不適切な言葉が含まれている場合にフォームの送信を防ぎたいですか？不適切な言葉を含むフォーム送信をブロックするチュートリアルをご覧ください。
関連
アクションリファレンス：wp_head