Fournir une hauteur flexible au champ de présentation

Souhaitez-vous donner une hauteur flexible à une zone de texte de type Paragraphe lorsque vous l'utilisez dans une zone de présentation ? Si vous ajoutez la rubrique Texte de paragraphe à une rubrique Modèle, elle utilise la hauteur par défaut de la rubrique. Toutefois, vous pouvez utiliser un extrait CSS personnalisé pour personnaliser la rubrique Texte de paragraphe afin qu'elle s'ajuste automatiquement à la hauteur de la rubrique Modèle.

Dans ce tutoriel, nous partagerons l'extrait qui permettra d'ajuster facilement la hauteur du champ de formulaire Texte du paragraphe pour qu'il s'adapte à la hauteur du champ Mise en page.

Création du formulaire

Commencez par créer un nouveau formulaire ou par modifier un formulaire 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 ajoutez-y tous les champs nécessaires.

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

Ajout de l'extrait

Il est maintenant temps d'ajouter l'extrait de code à votre site. Allez-y, copiez et collez l'extrait de code ci-dessous sur votre site. Si vous avez besoin d'aide pour savoir où et comment ajouter des extraits à 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 charge, vous verrez que le champ Texte du paragraphe a une hauteur flexible qui augmentera ou diminuera au fur et à mesure que des champs seront ajoutés ou supprimés.

Questions fréquemment posées

Nous répondons ci-dessous à quelques-unes des questions les plus fréquemment posées sur la personnalisation du champ Texte du paragraphe dans la rubrique Mise en page.

Comment cibler un seul formulaire ?

Si vous souhaitez utiliser cet extrait dans un seul formulaire, utilisez l'extrait 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 ci-dessous cible le formulaire dont l'ID est 3503. Vous devrez remplacer cet identifiant 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.

Voilà, c'est fait ! Vous avez maintenant appris à personnaliser la hauteur de la rubrique Texte du paragraphe lorsqu'elle est utilisée dans la rubrique Disposition.

Ensuite, vous souhaitez empêcher l'envoi de votre formulaire si le champ contient des grossièretés ? Consultez notre tutoriel sur le blocage des soumissions de formulaires contenant des blasphèmes.

En rapport

Référence de l'action : wp_head