### [Comment afficher les shortcodes dans le champ HTML](https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/)
**Publié le :** 11 novembre 2019
**Auteur :** Équipe éditoriale
**Extrait :** Ce tutoriel vous montrera comment afficher des shortcodes dans votre champ de formulaire HTML à l’aide d’un filtre PHP.
**Contenu :**
Voulez-vous afficher des shortcodes dans le champ de formulaire **HTML** ? Par défaut, les champs de formulaire n’acceptent pas les shortcodes. Dans ce tutoriel, nous vous montrerons comment utiliser PHP pour activer l’ajout d’un shortcode au champ de formulaire **HTML**.
## Installation du plugin Shortcodes Ultimate
Dans cet exemple, nous allons ajouter un shortcode d’accordéon à un champ de formulaire **HTML** à l’aide d’un plugin gratuit. Cette étape est bien sûr facultative car vous avez peut-être déjà un plugin de shortcodes installé ou des shortcodes intégrés à votre disposition. N’hésitez pas à utiliser ce dont vous avez besoin, mais n’oubliez pas que le CSS facultatif ci-dessous est spécifique à ce plugin.
Si vous choisissez d’utiliser le plugin suggéré dans ce tutoriel, veuillez [télécharger le plugin](https://wordpress.org/plugins/shortcodes-ultimate/ "Shortcodes Ultimate") et l’installer sur votre site WordPress.
Pour obtenir de l’aide sur la façon d’ajouter un plugin à votre site, vous voudrez peut-être consulter [le guide de WPBeginner sur la façon d’installer un plugin](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/ "Comment installer un plugin").
## Création du shortcode
Pour créer le shortcode d’accordéon nécessaire pour votre champ **HTML**, vous devrez [suivre leur documentation sur la façon de créer votre shortcode d’accordéon](https://getshortcodes.com/docs/accordion/ "Documentation sur la création d’un shortcode d’accordéon").
Nous allons créer une explication du tableau des tailles pour notre accordéon en utilisant le style **Simple**. Notre shortcode ressemble donc à ceci.
```
Explication du tableau des tailles
[su_accordion]
[su_spoiler title="XS" open="no" style="simple"] Taille Alpha : XS. Taille Numérique : 0-2. Tour de poitrine (PO) : 28-30. Tour de taille (PO) : 23-24. [/su_spoiler]
[su_spoiler title="Petit" style="simple"] Taille Alpha : S. Taille Numérique : 4-6. Tour de poitrine (PO) : 30-32. Tour de taille (PO) : 25-26. [/su_spoiler]
[su_spoiler title="Moyen" style="simple"] Taille Alpha : M. Taille Numérique : 8-10. Tour de poitrine (PO) : 32-34. Tour de taille (PO) : 27-28. [/su_spoiler]
[su_spoiler title="Grand" style="simple"] Taille Alpha : L. Taille Numérique : 12-14. Tour de poitrine (PO) : 36-38. Tour de taille (PO) : 30-32. [/su_spoiler]
[su_spoiler title="XL" style="simple"] Taille Alpha : XL. Taille Numérique : 16-18. Tour de poitrine (PO) : 40-42. Tour de taille (PO) : 33-35. [/su_spoiler]
[su_spoiler title="XXL" style="simple"] XXL. Taille Numérique : 20-22. Tour de poitrine (PO) : 44-46. Tour de taille (PO) : 36-38. [/su_spoiler]
[/su_accordion]
```
## Afficher le shortcode dans le champ HTML
Avant de créer notre formulaire, nous allons ajouter l’extrait à notre site.
Pour obtenir de l’aide sur la façon et l’endroit où ajouter des extraits à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms").
```php
/**
* Exécute les shortcodes sur le contenu du champ HTML.
*
* @link https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/
*
*/
function wpf_dev_html_field_shortcodes( $field, $field_atts, $form_data ) {
if ( ! empty( $field[ 'code' ] ) ) {
$field[ 'code' ] = do_shortcode( $field[ 'code' ] );
}
return $field;
}
add_filter( 'wpforms_html_field_display', 'wpf_dev_html_field_shortcodes', 10, 3 );
```
Cet extrait permettra à n’importe quel champ de formulaire **HTML** de **tous** vos WPForms d’utiliser des shortcodes.
## Création du formulaire
Il est maintenant temps de créer notre formulaire et d’ajouter un champ de formulaire **HTML**.
Si vous avez besoin d’aide pour créer un formulaire avec WPForms, [veuillez consulter notre documentation](https://wpforms.com/docs/creating-first-form/ "https://wpforms.com/docs/creating-first-form/").
## Ajout du shortcode à votre champ HTML
Nous allons maintenant copier et coller le shortcode de l’étape précédente dans le champ **HTML**.
```
Explication du tableau des tailles
[su_accordion]
[su_spoiler title="XS" open="no" style="simple"] Taille Alpha : XS. Taille Numérique : 0-2. Tour de poitrine (PO) : 28-30. Tour de taille (PO) : 23-24. [/su_spoiler]
[su_spoiler title="Petit" style="simple"] Taille Alpha : S. Taille Numérique : 4-6. Tour de poitrine (PO) : 30-32. Tour de taille (PO) : 25-26. [/su_spoiler]
[su_spoiler title="Moyen" style="simple"] Taille Alpha : M. Taille Numérique : 8-10. Tour de poitrine (PO) : 32-34. Tour de taille (PO) : 27-28. [/su_spoiler]
[su_spoiler title="Grand" style="simple"] Taille Alpha : L. Taille Numérique : 12-14. Tour de poitrine (PO) : 36-38. Tour de taille (PO) : 30-32. [/su_spoiler]
[su_spoiler title="XL" style="simple"] Taille Alpha : XL. Taille Numérique : 16-18. Tour de poitrine (PO) : 40-42. Tour de taille (PO) : 33-35. [/su_spoiler]
[su_spoiler title="XXL" style="simple"] XXL. Taille Numérique : 20-22. Tour de poitrine (PO) : 44-46. Tour de taille (PO) : 36-38. [/su_spoiler]
[/su_accordion]
```
L’apparence du résultat du shortcode peut être modifiée par les styles du formulaire. Assurez-vous de tester le style du shortcode que vous utilisez.
## Ajout du CSS (facultatif)
Comme nous l’avons mentionné précédemment, certains styles des shortcodes peuvent être différents de ce à quoi vous vous attendriez en raison du style par défaut de WPForms. Pour cet exemple particulier, nous allons ajouter du CSS supplémentaire pour styliser et positionner l’icône d’ouverture de l’accordéon.
```css
.wpforms-field .su-accordion {
margin-bottom: 1.5em;
}
.wpforms-field .su-spoiler-style-simple {
border-top: 1px solid #ccc !important;
border-bottom: 1px solid #ccc !important;
}
.wpforms-field .su-spoiler {
margin-bottom: 1.5em !important;
}
.wpforms-field .su-accordion .su-spoiler {
margin-bottom: 0.5em !important;
}
.wpforms-field .su-u-trim>:first-child {
margin-top: 0 !important;
}
.wpforms-field .su-spoiler-style-simple>.su-spoiler-title {
padding: 5px 10px;
background: #f0f0f0;
color: #333;
font-size: .9em;
}
.wpforms-field .su-spoiler-title {
position: relative !important;
cursor: pointer;
min-height: 20px;
line-height: 20px;
padding: 7px 7px 7px 34px !important;
font-weight: 700;
font-size: 13px !important;
}
.wpforms-field .su-spoiler-icon {
position: absolute !important;
left: 7px;
top: 7px;
display: block !important;
width: 20px !important;
height: 20px !important;
line-height: 21px;
text-align: center;
font-size: 14px !important;
font-family: ShortcodesUltimateIcons;
font-weight: 400;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
.wpforms-field .su-spoiler-style-simple>.su-spoiler-content {
padding: 1em 10px !important;
background: #fff;
color: #333;
}
.su-spoiler.su-spoiler-closed>.su-spoiler-content {
height: 0;
margin: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden;
border: none;
opacity: 0;
pointer-events: none;
}
.wpforms-field .su-spoiler-content {
padding: 14px !important;
transition: padding-top .2s !important;
-ie-transition: padding-top .2s !important;
}
```
Lorsque vos visiteurs verront maintenant le formulaire, ils verront un accordéon avec les caractéristiques du produit dans le champ **HTML** du formulaire.
Et c’est tout ce dont vous avez besoin pour afficher n’importe quel shortcode dans un champ de formulaire **HTML**. Souhaitez-vous afficher des balises intelligentes dans le champ **HTML** ? Consultez notre article sur [Comment traiter les balises intelligentes dans les champs HTML](https://wpforms.com/developers/how-to-process-smart-tags-in-html-fields/ "Comment traiter les balises intelligentes dans les champs HTML").
## Référence du filtre
**Catégories :** Champs
**Tags :** HTML, PHP
---