Comment afficher des shortcodes dans le champ HTML

Souhaitez-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 permettre 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, rappelez-vous simplement 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 et l'installer sur votre site WordPress.

Pour obtenir de l'aide sur la façon d'ajouter un plugin à votre site, vous pouvez consulter le guide de WPBeginner sur l'installation d'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.

Nous allons créer une explication de tableau des tailles pour notre accordéon en utilisant le style Simple. Notre shortcode ressemble donc à ceci.

<strong>Size chart explained</strong>

[su_accordion]
[su_spoiler title="X Small" open="no" style="simple"] Size Alpha: XS.  Size Numeric: 0-2. Bust(IN): 28-30.  Waist(IN): 23-24. [/su_spoiler]

[su_spoiler title="Small" style="simple"] Size Alpha: S.  Size Numeric: 4-6. Bust(IN): 30-32.  Waist(IN): 25-26.  [/su_spoiler]

[su_spoiler title="Medium" style="simple"] Size Alpha: M.  Size Numeric: 8-10. Bust(IN): 32-34.  Waist(IN): 27-28.  [/su_spoiler]

[su_spoiler title="Large" style="simple"] Size Alpha: L.  Size Numeric: 12-14. Bust(IN): 36-38.  Waist(IN): 30-32.  [/su_spoiler]

[su_spoiler title="X Large" style="simple"] Size Alpha: XL.  Size Numeric: 16-18. Bust(IN): 40-42.  Waist(IN): 33-35.  [/su_spoiler]

[su_spoiler title="XX Large" style="simple"] XXL.  Size Numeric: 20-22. Bust(IN): 44-46.  Waist(IN): 36-38.  [/su_spoiler]

[/su_accordion]

Afficher le shortcode dans un champ HTML

Avant de créer notre formulaire, nous allons ajouter le extrait de code à notre site.

Pour obtenir de l'aide sur la façon et l'endroit où ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/**
 * Run shortcodes on HTML field content.
 *
 * @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 de code permettra à n'importe quel champ de formulaire HTML dans 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.

Ajout du shortcode à votre champ HTML

Nous allons maintenant copier et coller le shortcode de l'étape précédente dans le champ HTML.

<strong>Size chart explained</strong>

[su_accordion]
[su_spoiler title="X Small" open="no" style="simple"] Size Alpha: XS.  Size Numeric: 0-2. Bust(IN): 28-30.  Waist(IN): 23-24. [/su_spoiler]

[su_spoiler title="Small" style="simple"] Size Alpha: S.  Size Numeric: 4-6. Bust(IN): 30-32.  Waist(IN): 25-26.  [/su_spoiler]

[su_spoiler title="Medium" style="simple"] Size Alpha: M.  Size Numeric: 8-10. Bust(IN): 32-34.  Waist(IN): 27-28.  [/su_spoiler]

[su_spoiler title="Large" style="simple"] Size Alpha: L.  Size Numeric: 12-14. Bust(IN): 36-38.  Waist(IN): 30-32.  [/su_spoiler]

[su_spoiler title="X Large" style="simple"] Size Alpha: XL.  Size Numeric: 16-18. Bust(IN): 40-42.  Waist(IN): 33-35.  [/su_spoiler]

[su_spoiler title="XX Large" style="simple"] XXL.  Size Numeric: 20-22. Bust(IN): 44-46.  Waist(IN): 36-38.  [/su_spoiler]

[/su_accordion]

Ajout du CSS (facultatif)

Comme nous l'avons mentionné ci-dessus, certains styles des shortcodes peuvent être différents de ce à quoi vous vous attendez 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.

.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.

Référence des filtres