Fornendo un'altezza flessibile al campo di layout

Si desidera fornire un'altezza flessibile per un campo di testo Paragrafo quando lo si utilizza all'interno di un campo di layout? Se si aggiunge il campo di testo Paragrafo a un campo di layout, viene utilizzata l'altezza predefinita del campo. Tuttavia, è possibile utilizzare uno snippet CSS personalizzato per personalizzare il campo di testo Paragrafo in modo che si adatti automaticamente all'altezza del campo di layout.

In questa guida, condivideremo lo snippet che regolerà facilmente l'altezza del campo del form Paragraph Text per adattarlo all'altezza del campo Layout.

Creazione del modulo

Iniziare creando un nuovo modulo o modificandone uno esistente per accedere al costruttore di moduli. Nel costruttore di moduli, assicurarsi di includere il campo Layout nel modulo e aggiungere tutti i campi necessari.

Notate che per questa esercitazione tutti i campi, tranne uno, sono sulla colonna di sinistra, mentre il campo del modulo Paragraph Text è sulla colonna di destra.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet al vostro sito. Copiate e incollate lo snippet di codice qui sotto nel vostro sito. Se avete bisogno di aiuto su dove e come aggiungere gli snippet al vostro sito, consultate 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 viene caricato, si noterà che il campo Testo del paragrafo ha 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 del paragrafo nel campo Layout.

Come posso mirare a un singolo modulo?

Se si desidera utilizzare questo snippet solo in un singolo modulo, utilizzare lo snippet sottostante.

/**
 * 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 si rivolge al modulo con un ID 3503. È necessario sostituire questo ID con quello del modulo che si desidera personalizzare. Se si ha bisogno di aiuto per trovare l'ID del modulo, consultare questo tutorial.

Ecco fatto! Ora avete imparato a personalizzare l'altezza del campo Testo del paragrafo quando viene utilizzato all'interno del campo Layout.

Poi, volete impedire che il vostro modulo venga inviato se il campo contiene turpiloquio? Consultate il nostro tutorial su come bloccare l'invio di moduli contenenti bestemmie.

Correlato

Riferimento azione: wp_head