AMP

amp-recaptcha-input

Appends a reCAPTCHA v3 token to AMP form submissions.

Required Script <script async custom-element="amp-recaptcha-input" src="https://cdn.ampproject.org/v0/amp-recaptcha-input-0.1.js"></script>
Supported Layouts nodisplay
Examples Example on amp.dev

Behavior

This extension adds a parameter containing a recaptcha response token when a parent <form> element submits. amp-recaptcha-input does this by creating an iframe to load the reCAPTCHA v3 api script using the provided site key, and calling grecaptcha.execute with the provided site key and action.

Example

This example demonstrates how <amp-recaptcha-input> usage on an AMP page correlates to calls on the grecaptcha object and form body. <amp-recaptcha-input> must be a child of a <form> element.

<amp-recaptcha-input> usage

<form amp-form-attributes-go-here>
  ...
  <amp-recaptcha-input layout="nodisplay" name="reCAPTCHA_body_key" data-sitekey=”reCAPTCHA_site_key" data-action="reCAPTCHA_example_action">
  </amp-recaptcha-input>
  ...
</form>

Corresponding grecaptcha call

grecaptcha.execute('reCAPTCHA_site_key', {action: 'reCAPTCHA_example_action'});

Corresponding AMP form submit body

{
  ...other form params
  “reCAPTCHA_body_key”: “returned_reCAPTCHA_response_token”
}

Attributes

layout (required) Required value is nodisplay.
name (required) Name of the <amp-recaptcha-input>. Will be used as a parameter key in the AMP form body submission.
data-sitekey (required) reCAPTCHA v3 site key for the registered website.
data-action (required) reCAPTCHA v3 action to be executed on form submission.

Validation

See <amp-recaptcha-input> rules in the AMP validator specification.

¿Necesitas más ayuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub