Feature request: expose Turnstile widget size (support compact)

  • ResolvedModerator Ipstenu (Mika Epstein)

    (@ipstenu)


    🏳️‍🌈 Advisor and Activist

    1 week, 1 day ago

    The plugin always renders Cloudflare Turnstile at the default 300px “normal” size, which overflows narrow containers (sidebars, footer columns, mobile). Cloudflare supports a compact size (150px) for exactly this.

    Two spots would need it:

    1. The generated widget markup in js/admin.js (~line 1293) — add a data-size attribute to the .cf-turnstile div.
    2. The re-render call in js/mailin-front.js (~line 184) — pass size to turnstile.render().

    Ideally this would be surfaced as an admin setting next to the existing theme (Auto/Dark/Light) option in the form captcha panel.

    For now the clean CSS-only workaround I do is to scale the widget and reserve its scaled footprint. This does work with implicit rendering because it’s purely visual:

    // footer / narrow-column Turnstile fit
    .cf-turnstile {
      transform: scale(0.85);
      transform-origin: left top;
      // reserve the scaled height so nothing below jumps
      height: calc(65px * 0.85);
    }

    Using the transform-origin: left top keeps it anchored to the column edge instead of drifting, and setting the scaled height stops the layout gap that transform normally leaves behind (transforms don’t affect layout box size). Adjust 0.85 to whatever makes 300px fit your need.

Viewing 1 replies (of 1 total)
  • Plugin Support Danilo_CX_Specialist

    (@danilobrevo)

    1 week, 1 day ago

    Hi Mika,

    Thank you for the detailed write-up and for pointing to the specific files involved.

    You are right that the Brevo WordPress plugin currently renders the Cloudflare Turnstile widget at the default 300px “normal” size only, and there is no admin-side option to switch to Cloudflare’s compact mode. The Turnstile theme selector (Auto/Dark/Light) exists in the form captcha panel, but size is not exposed alongside it at this time.

    The CSS workaround you shared is a clean and reasonable approach for the interim, and the use of transform-origin: left top combined with a fixed scaled height to preserve layout space is a solid way to handle it without touching the plugin’s render logic directly.

    I’ll log this as a feature request for the plugin team, including the two specific touch points you identified (js/admin.js ~line 1293 for the widget markup and js/mailin-front.js ~line 184 for the re-render call), and the suggestion to surface it as a size setting next to the existing theme option. I can’t confirm a timeline or whether this will be picked up in an upcoming release, but the detail you’ve provided makes it actionable if the team moves forward with it.

    Thanks again for taking the time to document this properly.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.