Fornecendo uma Altura Flexível para o Campo de Layout

Você 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 você adicionar o campo de Texto de Parágrafo a um campo de Layout, ele usará a altura padrão do campo. No entanto, você pode usar um trecho de CSS personalizado para customizar o campo de Texto de Parágrafo para que ele se ajuste automaticamente à altura do campo de Layout.

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

Criando Seu Formulário

Comece criando um novo formulário ou editando um existente para acessar o construtor de formulários. No construtor de formulários, certifique-se de incluir o campo de Layout em seu formulário e adicione todos os campos necessários a ele.

Observe que, para este tutorial, todos os nossos campos, exceto um, estão na coluna da esquerda, e o campo de formulário <0xC2><0xA0>Texto de Parágrafo<0xC2><0xA0>está na coluna da direita.

Adicionando o Snippet

Agora, é hora de adicionar o trecho ao seu site. Copie e cole o trecho de código abaixo em 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 for carregado, você verá que o campo Texto de Parágrafo tem uma altura flexível que aumentará ou diminuirá conforme os campos são adicionados e removidos.

Perguntas Frequentes

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

Como posso direcionar um único formulário?

Se você quiser usar este trecho apenas em um ú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. Você precisará substituir este ID pelo do formulário que deseja customizar. Se precisar de ajuda para encontrar o ID do seu formulário, confira este tutorial.

É isso! Agora você aprendeu como customizar a altura do campo Texto de Parágrafo quando usado dentro do campo Layout.

Em seguida, você gostaria de impedir que seu formulário seja enviado se o campo contiver palavrões? Confira nosso tutorial sobre bloquear envios de formulários contendo palavrões.

Relacionado

Referência de Ação: wp_head