Proporcionar una altura flexible al campo de diseño

¿Le gustaría proporcionar una altura flexible para un campo de Texto de Párrafo al usarlo dentro de un campo de Diseño? Si agrega el campo de Texto de Párrafo a un campo de Diseño, utiliza la altura predeterminada del campo. Sin embargo, puede usar un fragmento de CSS personalizado para personalizar el campo de Texto de Párrafo de modo que se ajuste automáticamente para que coincida con la altura del campo de Diseño.

En este tutorial, compartiremos el fragmento que ajustará fácilmente la altura del campo de formulario de Texto de Párrafo para estirar la altura del campo de Diseño.

Creación de su formulario

Comience por crear un formulario nuevo o editar uno existente para acceder al creador de formularios. En el creador de formularios, asegúrese de incluir el campo de Diseño en su formulario y agregue todos los campos necesarios.

Observe que para este tutorial, todos nuestros campos, excepto uno, están en la columna izquierda, y el campo de formulario de Texto de Párrafo está en la columna derecha.

Añadir el fragmento

Ahora, es hora de agregar el fragmento a su sitio. Continúe y copie y pegue el fragmento de código a continuación en su sitio. Si necesita ayuda sobre dónde y cómo agregar fragmentos a su sitio, revise este 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 );

Ahora, cuando el formulario se cargue, verá que el campo de Texto de Párrafo tiene una altura flexible que aumentará o disminuirá a medida que se agreguen y eliminen campos.

Preguntas frecuentes

A continuación, hemos respondido algunas de las preguntas más frecuentes sobre la personalización del campo de Texto de Párrafo en el campo de Diseño.

¿Cómo puedo dirigirme a un solo formulario?

Si solo desea usar este fragmento en un solo formulario, use el fragmento a continuación.

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

El fragmento a continuación se dirige al formulario con un ID de 3503. Deberá reemplazar este ID con el del formulario que desea personalizar. Si necesita ayuda para encontrar el ID de su formulario, consulte este tutorial.

¡Eso es todo! Ahora ha aprendido a personalizar la altura del campo de Texto de Párrafo cuando se usa dentro del campo de Diseño.

A continuación, ¿le gustaría evitar que su formulario se envíe si el campo contiene groserías? Consulte nuestro tutorial sobre cómo bloquear envíos de formularios que contienen groserías.

Relacionado

Referencia de acción: wp_head