The tag ‘FORM [method=GET]’ requires including the ‘amp-form’ extension error in WordPress - How to fix it

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:

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:

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:

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!

 

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

4 Comments on “The tag ‘FORM [method=GET]’ requires including the ‘amp-form’ extension error in WordPress - How to fix it”

  1. 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?

    1. 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.

      if(strpos($_SERVER['REQUEST_URI'], '/amp/') !== false) { /* do stuff */ }
      
  2. 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…

    1. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.