Fornecer uma Altura Flexível ao Campo Layout

Gostaria de fornecer uma altura flexível para um campo de Texto de Parágrafo ao usá-lo dentro de um campo de Layout? Se adicionar o campo de Texto de Parágrafo a um campo de Layout, ele usará a altura padrão do campo. No entanto, pode usar um trecho de CSS personalizado para personalizar o campo de Texto de Parágrafo para que ele se ajuste automaticamente à altura do campo de Layout.

Neste tutorial, partilharemos o trecho que ajustará facilmente a altura do campo de formulário de Texto de Parágrafo para esticar a altura do campo de Layout.

Criar o Seu Formulário

Comece por criar um novo formulário ou editar um existente para aceder ao construtor de formulários. No construtor de formulários, certifique-se de incluir o campo de Layout no seu formulário e adicione todos os campos necessários a ele.

Note que, para este tutorial, todos os nossos campos, exceto um, estão na coluna esquerda, e o campo de formulário de Texto de Parágrafo está na coluna direita.

Adicionar o Trecho

Agora, é hora de adicionar o trecho ao seu site. Copie e cole o trecho de código abaixo no seu site. Se precisar de ajuda sobre onde e como adicionar trechos ao seu site, 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 );

Agora, quando o formulário carregar, verá que o campo de Texto de Parágrafo tem uma altura flexível que aumentará ou diminuirá à medida que os campos são adicionados e removidos.

Perguntas Frequentes

Abaixo, respondemos a algumas das principais perguntas que vemos sobre a personalização do campo de Texto de Parágrafo no campo de Layout.

Como posso direcionar um único formulário?

Se quiser usar este trecho apenas num único formulário, use o trecho abaixo.

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

O trecho abaixo direciona o formulário com um ID de 3503. Terá de substituir este ID pelo do formulário que gostaria de personalizar. Se precisar de ajuda para encontrar o ID do seu formulário, consulte este tutorial.

É isso! Agora aprendeu a personalizar a altura do campo de Texto de Parágrafo quando usado dentro do campo de Layout.

Em seguida, gostaria de impedir que o seu formulário seja enviado se o campo contiver profanidade? Consulte o nosso tutorial sobre bloquear envios de formulários que contenham profanidade.

Relacionado

Referência de Ação: wp_head