![The tag ‘FORM [method=GET]’ requires including the ‘amp-form’ extension error in Wordpress - How to fix it](https://www.ryadel.com/wp-content/uploads/2018/02/wordpress-dashboard-amp-form-include-extension-wp-amp.jpg "The tag ‘FORM [method=GET]’ requires including the ‘amp-form’ extension error in Wordpress - How to fix it")
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!
