How to Provide a Flexible Height to the Layout Field

Introduction

Would you like to provide a flexible height for a Paragraph field when using it inside a Layout field? When using the new Layout field, you can easily break your form into columns simply by dragging and dropping. When using the Paragraph text field, the height is a standard default height.

In this tutorial, we’re going to share a small snippet that will easily adjust the height of the Paragraph Text form field to stretch the height of the entire form.

Creating the form

First, we’ll begin by creating a new form and using the Layout field to drag and drop our other form field into place. If you need assistance with how to use the Layout field, please review this documentation.

Notice that for the purpose of this tutorial, all of our fields with the exception of one are on the left and the Paragraph Text form field is on the right by itself.

Adding the snippet

Now it’s time to add the snippet to our site. If you need help on where and how to add snippets to your site, please review this tutorial.

/**
 * 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 );

Now when the form loads, you’ll see the Paragraph Text field has a flexible height that will increase or decrease as fields are added and removed.

And that’s all you need! Would you like to prevent your form from submitting if the field contains profanity? Check out our tutorial on How to Block Form Submissions Containing Profanity.

Related

Action Reference: wp_head

FAQ

Q: How can I target a single form?

A: If you only want to use this snippet on a single form. You can use this snippet that would target the form ID 3503.

/**
 * 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 );

If you need help in finding your form ID, please check out this tutorial.