Comment personnaliser la disposition du champ Adresse

Souhaitez-vous personnaliser la disposition du champ Adresse sur votre formulaire ? Nous avons le tutoriel parfait pour vous ! En utilisant un peu de PHP et de CSS, nous allons créer un schéma d'adresse personnalisé qui omettra le champ État de notre formulaire, et en utilisant CSS, nous placerons le champ Code postal juste à côté du champ Ville sur notre formulaire.

Personnalisation de la disposition du champ Adresse

Dans ce tutoriel, nous allons commencer par créer un schéma d'adresse personnalisé comme détaillé dans ce tutoriel, qui n'aura que les champs suivants.

• Ligne d'adresse 1
• Ligne d'adresse 2
• Ville
• Code Postal (pour notre champ de code postal)

Par défaut, le champ de formulaire Code postal apparaîtra toujours comme le dernier champ dans la section d'adresse du formulaire.

/**
 * WPForms Add new address field scheme (Custom)
 *
 * @link   https://wpforms.com/developers/create-additional-schemes-for-the-address-field/
 */
 
function wpf_dev_new_address_scheme( $schemes ) {
 
    $schemes[ 'custom' ] = array(
        'label' => 'Custom',
        'address1_label' => 'Address Line 1',
        'address2_label' => 'Address Line 2',
        'city_label' => 'City',
        'postal_label' => 'Code Postal',
    );
 
    return $schemes;
 
}
 
add_filter( 'wpforms_address_schemes', 'wpf_dev_new_address_scheme', 10, 1);

Création du formulaire

Maintenant que le schéma d'adresse personnalisé a été créé avec notre extrait, il est temps de créer notre formulaire. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation d'aide.

Notre formulaire ne récupérera que des informations de base, y compris un champ Adresse.

Sélection du schéma d'adresse

Une fois que vous avez ajouté votre Adresse, sélectionnez le nouveau Schéma d'adresse dans le menu déroulant de l'onglet Général que nous avons créé dans l'extrait.

Ajout du CSS

Il est maintenant temps d'ajouter le CSS à notre site qui placera le champ Code postal sur la même ligne que le champ Ville.

Pour toute aide sur comment et où ajouter votre CSS, veuillez consulter cet article.

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

Il est important de noter que nous ciblons uniquement l'ID de formulaire 2453 et l'ID de champ 9, vous devrez mettre à jour ces ID pour qu'ils correspondent aux vôtres. Pour obtenir de l'aide afin de trouver vos ID, veuillez consulter notre documentation utile.

Souhaitez-vous personnaliser le style du champ Séparateur de section avec CSS ? Consultez cet article sur Comment personnaliser le séparateur de section WPForms à l'aide de CSS.

Filtre de référence

wpforms_address_schemes

FAQ

Q : Comment puis-je changer la position de la Ville et du Code Postal ?

R : Pour placer votre champ Code postal avant le champ Ville, utilisez ce CSS à la place.

#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) {
    float: right;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) {
    float: left;
    max-width: 50%;
    width: 50%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half.wpforms-first {
    padding-right: 1%;
}
 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(3) .wpforms-one-half, 
#wpforms-2453-field_9-container .wpforms-field-row:nth-of-type(4) .wpforms-one-half {
    max-width: 100%;
    width: 100%;
}

Q : Comment afficher uniquement le champ Code Postal ?

R : Si vous souhaitez uniquement avoir un champ de code postal, vous pourriez masquer tous les autres champs avec du CSS. Cependant, si vous souhaitez simplement capturer le code postal, la solution la plus simple serait d'ajouter un champ Numéros à votre formulaire pour collecter ces informations.

Q : Puis-je réorganiser complètement les autres champs ?

R : Absolument, cependant comme il peut y avoir de nombreuses variations différentes pour un champ d'adresse, nous n'allons pas couvrir tous les scénarios spécifiques. Mais n'hésitez pas à contacter notre Cercle VIP WPForms pour une assistance spécifique à ce sujet.