[forgetso]

Summary

Follow-up to #851, which switched <mc4wp-procaptcha> from display: block to display: inline-block so the widget inherits the surrounding form's text-align.

inline-block is shrink-to-fit, and the Procaptcha widget sizes itself in percentages under a max-width — it has no intrinsic width of its own for a parent to shrink-wrap around. So the wrapper collapses to the widget's minimum size instead of its natural 302px, which also leaves room for the submit button to flow up alongside it:

Reported on themangoroad.com, running 4.14.1. Under display: block the wrapper filled its parent and the widget's max-width capped it, so the missing intrinsic width only became visible after #851.

Fix

Add width: 302px; max-width: 100% to the wrapper's inline style. 302px is the widget's natural width, so the shrink-to-fit calculation has something definite to use, and max-width: 100% keeps the widget shrinking inside parents narrower than that. display: inline-block is unchanged, so #851's alignment behaviour is preserved.

We're fixing the missing intrinsic width in the Procaptcha widget itself as well, but this keeps the integration correct regardless of which widget version a site loads.

Second fix: keep the widget inside the wrapper when the field is wrapped in a <p>

Site owners often wrap the procaptcha field in a <p> in the form editor, like their other fields:

<p>
<input type="hidden" name="procaptcha">
</p>

The wrapper's children were a <div> (captcha container) and a <p> (validation error). A <p> can't contain either, so the HTML parser closes the outer <p> at the <div>, which also closes <mc4wp-procaptcha>. Both children end up as siblings after an empty wrapper (plus a stray empty <p></p>), so the widget is a block-level box outside the inline-block wrapper and ignores the form's text-align. #853 stopped this from crashing by looking the elements up from the form, but the widget still rendered outside the wrapper.

Reported on missbush.co.uk (4.14.1, centred form, widget stuck to the left).

Both children are now <span style="display: block">, which a <p> can contain, so the parser leaves them inside the wrapper. The form-level lookup fallback from #853 is removed because nothing is moved out any more.

Third change: UTM parameters on the Prosopo links

The two links on the Procaptcha integration settings screen now carry utm_source=mc4wp&utm_medium=plugin&utm_campaign=integration-settings.

• The intro link now goes to https://prosopo.io/wordpress/mc4wp/ instead of the prosopo.io home page. That page explains how to set up Procaptcha in MC4WP: get your keys, paste them in, add the field to your form. The home page is aimed at large businesses and doesn't help MC4WP users.
• "Get your Site key here" still goes to https://portal.prosopo.io/site-management.

WordPress sends Referrer-Policy: strict-origin-when-cross-origin from wp-admin, so all we see today is the site's origin, which looks the same as any other WordPress site. With these parameters we can tell that someone came from the MC4WP integration screen and send them to the right page on our site, with setup steps for this integration rather than our general landing page. Nothing else changes.

Test plan

• Form in a narrow centred container (~500px) — widget renders at its full 302px instead of collapsing.
• Parent narrower than 302px — widget still shrinks to the parent, no overflow.
• Left / centre / right aligned parent forms — alignment from Use inline-block on procaptcha wrapper so it inherits form alignment #851 still inherited.
• Field wrapped in <p> inside a centred form: before, the captcha and error were moved out of <mc4wp-procaptcha> and the widget sat on the left; after, both stay inside and the widget is centred (checked in headless Chromium against the live widget script).
• php -l clean; phpcs, phpstan and phpunit pass.

🤖 Generated with Claude Code