Fournir une hauteur flexible au champ de mise en page

Souhaitez-vous fournir une hauteur flexible pour un champ Texte de paragraphe lors de son utilisation dans un champ Mise en page ? Si vous ajoutez le champ Texte de paragraphe à un champ Mise en page, il utilise la hauteur par défaut du champ. Cependant, vous pouvez utiliser un extrait de code CSS personnalisé pour personnaliser le champ Texte de paragraphe afin qu'il s'ajuste automatiquement à la hauteur du champ Mise en page.

Dans ce tutoriel, nous partagerons l'extrait de code qui ajustera facilement la hauteur du champ de formulaire Texte de paragraphe pour étirer la hauteur du champ Mise en page.

Création de votre formulaire

Commencez par créer un nouveau formulaire ou en modifier un existant pour accéder au générateur de formulaires. Dans le générateur de formulaires, assurez-vous d'inclure le champ Mise en page dans votre formulaire et d'y ajouter tous les champs nécessaires.

Notez que pour ce tutoriel, tous nos champs, à l'exception d'un, se trouvent dans la colonne de gauche, et le champ de formulaire Texte de paragraphe se trouve dans la colonne de droite.

Ajout de l'extrait

Il est maintenant temps d'ajouter l'extrait de code à votre site. Copiez et collez l'extrait de code ci-dessous sur votre site. Si vous avez besoin d'aide sur où et comment ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

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

Maintenant, lorsque le formulaire se chargera, vous verrez que le champ Texte de paragraphe a une hauteur flexible qui augmentera ou diminuera à mesure que des champs sont ajoutés et supprimés.

Questions fréquemment posées

Ci-dessous, nous avons répondu à certaines des questions les plus fréquentes concernant la personnalisation du champ Texte de paragraphe dans le champ Mise en page.

Comment puis-je cibler un seul formulaire ?

Si vous souhaitez utiliser cet extrait de code uniquement dans un seul formulaire, utilisez l'extrait de code ci-dessous.

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

L'extrait de code ci-dessous cible le formulaire avec l'ID 3503. Vous devrez remplacer cet ID par celui du formulaire que vous souhaitez personnaliser. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, veuillez consulter ce tutoriel.

C'est tout ! Vous savez maintenant comment personnaliser la hauteur du champ Texte de paragraphe lorsqu'il est utilisé dans le champ Mise en page.

Ensuite, souhaitez-vous empêcher la soumission de votre formulaire si le champ contient du langage grossier ? Consultez notre tutoriel sur le blocage des soumissions de formulaires contenant du langage grossier.

Articles associés

Référence d'action : wp_head