4 tricks for developing with the AMP framework

Discover these tricks to increase the possibilities of web pages developed using the AMP framework

Show message while submitting a form

<div class="alert alert-info">Sending...</div>
form .alert  display: none  border: 1px solid #bce8f1  color: #31708f  background-color: #d9edf7form.amp-form-submitting .alert  display: block

Change input texts and values

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<button on="tap:formLightbox">
<button
on="tap:AMP.setState({formLightboxTitle: 'Nuestro equipo a tu disposición',formLightbox"
>
<h3 [text]="formLightboxTitle"></h3>
<h3 [text]="'Esto es el título' + formLightboxTitle"></h3>

Modifying the value of an input

<button
on="tap:AMP.setState({formLightboxTitle: 'Nuestro equipo a tu disposición', service: 'button-1'}),formLightbox">
<input type="hidden" [value]="service">

Reset a form

<buttonclass="lightbox__close"on="tap:formLightbox.close,myFormId.clear">

Show a modal after scrolling

<amp-position-observer
intersection-ratios="1"
on="enter.newsletterLightbox)"
layout="nodisplay"
>
</amp-position-observer>

“enter” event with “low” trust is not allowed to invoke “amp-lightbox.activate”.

.newsletter-lightbox  position: fixed  bottom: 0  right: 0  opacity: 0  visibility: hidden
<div id="newsletterLightbox" class="newsletter-lightbox"
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<amp-position-observerintersection-ratios="1"on="enter:newsletterLightboxAnimation.start"layout="nodisplay"once></amp-position-observer>

Conclusions

Do you want to read more articles like this?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store