If you've stumbled upon this post it probably means that you're getting the following error message from the Google Search Console for some of your WordPress pages/posts:
The tag ‘FORM [method=GET]’ requires including the ‘amp-form’ extension
If you're receiving this, it most likely means that your page(s) or post(s) contains either a <form> element directly or hosts a code snippet - or a plugin shortcode - which embeds a <form> element into it.
As you might already know, the AMP markup is rather strict: you cannot use most "common" HTML elements in an AMP document unless you load a dedicated extension. That's also the case of FORM and INPUT elements, which can be only used if you include a script reference to the amp-form extension. The extension allows polyfilling some of the missing behaviors in browsers.
As clarified in the official AMP docs, the amp-form extension MUST be loaded if you're using a <form> element, otherwise your document will be invalid - and flagged as such by the Google Search Console. Conversely, using input tags for purposes other than submitting their values (e.g. inputs not inside a <form> element) is valid without loading amp-form extension.
Anyway, to allow the usage of <form> elements - and input tags within them - you need to add the following code within the <head> section of your web page:
1 |
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> |
The script is completely harmless, so we can include it in any of our AMP pages - either if they do actually contain a form or not. For some additional documentation regarding amp-form and HTML5 data-annotation samples, check out the official AMP docs.
Now, if you're not using WordPress, you're basically done - just find a way to add the above <script> to your AMP web page template. In case you're using WordPress and you're looking for a way to fix the issue and validate your pages within the Google Search Console, keep reading.
Method #1: using is_amp_endpoint()
If you're using the WP-AMP plugin by Automattic (aka AMP for WordPress) you can make use of the awesome is_amp_endpoint() PHP function, which will return TRUE if the current request asked for an AMP page and FALSE otherwise. This is a very viable way to add any kind of AMP extension, including - yet not limiting to - the one we're talking about here.
To implement such logic, add the following code to your WordPress's header.php file, right below the </head> closing tag:
1 2 3 |
<?php if (function_exists( 'is_amp_endpoint' ) && is_amp_endpoint()) { ?> <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> <?php } ?> |
That's about it. It's worth noting that, before actually calling the function, we check if it does actually exist: that way our WordPress web site won't crash if/when AMP plugin gets disabled (or change its behaviour / method signature).
Method #2: using the amp_post_template_data filter
In the unlikely case you're not using the WP-AMP plugin and hence the is_amp_endpoint() is unavailable, or if you don't want to mess up with your template's header.php file, you can use the following alternative workaround instead:
1 2 3 4 5 6 7 8 9 |
add_filter( 'amp_post_template_data', function( $data ) { $data['amp_component_scripts'] = array_merge( $data['amp_component_scripts'], array( 'amp-form' => 'https://cdn.ampproject.org/v0/amp-form-latest.js', ) ); return $data; } ); |
Place the above code in your WordPress functions.php file and you'll be able to fix your issue for good.
That's about it... Happy AMPing!
Hello, Ryan.
I use AMP WP plugin on my current project. I have several shortcodes and depends on if it is amp page or not it sould output different information.
As soon as I don’t use AMP (official plugin) I can’t use “is_amp_endpoint” function inside shortcodes. Is there any other way to check amp page inside of a shortcode?
Almost every WordPress AMP plugin has a filter and/or a method you can use to check if the page is being served by AMP or not.
If you don’t have any of them, you can always check for the /amp/ presence in the url.
hi, ryadel
I am using AMP for WP – Accelerated Mobile Pages By Ahmed Kaludi, Mohammed Kaludi.
I am getting an error Invalid URL protocol in attribute ‘action’ of tag ‘FORM [method=GET]’.
I am not tech guy, I tried both of the above options not working please help me I tried all option available online but was not helpful…
Hello there,
unfortunately I have no idea of what could cause the error you are describing: try to ask to the plugin authors, maybe they know how to work around that.
Here’s the AMP for WP plugin official support page:
https://wordpress.org/support/plugin/accelerated-mobile-pages/
Good luck!