{"id":19033107,"date":"2026-09-30T12:08:45","date_gmt":"2026-09-30T12:08:45","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/cf7-shortcode-nd_options_cf7-strips-data-attributes-from-form\/"},"modified":"2026-09-30T12:08:45","modified_gmt":"2026-09-30T12:08:45","slug":"cf7-shortcode-nd_options_cf7-strips-data-attributes-from-form","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/cf7-shortcode-nd_options_cf7-strips-data-attributes-from-form\/","title":{"rendered":"CF7 shortcode (nd_options_cf7) strips data-* attributes from form"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><p>Hi,I&#8217;m one of the developers at Friendly Captcha where we build the Friendly Captcha WordPress plugin. A mutual customer reported our captcha widget breaking on a Contact Form 7 form embedded via &lt;code data-inline-code=&#8221;&#8221;&gt;[nd_options_cf7]<\/code>.<\/p><br \/><p>The cause is in &lt;a class=&#8221;inline-flex h-[1.41em] max-w-full items-center gap-[0.33em] rounded-[0.5em] px-[0.5em] font-medium align-middle border text-[12px] border-[color-mix(in_oklab,var(&#8211;context-chip-accent)_34%,var(&#8211;contrast-border))] bg-[color-mix(in_oklab,var(&#8211;context-chip-accent)_11%,transparent)] text-[color-mix(in_oklab,var(&#8211;context-chip-accent)_22%,var(&#8211;contrast-foreground))] [&#8211;context-chip-accent:oklch(0.62_0.11_215)] chat-markdown-file-link cursor-pointer transition-colors hover:bg-accent\/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\/70&#8243; data-markdown-copy=&#8221;<code>shortcodes\/custom\/cf7\/index.php<\/code>&#8221; data-base-ui-tooltip-trigger=&#8221;&#8221; data-slot=&#8221;tooltip-trigger&#8221; href=&#8221;\/Users\/merlin\/.t3\/worktrees\/friendly-captcha-wordpress\/t3code-c4959faf\/shortcodes\/custom\/cf7\/index.php&#8221; id=&#8221;base-ui-_r_1pru_&#8221;&gt;&lt;span class=&#8221;truncate leading-tight&#8221;&gt;index.php&lt;\/span&gt;<\/a>: after rendering &lt;code data-inline-code=&#8221;&#8221;&gt;[contact-form-7]<\/code>, the whole output goes through &lt;code data-inline-code=&#8221;&#8221;&gt;wp_kses()<\/code> with a custom allowlist. That allowlist permits only &lt;code data-inline-code=&#8221;&#8221;&gt;id<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;class<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;style<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;lang<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;dir<\/code> and &lt;code data-inline-code=&#8221;&#8221;&gt;aria-hidden<\/code> on &lt;code data-inline-code=&#8221;&#8221;&gt;div<\/code>, and doesn&#8217;t include &lt;code data-inline-code=&#8221;&#8221;&gt;select<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;option<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;button<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;a<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;fieldset<\/code> or &lt;code data-inline-code=&#8221;&#8221;&gt;noscript<\/code>. As a result, CF7 forms rendered through this shortcode lose:<\/p><ul><li>all &lt;code data-inline-code=&#8221;&#8221;&gt;data-*<\/code> attributes, which breaks every captcha widget configured through data attributes (Friendly Captcha, Cloudflare Turnstile, hCaptcha)<\/li><\/ul><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><ul><li>dropdown fields entirely (&lt;code data-inline-code=&#8221;&#8221;&gt;select<\/code>\/&lt;code data-inline-code=&#8221;&#8221;&gt;option<\/code>)<\/li><\/ul><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><ul><li>input attributes like &lt;code data-inline-code=&#8221;&#8221;&gt;placeholder<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;required<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;min<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;max<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;accept<\/code>, &lt;code data-inline-code=&#8221;&#8221;&gt;multiple<\/code> and &lt;code data-inline-code=&#8221;&#8221;&gt;checked<\/code><\/li><\/ul><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><ul><li>&lt;code data-inline-code=&#8221;&#8221;&gt;noscript<\/code> fallbacks<\/li><\/ul><br \/><p>CF7 already sanitizes its own form markup, so it shouldn&#8217;t need a second pass. Would you consider escaping the shortcode&#8217;s own attributes individually (&lt;code data-inline-code=&#8221;&#8221;&gt;esc_attr()<\/code>\/&lt;code data-inline-code=&#8221;&#8221;&gt;esc_html()<\/code> on title, class, label color, and so on) and leaving the &lt;code data-inline-code=&#8221;&#8221;&gt;do_shortcode(&#8216;[contact-form-7 &#8230;]&#8217;)<\/code> output out of the &lt;code data-inline-code=&#8221;&#8221;&gt;wp_kses()<\/code> call? Alternatively, using CF7&#8217;s own allowlist via &lt;code data-inline-code=&#8221;&#8221;&gt;wpcf7_kses_allowed_html()<\/code> would keep form fields and data attributes intact.<\/p><br \/><p>Thanks!<\/p><\/p>\n","protected":false},"template":"","class_list":["post-19033107","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/19033107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/19033107\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=19033107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}