Using forms on AMP pages

As seen on the previous page, wbAMP can automatically AMPlify for you Joomla standard Contact forms. However, and to improve your AMP visitors experience and site performance, you probably want to add other types of forms to gather information.

wbAMP now lets you insert custom AMP forms in your content, in a simpler way.

Background and documentation

Forms in AMP are rather tricky to be honest, and will require some custom coding in most situations. However, wbAMP support makes it a bit simpler. AMP form specification from the AMP project is located on this page:

Normally, wbAMP will strip any form element it finds on a page when converting it to AMP. This is because AMP forms require a specific syntax and have some characteristics that cannot be converted automatically generally speaking. If not fully converted and handled, they will cause AMP validation errors, thus preventing the page to be indexed and served to your visitors.

We can convert and handle automatically some forms we know about (see the Joomla contact component support), but support has to be provided on a case by case basis (although we are working on making that much simpler in the future).

How to include a custom form

At the moment, if you plan on including a custom form on your AMP pages, you have to take the steps described below:

1. Wrap your form in wbamp tags

{wbamp-form start template="mustache"}
... your form here ...
</form>
{wbamp-form end}

This will have the following effects:

• wbAMP will include the amp-form.js script on that page
• wbAMP will include the amp-mustache.js script on that page

Our example assumes you use the mustache template format to present the form submission result to your users, which is the common way. Omit the template="mustache" part if you do not use a Mustache template.

• The action attribute will be turned into an action-xhr one, if method="post" is present.
• The target attribute will be added or forced to _top or _blank

1. Follow the AMP forms restrictions

Please refer to the AMP form documentation for the actual and up to date details. Here are a few things to check in the documentation and apply to your form handling:

• You can only use an HTTPS or protocol-relative (//my-url) to submit forms
• You should use method=GET only for "navigational" forms, ie: search
• Your AMP action URL must perform security checks when the form is submitted (see AMP documentation). This consists in checking the CORS headers and origin values. AMP forms **do not use the usual CRSF security tokens used in Joomla forms (because your AMP page may be rendered on other sites than your own, ie some AMP caches)
• When using POST submission, the submission is done in ajax and you must return a JSON response. This response may include a redirect instruction, or some text to be displayed in case of success and in case of error
• Any HTTP status code other than 20X will be considered an error
• mark up your mustache template as follow to use the default CSS that comes with wbAMP:

<div submit-success="" class="wbamp-form-status-success">
    <template type="amp-mustache">
        <div class="wbamp-form-status wbamp-form-status-success">{{^message}}Thank you for sending a message!{{/message}}{{#message}}{{{message}}}{{/message}} {{#link}}<a class="button wbamp-form-status-success" href="https://example.com{{link}}">Continue</a>{{/link}}</div>
    </template>
</div>
<div submit-error="" class="wbamp-form-status-error">
    <template type="amp-mustache">
        <div class="wbamp-form-status wbamp-form-status-success-error">{{^message}}Sorry, something went wrong. Please try again later.{{/message}}{{#message}}<div class="message">{{{message}}}</div>{{/message}}{{#has_errors}}<ul>{{/has_errors}}{{#errors}}<li>{{{error_detail}}}</li>{{/errors}}{{#has_errors}}</ul>{{/has_errors}}</div>
    </template>
</div>

This code example is taken from the Joomla contact form which is automatically converted by wbAMP (when you enable this feature in wbAMP settings). You can use it as an example for many kinds of forms.

Again, the AMP form documentation is your guide when creating an form.