Layout-Feld eine flexible Höhe geben

Möchten Sie eine flexible Höhe für ein Textfeld (Paragraph) festlegen, wenn Sie es innerhalb eines Layoutfelds verwenden? Wenn Sie das Textfeld (Paragraph) zu einem Layoutfeld hinzufügen, wird die Standardhöhe des Felds verwendet. Sie können jedoch einen benutzerdefinierten CSS-Schnipsel verwenden, um das Textfeld (Paragraph) anzupassen, sodass es sich automatisch an die Höhe des Layoutfelds anpasst.

In diesem Tutorial zeigen wir Ihnen den Schnipsel, mit dem die Höhe des Textfelds (Paragraph) einfach angepasst wird, um die Höhe des Layoutfelds zu strecken.

Erstellen Ihres Formulars

Beginnen Sie mit dem Erstellen eines neuen Formulars oder bearbeiten Sie ein vorhandenes, um auf den Formular-Builder zuzugreifen. Stellen Sie im Formular-Builder sicher, dass Sie das Layoutfeld in Ihr Formular aufnehmen und alle erforderlichen Felder hinzufügen.

Beachten Sie, dass in diesem Tutorial alle unsere Felder, bis auf eines, in der linken Spalte stehen und das Textfeld (Paragraph) in der rechten Spalte.

Hinzufügen des Snippets

Jetzt ist es an der Zeit, den Schnipsel zu Ihrer Website hinzuzufügen. Kopieren Sie den folgenden Code-Schnipsel und fügen Sie ihn auf Ihrer Website ein. Wenn Sie Hilfe benötigen, wo und wie Sie Schnipsel zu Ihrer Website hinzufügen können, lesen Sie bitte dieses 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 );

Wenn das Formular nun geladen wird, sehen Sie, dass das Textfeld (Paragraph) eine flexible Höhe hat, die sich erhöht oder verringert, wenn Felder hinzugefügt und entfernt werden.

Häufig gestellte Fragen

Nachfolgend finden Sie Antworten auf einige der häufigsten Fragen zur Anpassung des Textfelds (Paragraph) im Layoutfeld.

Wie kann ich ein einzelnes Formular ansprechen?

Wenn Sie diesen Schnipsel nur in einem einzelnen Formular verwenden möchten, verwenden Sie den folgenden Schnipsel.

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

Der folgende Schnipsel zielt auf das Formular mit der ID 3503 ab. Sie müssen diese ID durch die des Formulars ersetzen, das Sie anpassen möchten. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, sehen Sie sich dieses Tutorial an.

Das war's! Sie haben jetzt gelernt, wie Sie die Höhe des Textfelds (Paragraph) anpassen, wenn es innerhalb des Layoutfelds verwendet wird.

Möchten Sie als Nächstes verhindern, dass Ihr Formular abgeschickt wird, wenn das Feld anstößige Wörter enthält? Sehen Sie sich unser Tutorial zum Blockieren von Formularübermittlungen mit anstößigen Wörtern an.

Verwandt

Aktionsreferenz: wp_head