Anzeigen von Shortcodes im HTML-Feld

Mchten Sie Shortcodes im HTML-Formularfeld anzeigen? Standardmlich werden Formularfelder nicht von Shortcodes akzeptiert. In diesem Tutorial zeigen wir Ihnen, wie Sie PHP verwenden, um das Hinzufgen eines Shortcodes zum HTML-Formularfeld zu ermglichen.

Shortcodes Ultimate Plugin installieren

In diesem Beispiel fgen wir einen Akkordeon-Shortcode mit einem kostenlosen Plugin zu einem HTML-Formularfeld hinzu. Dieser Schritt ist natrlich optional, da Sie mglicherweise bereits ein Shortcode-Plugin installiert haben oder Ihnen integrierte Shortcodes zur Verfgu ng stehen. Fhlen Sie sich frei, das zu verwenden, was Sie bentigen. Denken Sie daran, dass das unten stehende optionale CSS spezifisch fr dieses Plugin ist.

Wenn Sie das in diesem Tutorial vorgeschlagene Plugin verwenden mchten, laden Sie das Plugin herunter und installieren Sie es auf Ihrer WordPress-Website.

Wenn Sie Hilfe beim Hinzufgen eines Plugins zu Ihrer Website bentigen, k nen Sie sich den Leitfaden von WPBeginner zur Installation eines Plugins ansehen.

Erstellen des Shortcodes

Um den Akkordeon-Shortcode zu erstellen, der in Ihr HTML-Feld eingefgt werden soll, mssen Sie deren Dokumentation zum Erstellen Ihres Akkordeon-Shortcodes befolgen.

Wir werden eine Grentabelle-Erklrung fr unser Akkordeon im einfachen Stil erstellen. Unser Shortcode sieht also so aus.

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

Shortcode im HTML-Feld anzeigen

Bevor wir unser Formular erstellen, fgen wir den Snippet zu unserer Website hinzu.

Wenn Sie Hilfe bentigen, wie und wo Sie Snippets zu Ihrer Website hinzufgen, sehen Sie sich bitte dieses Tutorial an.

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

Dieser Snippet ermglich t, dass jedes HTML-Formularfeld in allen Ihren WPForms Shortcodes verwenden kann.

Erstellung des Formulars

Jetzt ist es an der Zeit, unser Formular zu erstellen und ein HTML-Formularfeld hinzuzufgen.

Wenn Sie Hilfe beim Erstellen eines Formulars mit WPForms bentigen, lesen Sie bitte unsere Dokumentation.

Hinzufgen des Shortcodes zu Ihrem HTML-Feld

Jetzt kopieren und fgen wir den Shortcode aus dem vorherigen Schritt in das HTML-Feld ein.

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

Hinzufgen des CSS (optional)

Wie oben erwhnt, k nen einige der Stile fr Shortcodes aufgrund der Standardformatierung von WPForms anders sein, als Sie erwarten wrden. Fr dieses spezielle Beispiel fgen wir etwas zustzliches CSS hinzu, um das Akkordeon-Aufklappsymbol zu gestalten und zu positionieren.

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

Wenn Ihre Besucher das Formular nun sehen, sehen sie ein Akkordeon mit Produktmerkmalen im HTML-Feld des Formulars.

Und das ist alles, was Sie bentigen, um einen beliebigen Shortcode in einem HTML-Formularfeld anzuzeigen. Mchten Sie Smart Tags im HTML-Feld anzeigen? Sehen Sie sich unseren Artikel zur Verarbeitung von Smart Tags in HTML-Feldern an.

Filterreferenz