Fornire un'altezza flessibile al campo Layout

Vuoi fornire un'altezza flessibile per un campo Testo Paragrafo quando lo usi all'interno di un campo Layout? Se aggiungi il campo Testo Paragrafo a un campo Layout, questo utilizzerà l'altezza predefinita del campo. Tuttavia, puoi usare uno snippet CSS personalizzato per personalizzare il campo Testo Paragrafo in modo che si adatti automaticamente all'altezza del campo Layout.

In questo tutorial, condivideremo lo snippet che adatterà facilmente l'altezza del campo modulo Testo Paragrafo per estendere l'altezza del campo Layout.

Creazione del tuo modulo

Inizia creando un nuovo modulo o modificandone uno esistente per accedere al generatore di moduli. Nel generatore di moduli, assicurati di includere il campo Layout nel tuo modulo e di aggiungere tutti i campi necessari.

Nota che per questo tutorial, tutti i nostri campi, tranne uno, si trovano nella colonna di sinistra, e il campo modulo Testo Paragrafo si trova nella colonna di destra.

Aggiunta dello Snippet

Ora è il momento di aggiungere lo snippet al tuo sito. Copia e incolla lo snippet di codice qui sotto nel tuo sito. Se hai bisogno di aiuto su dove e come aggiungere snippet al tuo sito, ti preghiamo di consultare questo 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 );

Ora, quando il modulo verrà caricato, vedrai che il campo Testo Paragrafo avrà un'altezza flessibile che aumenterà o diminuirà man mano che i campi vengono aggiunti e rimossi.

Domande frequenti

Di seguito, abbiamo risposto ad alcune delle domande più frequenti sulla personalizzazione del campo Testo Paragrafo nel campo Layout.

Come posso indirizzare un singolo modulo?

Se vuoi usare questo snippet solo in un singolo modulo, usa lo snippet qui sotto.

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

Lo snippet qui sotto indirizza il modulo con ID 3503. Dovrai sostituire questo ID con quello del modulo che desideri personalizzare. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, dai un'occhiata a questo tutorial.

Fatto! Ora hai imparato come personalizzare l'altezza del campo Testo Paragrafo quando viene utilizzato all'interno del campo Layout.

Successivamente, vuoi impedire l'invio del tuo modulo se il campo contiene volgarità? Dai un'occhiata al nostro tutorial su come bloccare gli invii di moduli contenenti volgarità.

Correlati

Riferimento Azione: wp_head