CINXE.COM
Documentation: <amp-form> - amp.dev
<!doctype html><html amp lang="en" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="Allows you to create forms to submit input fields in an AMP document."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Allows you to create forms to submit input fields in an AMP document."><meta name="twitter:title" content="Documentation: amp-form"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:title" content="Documentation: <amp-form>"><meta property="og:url" content="https://amp.dev/documentation/components/amp-form/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,ads,email,stories"><meta name="page-locale" content="en,de,pt_br,ru,zh_cn,pl,vi"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-form-0.1.js" crossorigin="anonymous" custom-element="amp-form"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous" custom-element="amp-iframe"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" crossorigin="anonymous" custom-template="amp-mustache"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script async src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.mjs" custom-element="amp-user-notification" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js" crossorigin="anonymous" custom-element="amp-user-notification"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/documentation/components/amp-form/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/components/amp-form/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/documentation/components/amp-form/"><link rel="alternate" hreflang="ar" href="https://amp.dev/ar/documentation/components/amp-form/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/documentation/components/amp-form/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/documentation/components/amp-form/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/documentation/components/amp-form/"><link rel="alternate" hreflang="ja" href="https://amp.dev/ja/documentation/components/amp-form/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/documentation/components/amp-form/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/documentation/components/amp-form/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/documentation/components/amp-form/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/documentation/components/amp-form/"><title>Documentation: <amp-form> - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/documentation/components/amp-form/ ","name":"amp.dev","headline":"Documentation: \u0026lt;amp-form\u0026gt;","description":"Allows you to create forms to submit input fields in an AMP document.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-component-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-component{max-width:100%}@media(min-width:768px){.ap-o-sidebar-component .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-component .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-component .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-component .nav-list.level-1{margin:0 15px}.ap-o-sidebar-component .nav-list .nav-list{padding-bottom:10px;margin-bottom:10px}.ap-o-sidebar-component .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-component .nav-item.level-1{pointer-events:none}.ap-o-sidebar-component .nav-item.level-1 .nav-link{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1.8rem;padding:0;margin:0;line-height:1;word-break:break-all;pointer-events:auto;color:#e2e5e6}.ap-o-sidebar-component .nav-item.level-1 .nav-link:only-child:not(a){margin:-20px;font-size:0;pointer-events:none;z-index:-1}.ap-o-sidebar-component .nav-item.level-1>.nav-link{padding-top:10px;pointer-events:none;z-index:1;transition:color .15s ease}.ap-o-sidebar-component .nav-item.level-1.active>.nav-link,.ap-o-sidebar-component .nav-item.level-1:hover>.nav-link{color:#91979d}.ap-o-sidebar-component .nav-item.level-2 .nav-link{text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em;padding:3px 25px 3px 0;margin:0}.ap-o-sidebar-component .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-component .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-component .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-a-img{position:relative}.image-preview-1 .ap-a-img{overflow:hidden;border-radius:50%}.image-preview-2 .ap-a-img{margin-right:-30px;filter:drop-shadow(0 30px 30px -15px rgba(0,0,0,.25))}@media(min-width:768px){.image-preview-2 .ap-a-img{margin-right:0}}.-is{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-is{display:none}.-io{display:block}}.-ff{padding:84px 15px 0}@media(min-width:768px){.-ff{padding-left:0;padding-right:0}}.-fl{margin-bottom:.75em;font-size:1.8rem;margin-top:2rem;padding:20px 0}.-fl,.-fc{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}.-fc{margin-top:1.5rem;font-size:1.2rem;padding-left:20px;margin-bottom:0}.-fh{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}.-fp{display:block;background-color:#ebebf0;height:1px;margin:30px 20px 30px 0}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap-m-clip{position:relative}.ap-m-clip-expand{position:absolute;z-index:10;bottom:0;left:0;display:flex;justify-content:center;align-items:flex-end;height:65px;width:100%;border:none;background:#fff;background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 40%);cursor:pointer}.ap-m-clip-expand-icon{max-height:21px;max-width:21px;margin-top:35px;fill:#48525c;transition:transform .3s}.ap-m-clip-expand:hover .ap-m-clip-expand-icon{fill:#005af0;transform:translate3d(0,-2px,0)}.ap-a-copy-script{display:flex;align-items:center;flex-basis:100%}.ap-a-copy-script pre{overflow-x:scroll;flex:1 0;margin:6px 8px 6px 0;padding:4px 6px;white-space:wrap;background:#e2e5e6;font-size:12.6px}.ap-a-copy-script pre::-webkit-scrollbar{width:6px;height:6px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-a-copy-script pre::-webkit-scrollbar-corner{background-color:transparent}.ap-a-copy-script pre::-webkit-scrollbar{height:4px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:0}.ap-o-component-intro-row{padding:15px;background-color:#fff;border:1px solid #e2e5e6}.ap-o-component-intro-row+.ap-o-component-intro-row{margin-top:10px}@media(min-width:768px){.ap-o-component-intro-row-inline{display:flex;align-items:baseline;flex-wrap:wrap}}.ap-o-component-intro-headline{font-size:16px;margin:0 0 10px}.ap-o-component-intro-row-inline .ap-o-component-intro-headline{white-space:nowrap;margin-right:10px}.ap-o-component-intro-headline .active{color:#00f}.ap-o-component-intro-filter{margin-left:auto}.ap-o-component-intro-filter *{font-size:.875rem}.ap-o-component-intro-text{margin:5px 0}.ap-o-component-intro-list{max-height:142px;overflow:hidden}@media(min-width:768px){.ap-o-component-intro-list{display:flex;flex-wrap:wrap}}.ap-o-component-intro-list-item{display:block;margin-bottom:6px;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.ap-o-component-intro-list-item{width:50%;padding-right:12px}}.expanded .ap-o-component-intro-list{max-height:none}.ap-breadcrumbs,.-ou{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-oa{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-of:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-of:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ol{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ol .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ol .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol,#sidebar-left[open]~.ap--main .-ol{z-index:9999999999}.-oc{position:absolute;top:50px}.-oh{position:fixed;top:-99px}.-op{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-op .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-op .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-op .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-od{position:fixed;top:-99px}.-ol{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ol{display:none}}.-ol .label-icon svg{transform:rotate(180deg)}.-ov{display:none}.-om{position:fixed;top:-99px}.-og{display:none}@media(min-width:768px)and (max-width:1440px){.-ov{display:inline-block}.-og{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-om:checked~.-oy{grid-column:1/2}.-om:checked~.-oy nav{display:none}.-om:checked~.-oy svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-om:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-om:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-om:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-om:checked~.-t,.-om:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-om:checked~.-t .-og,.-om:checked~.ap--help .-og{margin-left:-88px}.-om:checked~.-t .-og .label-icon svg,.-om:checked~.ap--help .-og .label-icon svg{transform:rotate(180deg)}}.-fd{display:none}.-fv.amp-active~.-fd{height:42px;max-width:2020px;margin:0 auto;color:#fff;background-color:#20202a;font-size:.875rem;z-index:100;position:absolute;width:100%;left:0;right:0}@media(min-width:768px){.-fv.amp-active~.-fd{display:block}}.-fv.amp-active~.-fd .-fm{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-fv.amp-active~.-fd .-fm{padding:0 15px}}.-fv.amp-active~.-fd .-fm:after{position:absolute;content:"";top:42px;left:50px;width:0;height:0;border-color:#20202a transparent transparent;border-style:solid;border-width:8px 10px 0}.-fv.amp-active~.-fd .-fg{flex:1 0;padding-right:10px}.-fv.amp-active~.-fd .-fy{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-fv.amp-active~.-fd .-fy svg{fill:#fff;width:100%;height:100%}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}body{background-color:#fafafc}.-fb .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-fb .-tf{padding:0 15px}.-fb .-tf>div,.-fb .-tf section{min-width:0}}@media(min-width:768px){.-fb .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-fb .-tf{padding:0 15px}}.-fb .-t,.-fb .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc;box-shadow:0 25px 40px 0 rgba(0,0,0,.05);padding-left:0;padding-right:0}@media(min-width:768px){.-fb .-t,.-fb .ap--help{grid-column:9/25}}@media(min-width:1024px){.-fb .-t,.-fb .ap--help{grid-column:7/25}.-fb .-t p.limit,.-fb .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-fb .-t,.-fb .ap--help{grid-column:8/25}}@media(min-width:1024px){.-fb .-t,.-fb .ap--help{grid-column:6/25}}.-fb .-oy{grid-column:auto;padding:0}@media(min-width:768px){.-fb .-oy{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-fb .-oy{grid-column:1/6}}.-fb .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-fb .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-fb .ap--toc{grid-column:8/25}.-fb .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-fb .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-fb .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-fb .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-fb .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-fb .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-fb .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-fb .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-fb .-oy+.-t,.-fb .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-fb .-oy+.-t,.-fb .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-fb .-oy+.-t:nth-of-type(2),.-fb .-oy+.-t:nth-of-type(3),.-fb .ap--toc+.-t:nth-of-type(2),.-fb .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-fb .ap--versions{position:relative;display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e5e6;margin-top:5px}.-fb .ap--versions-toggle{border:0;padding:0 32px 0 8px;background:#fff;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none;appearance:none}.-fb .ap--versions:after{content:"";position:absolute;right:8px;width:16px;height:35px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2320202A'%3E%3Cpath d='M59.863 17.14l4.137 5.488-32 24.232-32-24.232 4.137-5.488 27.863 21.108z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;pointer-events:none}.-fb .ap--component-tags{margin-top:-1.5rem;margin-bottom:2rem}@media(min-width:768px){.-fb .-t,.-fb .ap--help{padding-left:30px;padding-right:30px}}.ap-code-preview,.ap-o-code-preview{position:relative;margin:1rem 0;background:#20202a}.ap-code-preview-controls,.ap-o-code-preview-controls{width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto;padding:9px 0}.ap-code-preview-controls-button,.ap-o-code-preview-controls-button{-webkit-appearance:none;background-color:transparent;border:none;position:relative;padding:6px;cursor:pointer}.ap-code-preview-controls-icon,.ap-o-code-preview-controls-icon{width:22px;height:22px;fill:#fff;opacity:.6;transition:opacity .25s ease-out}.ap-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-o-code-preview-controls-icon{opacity:1}.ap-code-preview-preview,.ap-o-code-preview-preview{position:relative;top:1em;margin:1em;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(min-height:768px){.ap-code-preview-preview+div.-ta,.ap-o-code-preview-preview+div.-ta{min-height:0}}.ap-code-preview-preview-iframe,.ap-o-code-preview-preview-iframe{display:flex;justify-content:center;position:relative;margin:0 1em}@media screen and (max-width:412px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:240px;height:427px}}@media screen and (min-width:413px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:320px;height:569px}}.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{position:relative;padding:0 1em;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:start}@media(min-width:1024px){.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{padding:0 15%}}.ap-code-preview-top-preview+div.-ta,.ap-o-code-preview-top-preview+div.-ta{position:relative;width:100%;min-height:0;padding:1em 1em 0;margin-top:0}.ap-code-preview-top-preview amp-iframe,.ap-o-code-preview-top-preview amp-iframe{align-self:center}.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;padding:0;margin:0}@media(min-width:768px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:auto;left:60%;background-color:#1c1c24}}@media(max-width:767px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{overflow:hidden;pointer-events:none}.ap-code-preview-side-preview-active,.ap-o-code-preview-side-preview-active{pointer-events:auto}}.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:absolute;max-height:100%;right:15px;top:auto;background-color:#fff}@media(max-width:767px){.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:static;background:#fff;pointer-events:none;transform:translateY(100%);transition:transform .2s cubic-bezier(0,0,.3,1)}.ap-code-preview-side-preview-frame.show,.ap-o-code-preview-side-preview-frame.show{transform:translateY(0);pointer-events:auto;height:100%}}.ap-code-preview-iframe,.ap-o-code-preview-iframe{background:#fff;margin-bottom:1em}.ap-code-preview.side-frame .-ta,.ap-code-preview.top-frame .-ta,.ap-o-code-preview.side-frame .-ta,.ap-o-code-preview.top-frame .-ta{min-height:150px;max-height:450px}.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:100%;margin:0;background:0 0}@media(min-width:768px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:60%;min-height:580px}}@media(min-width:1024px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:738px}}@media(min-width:1280px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:842px}}@media(min-width:1441px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:746px}}.ap-a-fab{display:flex;justify-content:center;width:56px;position:absolute;bottom:16px;right:16px;padding:0;font-size:24px;line-height:56px;user-select:none;cursor:pointer;z-index:14;color:#fff;background-color:#005af0;border:none;border-radius:50%;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);pointer-events:auto}.ap-a-fab:active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.ap-a-fab-show{transform:scale(0);animation:expand .25s ease-in-out .25s both}.ap-a-fab-hide{transform:scale(1);animation:collapse .25s ease-in-out both}@media(min-width:768px){.ap-a-fab{display:none}}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}table{table-layout:fixed;width:100%;position:relative;border-collapse:collapse;padding:0 0 0 20px;margin:1.5em -20px 2em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem}@media(min-width:768px){table{padding:0;margin:1.5em 0 2em}}thead{font-weight:700}thead tr{text-align:left}thead tr th{padding:20px}tbody tr,thead tr th{border-bottom:1px solid #e2e5e6}tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.5)}tbody tr td:first-child{border-right:1px solid #e2e5e6}tbody td{padding:10px 20px;text-align:left;vertical-align:top;width:50%}@media(min-width:768px){tbody td{padding:20px}}@media(min-width:1024px){tbody td{width:25%}}tbody td code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="external" viewBox="0 0 64 64"> <path d="M28.879 11.24c-0.841-0.841-2.206-0.841-3.048 0s-0.841 2.207 0 3.048l15.543 15.543h-39.241c-1.219 0-2.133 0.987-2.133 2.133 0 1.219 0.914 2.207 2.133 2.207h39.241l-15.616 15.543c-0.841 0.841-0.841 2.206 0 3.048 0.835 0.841 2.206 0.841 3.048 0l19.273-19.279c0.841-0.841 0.841-2.206 0-3.048l-19.2-19.194zM59.429 27.392c2.511 0 4.571 2.060 4.571 4.571s-2.060 4.571-4.571 4.571-4.571-2.060-4.571-4.571 2.060-4.571 4.571-4.571z"/> </symbol><symbol id="speech-bubble" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#005AF0" stroke-width="1.94" d="M1.544 19.002c0 9.64 7.816 17.457 17.457 17.457 3.707 0 6.783-.838 9.61-2.809.936-.653 7.057 3.628 7.848 2.809.71-.737-3.264-7.394-2.69-8.247 1.868-2.78 2.69-5.61 2.69-9.21C36.459 9.36 28.642 1.544 19 1.544c-9.639 0-17.456 7.817-17.456 17.458z"/><path fill="#005AF0" fill-rule="nonzero" d="M17.621 28.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 28.71z"/></g></symbol><symbol id="warning-sign" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#F3C000" stroke-width="2" d="M19.843 2.29l16.643 33.671c.177.356.03.788-.326.964-.1.05-.208.075-.319.075H2.171c-.398 0-.72-.322-.72-.72 0-.113.026-.224.077-.325l17.028-33.67c.179-.355.612-.497.967-.318.139.07.251.184.32.324z"/><path fill="#F3C000" fill-rule="nonzero" d="M17.621 32.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 32.71z"/></g></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="contentmenu" viewBox="0 0 64 64"> <path d="M1.351 46.865h36.036c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-36.036c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 14.432h40.541c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-40.541c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 38.757h31.532c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-31.532c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 30.649h37.838c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-37.838c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 22.541h34.234c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-34.234c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM52.249 29.371c-0.992 0-1.231-0.566-0.525-1.272l5.296-5.296c0.353-0.353 0.931-0.348 1.279 0l5.296 5.296c0.702 0.702 0.466 1.272-0.525 1.272h-10.822zM63.069 35.153c0.992 0 1.231 0.566 0.525 1.272l-5.296 5.296c-0.353 0.353-0.931 0.348-1.279 0l-5.296-5.296c-0.702-0.702-0.466-1.272 0.525-1.272h10.822z"/> </symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol><symbol id="orientation-toggle" viewBox="0 0 64 64"> <path d="M62.149 0h-30.149c-1.058 0-1.851 0.793-1.851 1.851v22.215c0 1.058 0.793 1.851 1.851 1.851s1.851-0.793 1.851-1.851v-20.364h26.446v42.843h-4.231c-1.058 0-1.851 0.793-1.851 1.851s0.793 1.851 1.851 1.851h6.083c1.058 0 1.851-0.793 1.851-1.851v-46.545c0-0.793-0.793-1.851-1.851-1.851z"/> <path d="M48.132 30.413h-46.281c-1.058 0-1.851 0.793-1.851 1.851v29.884c0 1.058 0.793 1.851 1.851 1.851h46.281c1.058 0 1.851-0.793 1.851-1.851v-29.884c0-1.058-0.793-1.851-1.851-1.851zM46.281 60.297h-42.578v-26.182h42.578v26.182z"/> <path d="M4.76 25.124c1.058 0 1.851-0.793 1.851-1.851 0-6.612 5.289-11.901 11.901-11.901h1.058l-0.529 0.529c-0.793 0.793-0.793 1.851 0 2.645 0.264 0.264 0.793 0.529 1.322 0.529s1.058-0.264 1.322-0.529l3.703-3.703c0.793-0.793 0.793-1.851 0-2.645l-3.703-3.703c-0.793-0.793-1.851-0.793-2.645 0s-0.793 1.851 0 2.645l0.529 0.529h-1.058c-8.727 0-15.603 7.141-15.603 15.603 0 1.058 0.793 1.851 1.851 1.851z"/> </symbol><symbol id="reload" viewBox="0 0 64 64"> <path d="M58.303 24.441c-4.535-10.583-14.614-17.386-25.953-17.638l2.772-2.772c1.008-1.008 1.008-2.268 0-3.276s-2.268-1.008-3.276 0l-7.055 7.307c-1.008 1.008-1.008 2.268 0 3.276l7.055 7.055c0.504 0.504 1.008 0.756 1.512 0.756s1.26-0.252 1.512-0.756c1.008-1.008 1.008-2.268 0-3.276l-3.779-3.78c9.827-0.252 18.898 5.543 22.929 14.614 4.535 10.583 0.756 22.929-9.071 29.48-9.575 6.299-22.425 4.787-30.488-3.528s-8.819-21.165-2.016-30.488c0.756-1.008 0.504-2.52-0.504-3.276s-2.52-0.504-3.024 0.504c-8.063 11.087-7.055 26.457 2.52 36.535 5.543 5.795 13.102 8.819 20.661 8.819 5.291 0 10.835-1.512 15.622-4.787 11.339-7.559 15.874-22.173 10.583-34.772z"/> </symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> About <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">AMP Websites</div> <div class="ap-o-header-flyout-item-description">Create flawless web experiences</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">Snackable Stories for everyone</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">AMP Ads</div> <div class="ap-o-header-flyout-item-description">Super fast ads on the web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">AMP Email</div> <div class="ap-o-header-flyout-item-description">Next gen email</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/how-amp-works/">How AMP works</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/mission-and-vision/">Vision & Mission</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/use-cases/">Use cases</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/success-stories/">Success Stories</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw active"> Documentation <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/documentation/">Get Started</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Guides & Tutorials</div> <div class="ap-o-header-flyout-item-description">Get started with AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Components</div> <div class="ap-o-header-flyout-item-description">The complete AMP library</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Examples</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Courses</div> <div class="ap-o-header-flyout-item-description">Learn AMP with free courses</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Templates</div> <div class="ap-o-header-flyout-item-description">Ready to use</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Tools</div> <div class="ap-o-header-flyout-item-description">Begin building</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Community <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/documentation/guides-and-tutorials/contribute/">Contribute</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/roadmap/">Roadmap</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/governance/">Governance</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/working-groups/access-subscriptions/">Working Groups</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Events <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/events/amp-roadshow/">AMP Roadshow</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">Blog</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Support <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/support/">Help</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/support/faq/">FAQ</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Select a language" tabindex="-1"> <span class="-tw">EN</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/de/documentation/components/amp-form/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/components/amp-form/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/components/amp-form/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/components/amp-form/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/components/amp-form/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/components/amp-form/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/components/amp-form/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/components/amp-form/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/components/amp-form/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/components/amp-form/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/components/amp-form/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/components/amp-form/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/components/amp-form/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/components/amp-form/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Burger Menu" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> About </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/websites/"> AMP Websites </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/ads/"> AMP Ads </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/email/"> AMP Email </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/how-amp-works/"> How AMP works </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/mission-and-vision/"> Vision & Mission </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/use-cases/"> Use cases </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/success-stories/"> Success Stories </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw active"> Documentation </label> <input class="-td" type="checkbox" aria-label="Documentation" checked> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/"> Get Started </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/guides-and-tutorials/"> Guides & Tutorials </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/components/"> Components </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/examples/"> Examples </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/courses/"> Courses </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/templates/"> Templates </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/tools/"> Tools </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Community </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/guides-and-tutorials/contribute/"> Contribute </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/roadmap/"> Roadmap </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/governance/"> Governance </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/working-groups/access-subscriptions/"> Working Groups </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Events </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/events/amp-roadshow/"> AMP Roadshow </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">Blog</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/support/"> Help </a> </li> </ul> </nav> <div class="-oc"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div> <amp-user-notification class="-fv i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-fd" aria-hidden="true"> <div class="-fm"> <div class="-fg">Select your format for a more streamlined experience</div> <button class="-fy" on="tap:format-filter-hint.dismiss"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> </div> </div> <main class="ap--main -fb"> <div class="-tf"> <input class="-od ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-om ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-oy"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <span class="ap-o-toc-hl">Table of contents</span> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </label> <input class="-oh -of" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#usage">Usage</a><ul> <li><a href="#inputs-and-fields">Inputs and fields</a><ul> <li><a href="#allowed">Allowed</a></li> <li><a href="#not-allowed">Not Allowed</a></li> </ul> </li> <li><a href="#success-and-error-response-rendering">Success and error response rendering</a><ul> <li><a href="#to-render-responses-with-templating:">To render responses with templating:</a></li> </ul> </li> <li><a href="#to-render-a-successful-response-with-data-binding">To render a successful response with data binding</a><ul> <li><a href="#redirecting-after-a-submission">Redirecting after a submission</a></li> </ul> </li> <li><a href="#custom-validations">Custom validations</a><ul> <li><a href="#reporting-strategies">Reporting strategies</a><ul> <li><a href="#show-first-on-submit">Show First on Submit</a></li> <li><a href="#show-all-on-submit">Show All on Submit</a></li> <li><a href="#as-you-go">As You Go</a></li> <li><a href="#interact-and-submit">Interact and Submit</a></li> </ul> </li> </ul> </li> <li><a href="#verification">Verification</a></li> <li><a href="#variable-substitutions">Variable substitutions</a></li> <li><a href="#autoexpand">Autoexpand</a></li> <li><a href="#polyfills">Polyfills</a><ul> <li><a href="#invalid-submit-blocking-and-validation-message-bubble">Invalid submit blocking and validation message bubble</a></li> <li><a href="#user-interaction-pseudo-classes">User-interaction pseudo-classes</a></li> <li><a href="#<textarea>-validation"><textarea> validation</a></li> </ul> </li> <li><a href="#security-considerations">Security considerations</a><ul> <li><a href="#protecting-against-xsrf">Protecting against XSRF</a></li> </ul> </li> </ul> </li> <li><a href="#attributes">Attributes</a><ul> <li><a href="#target">target</a></li> <li><a href="#action">action</a></li> <li><a href="#action-xhr">action-xhr</a></li> <li><a href="#enctype">enctype</a></li> <li><a href="#data-initialize-from-url">data-initialize-from-url</a></li> <li><a href="#xssi-prefix">xssi-prefix</a></li> <li><a href="#other-form-attributes">Other form attributes</a></li> <li><a href="#custom-validation-reporting">custom-validation-reporting</a></li> <li></li> </ul> </li> <li><a href="#actions">Actions</a><ul> <li><a href="#submit">submit</a></li> <li><a href="#clear">clear</a></li> </ul> </li> <li><a href="#events">Events</a><ul> <li><a href="#submit_1">submit</a></li> <li><a href="#submit-success">submit-success</a></li> <li><a href="#submit-error">submit-error</a></li> <li><a href="#verify">verify</a></li> <li><a href="#verify-error">verify-error</a></li> <li><a href="#valid">valid</a></li> <li><a href="#invalid">invalid</a></li> <li><a href="#input-events">Input events</a></li> </ul> </li> <li><a href="#analytics">Analytics</a></li> <li><a href="#styling">Styling</a><ul> <li><a href="#classes-and-css-hooks">Classes and CSS hooks</a></li> </ul> </li> <li><a href="#validation">Validation</a></li></ul> </div> </section> <section class="-t"> <label class="-op -ol ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Toggle Sidebar</span> </label> <label class="-op -og ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Toggle Sidebar</span> </label> <nav class="-ou"> <a class="ap-m-breadcrumbs-crumb" href="/documentation/">Documentation</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -oa"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/documentation/components/">Components</a> </nav> <h1> amp-form </h1> <div class="ap-o-component-intro"> <div class="ap-o-component-intro-row"> <h4 class="ap-o-component-intro-headline">Description</h4> <p class="ap-o-component-intro-text">Allows you to create forms to submit input fields in an AMP document.</p> </div> <div class="ap-o-component-intro-row ap-o-component-intro-row-inline"> <h4 class="ap-o-component-intro-headline">Required Scripts</h4> <div id="amp-script" class="ap-a-copy-script"> <pre><script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script></pre> <amp-iframe width="24" height="24" layout="fixed" sandbox="allow-scripts" src="https://amp.dev/shared/copy-script/#%3Cscript%20async%20custom-element%3D%22amp-form%22%20src%3D%22https%3A//cdn.ampproject.org/v0/amp-form-0.1.js%22%3E%3C/script%3E" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed"> <div placeholder></div> </amp-iframe> </div> </div> <div class="ap-o-component-intro-row"> <div id="examples" class="ap-m-clip"> <h4 class="ap-o-component-intro-headline">Examples</h4> <div class="ap-o-component-intro-list"> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_browse_page/'>Product Browse Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_page/'>Product Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-autocomplete/'>amp-autocomplete</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-bind-recaptcha/'>amp-bind-recaptcha</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-date-picker/'>amp-date-picker</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-form/'>amp-form</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-inputmask/'>amp-inputmask</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-selector/'>amp-selector</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/combobox/'>ComboBox</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/linked_dropdowns/'>Linked Dropdowns</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/multi_page_flow/'>Multi Page Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/show_more_button/'>Show More Button</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/checkout_flow/'>Checkout Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/hotel/'>Hotel</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/housing/'>Housing</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/shopping_cart/'>Shopping Cart</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-analytics/'>amp-analytics</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-recaptcha-input/'>amp-recaptcha-input</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-web-push/'>amp-web-push</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/comment_section/'>Comment Section</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/favorite_button/'>Favorite Button</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/poll/'>Poll</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/star_rating/'>Star Rating</a> </div> <button id="examples-expand" class="ap-m-clip-expand" on="tap:examples.toggleClass(class='expanded', force=true),examples-expand.hide()"> <svg class="ap-m-clip-expand-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </button> </div> </div> </div> <h2 id="usage">Usage</h2> <p>The <code>amp-form</code> extension allows you to create forms (<code><form></code>) to submit input fields in an AMP document. The <code>amp-form</code> extension also provides <a href="#polyfills">polyfills</a> for some missing behaviors in browsers.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-sign"/></svg> </div> <div class="ap-m-tip-content"> <p></p> <p>If you're submitting data in your form, your server endpoint must implement the requirements for <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests#cors-security-in-amp">CORS security</a>.</p> <p> </p></div> </div><p></p> <p>Before creating a <code><form></code>, you must include the required script for the <code><amp-form></code> extension, otherwise your document will be invalid. If you're using <code>input</code> tags for purposes other than submitting their values (e.g., inputs not inside a <code><form></code>), you do not need to load the <code>amp-form</code> extension.</p><div class="ap-code-preview inline"> <div class="ap-code-preview-preview"> <form method="post" action-xhr="https://example.com/subscribe" target="_top"> <fieldset> <label> <span>Name:</span> <input type="text" name="name" required> </label> <br> <label> <span>Email:</span> <input type="email" name="email" required> </label> <br> <input type="submit" value="Subscribe"> </fieldset> <div submit-success> <template type="amp-mustache"> Subscription successful! </template> </div> <div submit-error> <template type="amp-mustache"> Subscription failed! </template> </div> </form> </div> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"https://example.com/subscribe"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span><span class="p">></span> <span class="p"><</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Name:<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"name"</span> <span class="na">required</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">br</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Email:<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"email"</span> <span class="na">name</span><span class="o">=</span><span class="s">"email"</span> <span class="na">required</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">br</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Subscribe"</span><span class="p">></span> <span class="p"></</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-success</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> Subscription successful! <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-error</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> Subscription failed! <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/documentation/components/amp-form.example.1.html%3Fformat%3Dwebsites" class="-n ap--playground-link"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Open this snippet in playground</span> </a> <h3 id="inputs-and-fields">Inputs and fields</h3> <h4 id="allowed">Allowed</h4> <p> </p> <ul> <li>Other form-related elements, including: <code><textarea></code>, <code><select></code>, <code><option></code>, <code><fieldset></code>, <code><label></code>, <code><input type=text></code>, <code><input type=submit></code>, and so on.</li> <li><code><input type=password></code> and <code><input type=file></code> inside of <code><form method=POST action-xhr></code>.</li> <li><a href="https://amp.dev/documentation/components/amp-selector"><code>amp-selector</code></a></li> </ul> <p> </p> <p> </p> <h4 id="not-allowed">Not Allowed</h4> <p> </p> <ul> <li><code><input type=button></code>, <code><input type=image></code></li> <li>Most of the form-related attributes on inputs including: <code>form</code>, <code>formaction</code>, <code>formtarget</code>, <code>formmethod</code> and others.</li> </ul> <p> </p> <p> </p> <p>(Relaxing some of these rules might be reconsidered in the future - <a href="https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#suggestions-and-feature-requests">please let us know</a> if you require these and provide use cases).</p> <p>For details on valid inputs and fields, see <a href="https://github.com/ampproject/amphtml/blob/main/validator/validator-main.protoascii">amp-form rules</a> in the AMP validator specification.</p> <h3 id="success-and-error-response-rendering">Success and error response rendering</h3> <p>You can render success or error responses in your form by using <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../amp-mustache/amp-mustache.md">amp-mustache</a>, or success responses through data binding with <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../amp-bind/amp-bind.md">amp-bind</a> and the following response attributes:</p> <p> </p> <table> <thead> <tr> <th>Response attribute</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>submit-success</code></td> <td>Can be used to display a success message if the response is successful (i.e., has a status of <code>2XX</code>).</td> </tr> <tr> <td><code>submit-error</code></td> <td>Can be used to display a submission error if the response is unsuccessful (i.e., does not have a status of <code>2XX</code>).</td> </tr> <tr> <td><code>submitting</code></td> <td>Can be used to display a message when the form is submitting. The template for this attribute has access to the form's input fields for any display purposes. Please see the <a href="#example-submitting">full form example below</a> for how to use the <code>submitting</code> attribute.</td> </tr> </tbody> </table> <p> </p> <p> </p> <h4 id="to-render-responses-with-templating:">To render responses with templating:</h4> <ul> <li>Apply a response attribute to any descendant of the <code><form></code> element.</li> <li>Render the response in the child element by including a template via <code><template></template></code> or <code><script type="text/plain"></script></code> tag inside it or by referencing a template with a <code>template="id_of_other_template"</code> attribute.</li> <li>Provide a valid JSON object for responses to <code>submit-success</code> and <code>submit-error</code>. Both success and error responses should have a <code>Content-Type: application/json</code> header.</li> </ul> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> When using <code><amp-form></code> in tandem with another templating AMP component, such as <code><amp-list></code>, note that templates may not nest in valid AMP documents. In this case a valid workaround is to provide the template by <code>id</code> via the <code>template</code> attribute. Learn more about <a href="https://amp.dev/documentation/components/amp-mustache/#nested-templates">nested templates in <code><amp-mustache></code></a>. </div> </div><p></p> <p><a id="example-submitting"></a></p> <p>In the following example, the responses are rendered in an inline template inside the form.</p> <p> </p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="err">...</span><span class="p">></span> <span class="p"><</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"firstName"</span> <span class="p">/></span> ... <span class="p"></</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submitting</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> Form submitting... Thank you for waiting {{name}}. <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-success</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}} to confirm! After that we'll start sending you weekly articles on {{#interests}}<span class="p"><</span><span class="nt">b</span><span class="p">></span>{{name}}<span class="p"></</span><span class="nt">b</span><span class="p">></span> {{/interests}}. <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-error</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> Oops! {{name}}, {{message}}. <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> <p> </p> <p> </p> <p>The publisher's <code>action-xhr</code> endpoint returns the following JSON responses:</p> <p>On success:</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Jane Miller"</span><span class="p">,</span> <span class="nt">"interests"</span><span class="p">:</span> <span class="p">[</span> <span class="p">{</span><span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Basketball"</span><span class="p">},</span> <span class="p">{</span><span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Swimming"</span><span class="p">},</span> <span class="p">{</span><span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Reading"</span><span class="p">}</span> <span class="p">],</span> <span class="nt">"email"</span><span class="p">:</span> <span class="s2">"email@example.com"</span> <span class="p">}</span> </pre></div> <p>On error:</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Jane Miller"</span><span class="p">,</span> <span class="nt">"message"</span><span class="p">:</span> <span class="s2">"The email (email@example.com) you used is already subscribed."</span> <span class="p">}</span> </pre></div> <p>You can render the responses in a referenced template defined earlier in the document by using the template's id as the value of the <code>template</code> attribute, set on the elements with the <code>submit-success</code> and <code>submit-error</code> attributes.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span> <span class="na">id</span><span class="o">=</span><span class="s">"submit_success_template"</span><span class="p">></span> Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}} to confirm! After that we'll start sending you weekly articles on {{#interests}}<span class="p"><</span><span class="nt">b</span><span class="p">></span>{{name}}<span class="p"></</span><span class="nt">b</span><span class="p">></span> {{/interests}}. <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span> <span class="na">id</span><span class="o">=</span><span class="s">"submit_error_template"</span><span class="p">></span> Oops! {{name}}, {{message}}. <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="err">...</span><span class="p">></span> <span class="p"><</span><span class="nt">fieldset</span><span class="p">></span> ... <span class="p"></</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-success</span> <span class="na">template</span><span class="o">=</span><span class="s">"submit_success_template"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-error</span> <span class="na">template</span><span class="o">=</span><span class="s">"submit_error_template"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> <p>See the <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../../examples/forms.amp.html">full example here</a>.</p> <h3 id="to-render-a-successful-response-with-data-binding">To render a successful response with data binding</h3> <ul> <li>Use the <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events">on attribute</a> to bind the form <em>submit-success</em> attribute to <a href="https://amp.dev/documentation/components/amp-bind#updating-state-with-amp.setstate()"><code>AMP.setState()</code></a>.</li> <li>Use the <code>event</code> property to capture the response data.</li> <li>Add the state attribute to the desired element to bind the form response.</li> </ul> <p>The following example demonstrates a form <code>submit-success</code> response with <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../amp-bind/amp-bind.md"><code>amp-bind</code></a>:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">p</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"'Thanks, ' + subscribe +'! You have successfully subscribed.'"</span><span class="p">></span> Subscribe to our newsletter <span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"/components/amp-form/submit-form-input-text-xhr"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span> <span class="na">on</span><span class="o">=</span><span class="s">"submit-success: AMP.setState({'subscribe': event.response.name})"</span> <span class="p">></span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"name"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Name..."</span> <span class="na">required</span> <span class="p">/></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"email"</span> <span class="na">name</span><span class="o">=</span><span class="s">"email"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Email..."</span> <span class="na">required</span> <span class="p">/></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Subscribe"</span> <span class="p">/></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> <p>When the form is submitted successfully it will return a JSON response similar to the following:</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Jane Miller"</span><span class="p">,</span> <span class="nt">"email"</span><span class="p">:</span> <span class="s2">"email@example.com"</span> <span class="p">}</span> </pre></div> <p>Then <code>amp-bind</code> updates the <code><p></code> element's text to match the <code>subscibe</code> state:</p> <div class="-ta"><pre><span></span>... <span class="p"><</span><span class="nt">p</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"'Thanks, ' + subscribe +'! You have successfully subscribed.'"</span><span class="p">></span> Thanks Jane Miller! You have successfully subscribed. <span class="p"></</span><span class="nt">p</span><span class="p">></span> ... </pre></div> <p> </p> <h4 id="redirecting-after-a-submission">Redirecting after a submission</h4> <p>You can redirect users to a new page after a successful form submission by setting the <code>AMP-Redirect-To</code> response header and specifying a redirect URL. The redirect URL must be a HTTPS URL, otherwise AMP will throw an error and redirection won't occur. HTTP response headers are configured via your server.</p> <p>Make sure to update your <code>Access-Control-Expose-Headers</code> response header to include <code>AMP-Redirect-To</code> to the list of allowed headers. Learn more about these headers in <a href="https://www.ampproject.org/docs/fundamentals/amp-cors-requests#cors-security-in-amp">CORS Security in AMP</a>.</p> <p><em>Example response headers:</em></p> <div class="-ta"><pre><span></span>AMP-Redirect-To: https://example.com/forms/thank-you Access-Control-Expose-Headers: AMP-Redirect-To </pre></div> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> Check out AMP By Example's <a href="https://amp.dev/documentation/examples/components/amp-form/#form-submission-with-page-update">Form Submission with Update</a> and <a href="https://amp.dev/documentation/examples/e-commerce/product_page/#product-page">Product Page</a> that demonstrate using redirection after a form submission. </div> </div><p></p> <h3 id="custom-validations">Custom validations</h3> <p>The <code>amp-form</code> extension allows you to build your own custom validation UI by using the <code>custom-validation-reporting</code> attribute along with one the following reporting strategies: <code>show-first-on-submit</code>, <code>show-all-on-submit</code> or <code>as-you-go</code>.</p> <p>To specify custom validation on your form:</p> <ol> <li>Set the <code>custom-validation-reporting</code> attribute on your <code>form</code> to one of the <a href="#reporting-strategies">validation reporting strategies</a>.</li> <li>Provide your own validation UI marked up with special attributes. AMP will discover the special attributes and report them at the right time depending on the reporting strategy you specified.</li> </ol> <p>Here's an example:</p><div class="ap-code-preview inline"> <div class="ap-code-preview-preview"> <form method="post" action-xhr="https://example.com/subscribe" custom-validation-reporting="show-all-on-submit" target="_blank"> <fieldset> <label> <span>Name:</span> <input type="text" name="name" id="name5" required pattern="\w+\s\w+"> <span visible-when-invalid="valueMissing" validation-for="name5"></span> <span visible-when-invalid="patternMismatch" validation-for="name5"> Please enter your first and last name separated by a space (e.g. Jane Miller) </span> </label> <br> <label> <span>Email:</span> <input type="email" name="email" id="email5" required> <span visible-when-invalid="valueMissing" validation-for="email5"></span> <span visible-when-invalid="typeMismatch" validation-for="email5"></span> </label> <br> <input type="submit" value="Subscribe"> </fieldset> </form> </div> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"https://example.com/subscribe"</span> <span class="na">custom-validation-reporting</span><span class="o">=</span><span class="s">"show-all-on-submit"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_blank"</span><span class="p">></span> <span class="p"><</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Name:<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"name"</span> <span class="na">id</span><span class="o">=</span><span class="s">"name5"</span> <span class="na">required</span> <span class="na">pattern</span><span class="o">=</span><span class="s">"\w+\s\w+"</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">visible-when-invalid</span><span class="o">=</span><span class="s">"valueMissing"</span> <span class="na">validation-for</span><span class="o">=</span><span class="s">"name5"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">visible-when-invalid</span><span class="o">=</span><span class="s">"patternMismatch"</span> <span class="na">validation-for</span><span class="o">=</span><span class="s">"name5"</span><span class="p">></span> Please enter your first and last name separated by a space (e.g. Jane Miller) <span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">br</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Email:<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"email"</span> <span class="na">name</span><span class="o">=</span><span class="s">"email"</span> <span class="na">id</span><span class="o">=</span><span class="s">"email5"</span> <span class="na">required</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">visible-when-invalid</span><span class="o">=</span><span class="s">"valueMissing"</span> <span class="na">validation-for</span><span class="o">=</span><span class="s">"email5"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">visible-when-invalid</span><span class="o">=</span><span class="s">"typeMismatch"</span> <span class="na">validation-for</span><span class="o">=</span><span class="s">"email5"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">br</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Subscribe"</span><span class="p">></span> <span class="p"></</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/documentation/components/amp-form.example.2.html%3Fformat%3Dwebsites" class="-n ap--playground-link"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Open this snippet in playground</span> </a> <p>For validation messages, if your element contains no text content inside, AMP will fill it out with the browser's default validation message. In the example above, when the <code>name5</code> input is empty and validation is kicked off (i.e., user tried to submit the form) AMP will fill <code><span visible-when-invalid="valueMissing" validation-for="name5"></span></code> with the browser's validation message and show that <code>span</code> to the user.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-sign"/></svg> </div> <div class="ap-m-tip-content"> You must provide your own validation UI for each kind of invalid state that the input could have. If these are not present, users will not see any <code>custom-validation-reporting</code> for the missing error state. The validity states can be found in the <a href="https://www.w3.org/TR/html50/forms.html#validitystate">official W3C HTML validation reporting documentation</a>. </div> </div><p></p> <h4 id="reporting-strategies">Reporting strategies</h4> <p>Specify one of the following reporting options for the <code>custom-validation-reporting</code> attribute:</p> <h5 id="show-first-on-submit">Show First on Submit</h5> <p>The <code>show-first-on-submit</code> reporting option mimics the browser's default behavior when default validation kicks in. It shows the first validation error it finds and stops there.</p> <h5 id="show-all-on-submit">Show All on Submit</h5> <p>The <code>show-all-on-submit</code> reporting option shows all validation errors on all invalid inputs when the form is submitted. This is useful if you'd like to show a summary of validations.</p> <h5 id="as-you-go">As You Go</h5> <p>The <code>as-you-go</code> reporting option allows your user to see validation messages as they're interacting with the input. For example, if the user types an invalid email address, the user will see the error right away. Once they correct the value, the error goes away.</p> <h5 id="interact-and-submit">Interact and Submit</h5> <p>The <code>interact-and-submit</code> reporting option combines the behavior of <code>show-all-on-submit</code> and <code>as-you-go</code>. Individual fields will show any errors immediately after interactions, and on submit the form will show errors on all invalid fields.</p> <h3 id="verification">Verification</h3> <p>HTML5 validation gives feedback based only on information available on the page, such as if a value matches a certain pattern. With <code>amp-form</code> verification you can give the user feedback that HTML5 validation alone cannot. For example, a form can use verification to check if an email address has already been registered. Another use-case is verifying that a city field and a zip code field match each other.</p> <p>Here's an example:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">h4</span><span class="p">></span>Verification example<span class="p"></</span><span class="nt">h4</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"/form/verify-json/post"</span> <span class="na">verify-xhr</span><span class="o">=</span><span class="s">"/form/verify-json/post"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_blank"</span><span class="p">></span> <span class="p"><</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Email<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"email"</span> <span class="na">required</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Zip Code<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"tel"</span> <span class="na">name</span><span class="o">=</span><span class="s">"zip"</span> <span class="na">required</span> <span class="na">pattern</span><span class="o">=</span><span class="s">"[0-9]{5}(-[0-9]{4})?"</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>City<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"city"</span> <span class="na">required</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Document<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"file"</span> <span class="na">name</span><span class="o">=</span><span class="s">"document"</span> <span class="na">no-verify</span><span class="p">></span> <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"spinner"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Submit"</span><span class="p">></span> <span class="p"></</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-success</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Congratulations! You are registered with {{email}}<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-error</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> {{#verifyErrors}} <span class="p"><</span><span class="nt">p</span><span class="p">></span>{{message}}<span class="p"></</span><span class="nt">p</span><span class="p">></span> {{/verifyErrors}}{{^verifyErrors}} <span class="p"><</span><span class="nt">p</span><span class="p">></span>Something went wrong. Try again later?<span class="p"></</span><span class="nt">p</span><span class="p">></span> {{/verifyErrors}} <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> <p>The form sends a <code>__amp_form_verify</code> field as part of the form data as a hint to the server that the request is a verify request and not a formal submit. This is helpful so the server knows not to store the verify request if the same endpoint is used for verification and for submit.</p> <p>Here is how an error response should look for verification:</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"verifyErrors"</span><span class="p">:</span> <span class="p">[</span> <span class="p">{</span><span class="nt">"name"</span><span class="p">:</span> <span class="s2">"email"</span><span class="p">,</span> <span class="nt">"message"</span><span class="p">:</span> <span class="s2">"That email is already taken."</span><span class="p">},</span> <span class="p">{</span><span class="nt">"name"</span><span class="p">:</span> <span class="s2">"zip"</span><span class="p">,</span> <span class="nt">"message"</span><span class="p">:</span> <span class="s2">"The city and zip do not match."</span><span class="p">}</span> <span class="p">]</span> <span class="p">}</span> </pre></div> <p>To remove a field from the <code>verify-xhr</code> request, add the <code>no-verify</code> attribute to the input element.</p> <p>For more examples, see <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../../examples/forms.amp.html">examples/forms.amp.html</a>.</p> <h3 id="variable-substitutions">Variable substitutions</h3> <p>The <code>amp-form</code> extension allows <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../../docs/spec/amp-var-substitutions.md">platform variable substitutions</a> for inputs that are hidden and that have the <code>data-amp-replace</code> attribute. On each form submission, <code>amp-form</code> finds all <code>input[type=hidden][data-amp-replace]</code> inside the form and applies variable substitutions to its <code>value</code> attribute and replaces it with the result of the substitution.</p> <p>You must provide the variables you are using for each substitution on each input by specifying a space-separated string of the variables used in <code>data-amp-replace</code> (see example below). AMP will not replace variables that are not explicitly specified.</p> <p>Here's an example of how inputs are before and after substitutions (note that you need to use platform syntax of variable substitutions and not analytics ones):</p> <div class="-ta"><pre><span></span><span class="c"><!-- Initial Load --></span> <span class="p"><</span><span class="nt">form</span> <span class="err">...</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"canonicalUrl"</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">value</span><span class="o">=</span><span class="s">"The canonical URL is: CANONICAL_URL - RANDOM - CANONICAL_HOSTNAME"</span> <span class="na">data-amp-replace</span><span class="o">=</span><span class="s">"CANONICAL_URL RANDOM"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"clientId"</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">value</span><span class="o">=</span><span class="s">"CLIENT_ID(myid)"</span> <span class="na">data-amp-replace</span><span class="o">=</span><span class="s">"CLIENT_ID"</span> <span class="p">/></span> ... <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> <p>Once the user tries to submit the form, AMP will try to resolve the variables and update the fields' <code>value</code> attribute of all fields with the appropriate substitutions. For XHR submissions, all variables are likely to be substituted and resolved. However, in non-XHR GET submissions, values that requires async-resolution might not be available due to having not been resolved previously. <code>CLIENT_ID</code> for example would not resolve if it wasn't resolved and cached previously.</p> <div class="-ta"><pre><span></span><span class="c"><!-- User submits the form, variables values are resolved into fields' value --></span> <span class="p"><</span><span class="nt">form</span> <span class="err">...</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"canonicalUrl"</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">value</span><span class="o">=</span><span class="s">"The canonical URL is: https://example.com/hello - 0.242513759125 - CANONICAL_HOSTNAME"</span> <span class="na">data-amp-replace</span><span class="o">=</span><span class="s">"CANONICAL_URL RANDOM"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"clientId"</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">value</span><span class="o">=</span><span class="s">"amp:asqar893yfaiufhbas9g879ab9cha0cja0sga87scgas9ocnas0ch"</span> <span class="na">data-amp-replace</span><span class="o">=</span><span class="s">"CLIENT_ID"</span> <span class="p">/></span> ... <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> <p>Note how <code>CANONICAL_HOSTNAME</code> above did not get replaced because it was not in the allowlist through <code>data-amp-replace</code> attribute on the first field.</p> <p>Substitutions will happen on every subsequent submission. Read more about <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../../docs/spec/amp-var-substitutions.md">variable substitutions in AMP</a>.</p> <p> </p> <h3 id="autoexpand">Autoexpand</h3> <p>AMP Form provides an <code>autoexpand</code> attribute to <code><textarea></code> elements. This allows the textarea to expand and shrink to accomodate the user's rows of input, up to the field's maximum size. If the user manually resizes the field, the autoexpand behavior will be removed.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">textarea</span> <span class="na">autoexpand</span><span class="p">></</span><span class="nt">textarea</span><span class="p">></span> </pre></div> <h3 id="polyfills">Polyfills</h3> <p>The <code>amp-form</code> extension provide polyfills for behaviors and functionality missing from some browsers or being implemented in the next version of CSS.</p> <h4 id="invalid-submit-blocking-and-validation-message-bubble">Invalid submit blocking and validation message bubble</h4> <p>Browsers that use webkit-based engines currently (as of August 2016) do not support invalid form submissions. These include Safari on all platforms, and all iOS browsers. The <code>amp-form</code> extension polyfills this behavior to block any invalid submissions and shows validation message bubbles on invalid inputs.</p> <h4 id="user-interaction-pseudo-classes">User-interaction pseudo-classes</h4> <p>The <code>:user-invalid</code> and <code>:user-valid</code> pseudo classes are part of the <a href="https://drafts.csswg.org/selectors-4/#user-pseudos">future CSS Selectors 4 spec</a> and are introduced to allow better hooks for styling invalid/valid fields based on a few criteria.</p> <p>One of the main differences between <code>:invalid</code> and <code>:user-invalid</code> is when are they applied to the element. The <code>:user-invalid</code> class is applied after a significant interaction from the user with the field (e.g., the user types in a field, or blurs from the field).</p> <p>The <code>amp-form</code> extension provides <a href="#classes-and-css-hooks">classes</a> to polyfill these pseudo-classes. The <code>amp-form</code> extension also propagates these to the ancestor <code>form</code>. However, <code>fieldset</code> elements are only ever set to have class 'user-valid' to be consistent with browser behaviour.</p> <h4 id="<textarea>-validation"><code><textarea></code> validation</h4> <p>Regular expression matching is a common validation feature supported natively on most input elements, except for <code><textarea></code>. We polyfill this functionality and support the <code>pattern</code> attribute on <code><textarea></code> elements.</p> <h3 id="security-considerations">Security considerations</h3> <h4 id="protecting-against-xsrf">Protecting against XSRF</h4> <p>In addition to following the details in the <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests">AMP CORS spec</a>, please pay extra attention to the section on <a href="https://www.ampproject.org/docs/fundamentals/amp-cors-requests.html#processing-state-changing-requests">"Processing state changing requests" </a> to protect against <a href="https://en.wikipedia.org/wiki/Cross-site_request_forgery">XSRF attacks</a> where an attacker can execute unauthorized commands using the current user session without the user knowledge.</p> <p>In general, keep in mind the following points when accepting input from the user:</p> <ul> <li>Only use POST for state changing requests.</li> <li>Use non-XHR GET for navigational purposes only (e.g. search).<ul> <li>Non-XHR GET requests are will not receive accurate origin/headers and backends won't be able to protect against XSRF with the above mechanism.</li> <li>In general, use XHR/non-XHR GET requests for navigational or information retrieval only.</li> </ul> </li> <li>Non-XHR POST requests are not allowed in AMP documents. This is due to inconsistencies of setting <code>Origin</code> header on these requests across browsers, and the complications supporting it would introduce in protecting against XSRF. This might be reconsidered and introduced later — please file an issue if you think this is needed.</li> </ul> <h2 id="attributes">Attributes</h2> <p> </p> <h3 id="target"><code>target</code></h3> <p>Indicates where to display the form response after submitting the form. The value must be <code>_blank</code> or <code>_top</code>.</p> <h3 id="action"><code>action</code></h3> <p>Specifies a server endpoint to handle the form input. The value must be an <code>https</code> URL (absolute or relative) and must not be a link to a CDN.</p> <ul> <li>For <code>method=GET</code>: use this attribute or <a href="#action-xhr"><code>action-xhr</code></a>.</li> <li>For <code>method=POST</code>: use the <a href="#action-xhr"><code>action-xhr</code></a> attribute.</li> </ul> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> The <code>target</code> and <code>action</code> attributes are only used for non-xhr GET requests. The AMP runtime will use <code>action-xhr</code> to make the request and will ignore <code>action</code> and <code>target</code>. When <code>action-xhr</code> is not provided, AMP makes a GET request to the <code>action</code> endpoint and uses <code>target</code> to open a new window (if <code>_blank</code>). The AMP runtime might also fall back to using <code>action</code> and <code>target</code> in cases where the <code>amp-form</code> extension fails to load. </div> </div><p></p> <p> </p> <h3 id="action-xhr"><code>action-xhr</code></h3> <p>Specifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR). An XHR request (sometimes called an AJAX request) is where the browser would make the request without a full load of the page or opening a new page. Browsers will send the request in the background using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> when available and fall back to <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest API</a> for older browsers.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-sign"/></svg> </div> <div class="ap-m-tip-content"> Your XHR endpoint must implement the requirements for <a href="https://www.ampproject.org/docs/fundamentals/amp-cors-requests#cors-security-in-amp">CORS security</a>. </div> </div><p></p> <p>This attribute is required for <code>method=POST</code>, and is optional for <code>method=GET</code>.</p> <p>The value for <code>action-xhr</code> can be the same or a different endpoint than <code>action</code> and has the same <code>action</code> requirements above.</p> <p> </p> <p>To learn about redirecting the user after successfully submitting the form, see the <a href="#redirecting-after-a-submission">Redirecting after a submission</a> section below.</p> <h3 id="enctype"><code>enctype</code></h3> <p>The enctype attribute specifies how form-data should be encoded before sending it to the server via the <code>method=POST</code> submission. The default encoding is set to <code>multipart/form-data</code>. This and <code>application/x-www-form-urlencoded</code> encoding types are currently supported.</p> <p>Summary of enctype values:</p> <ul> <li><code>application/x-www-form-urlencoded</code> - Sets the encoding type to <code>application/x-www-form-urlencoded</code>.</li> <li><code>multipart/form-data</code> - Sets the encoding type to <code>multipart/form-data</code>.</li> <li><code>any value</code> or unspecified - Setting the <code>enctype</code> attribute to a value not specified above or not setting the attribute at all will result in the default encoding type of <code>multipart/form-data</code>.</li> </ul> <h3 id="data-initialize-from-url"><code>data-initialize-from-url</code></h3> <p>Initializes form fields from the window URL's search string, where the query parameter name matches the field's name. When this attribute is present, <code><input></code>, <code><select></code>, and <code><textarea></code> fields can optionally be initialized.</p> <p>Individual fields are opted-in if they contain attribute <code>data-allow-initialization</code>. On page load, if the URL contains a query parameter with name matching an opted-in field's <code>name</code> attribute, the value or checked-state of that field will be updated based on the value of that query parameter. For example, <code><input type="search" name="q" data-allow-initialization></code> would display "my search" if the AMP page is visited with URL <code>https://example.com/search?q=my+search</code>.</p> <p>Sample:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="na">data-initialize-from-url</span> <span class="na">method</span><span class="o">=</span><span class="s">"get"</span> <span class="na">action</span><span class="o">=</span><span class="s">"https://example.com/search"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span>Search: <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"search"</span> <span class="na">name</span><span class="o">=</span><span class="s">"q"</span> <span class="na">data-allow-initialization</span><span class="p">></</span><span class="nt">label</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="c"><!-- display search results using amp-list --></span> </pre></div> <p>Limitations:</p> <ul> <li>Supported <code><input></code> types include <code>checkbox</code>, <code>color</code>, <code>date</code>, <code>datetime-local</code>, <code>email</code>, <code>hidden</code>, <code>month</code>, <code>number</code>, <code>radio</code>, <code>range</code>, <code>search</code>, <code>tel</code>, <code>text</code>, <code>time</code>, <code>url</code>, and <code>week</code>.</li> <li>Fields that take advantage of <a href="#variable-substitutions">variable substitutions</a> (fields with attribute <code>data-amp-replace</code>) are not supported.</li> <li>This feature is not supported on AMP pages delivered by an <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/">AMP cache</a>. The <code>data-initialize-from-url</code> and <code>data-allow-initialization</code> attributes will not cause AMP validation failures, but the form fields will not be initialized from the URL.</li> </ul> <h3 id="xssi-prefix"><code>xssi-prefix</code></h3> <p>Specifies that a prefix should be stripped prior to parsing the fetched json from the <code>action-xhr</code> endpoint. If the prefix is not present in the response, then this attribute will have no effect. This can be useful for APIs that include <a href="http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/">security prefixes</a> like <code>)]}</code> to help prevent cross site scripting attacks.</p> <p> </p> <h3 id="other-form-attributes">Other form attributes</h3> <p>All other <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form attributes</a> are optional.</p> <p> </p> <h3 id="custom-validation-reporting"><code>custom-validation-reporting</code></h3> <p>This is an optional attribute that enables and selects a custom validation reporting strategy. Valid values are one of: <code>show-first-on-submit</code>, <code>show-all-on-submit</code> or <code>as-you-go</code>.</p> <p>See the <a href="#custom-validations">Custom Validation</a> section for more details.</p> <p> </p> <p> </p> <h2 id="actions">Actions</h2> <p>The <code>amp-form</code> element exposes the following actions.</p> <h3 id="submit"><code>submit</code></h3> <p>Allows you to trigger the form submission on a specific action, for example, tapping a link, or <a href="#input-events">submitting a form on input change</a>.</p> <h3 id="clear"><code>clear</code></h3> <p>Empties the values from each input in the form. This can allow users to quickly fill out forms a second time.</p> <h2 id="events">Events</h2> <p>Use <code>amp-form</code> events with the <a href='https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#on'><code>on</code> attribute</a></p> <p>The following example listens to both the <code>submit-success</code> and <code>submit-error</code> events and shows different lightboxes depending on the event:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="err">...</span> <span class="na">on</span><span class="o">=</span><span class="s">"submit-success:success-lightbox;submit-error:error-lightbox"</span> <span class="err">...</span> <span class="p">></</span><span class="nt">form</span><span class="p">></span> </pre></div> <h3 id="submit_1"><code>submit</code></h3> <p>The form is submitted and before the submission is complete.</p> <h3 id="submit-success"><code>submit-success</code></h3> <p>The form submission is done and the response is a success.</p> <h3 id="submit-error"><code>submit-error</code></h3> <p>The form submission is done and the response is an error.</p> <p> </p> <h3 id="verify"><code>verify</code></h3> <p>Asynchronous verification is initiated.</p> <h3 id="verify-error"><code>verify-error</code></h3> <p>Asynchronous verification is done and the response is an error.</p> <h3 id="valid"><code>valid</code></h3> <p>The form's validation state changes to "valid" (in accordance with its <a href="#reporting-strategies">reporting strategy</a>).</p> <h3 id="invalid"><code>invalid</code></h3> <p>The form's validation state to "invalid" (in accordance with its <a href="#reporting-strategies">reporting strategy</a>).</p> <p> </p> <h3 id="input-events">Input events</h3> <p>AMP exposes <code>change</code> and <code>input-debounced</code> events on child <code><input></code> elements. This allows you to use the <a href="https://www.ampproject.org/docs/fundamentals/spec#on"><code>on</code> attribute</a> to execute an action on any element when an input value changes.</p> <p>For example, a common use case is to submit a form on input change (selecting a radio button to answer a poll, choosing a language from a <code>select</code> input to translate a page, etc.).</p><div class="ap-code-preview inline"> <div class="ap-code-preview-preview"> <form id="myform" method="post" action-xhr="https://example.com/myform" target="_blank"> <fieldset> <label> <input name="answer1" value="Value 1" type="radio" on="change:myform.submit">Value 1 </label> <label> <input name="answer1" value="Value 2" type="radio" on="change:myform.submit">Value 2 </label> </fieldset> </form> </div> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="na">id</span><span class="o">=</span><span class="s">"myform"</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"https://example.com/myform"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_blank"</span><span class="p">></span> <span class="p"><</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"answer1"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Value 1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:myform.submit"</span><span class="p">></span>Value 1 <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"answer1"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Value 2"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:myform.submit"</span><span class="p">></span>Value 2 <span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"></</span><span class="nt">fieldset</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/documentation/components/amp-form.example.3.html%3Fformat%3Dwebsites" class="-n ap--playground-link"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Open this snippet in playground</span> </a> <p>See the <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../../examples/forms.amp.html">full example here</a>.</p> <p> </p> <h2 id="analytics">Analytics</h2> <p>The <code>amp-form</code> extension triggers the following events that you can track in your <a href="https://amp.dev/documentation/components/amp-analytics">amp-analytics</a> config:</p> <table> <thead> <tr> <th>Event</th> <th>Fired when</th> </tr> </thead> <tbody> <tr> <td><code>amp-form-submit</code></td> <td>A form request is initiated.</td> </tr> <tr> <td><code>amp-form-submit-success</code></td> <td>A successful response is received (i.e, when the response has a status of <code>2XX</code>).</td> </tr> <tr> <td><code>amp-form-submit-error</code></td> <td>An unsuccessful response is received (i.e, when the response doesn't have a status of <code>2XX</code>).</td> </tr> </tbody> </table> <p>You can configure your analytics to send these events as in the following example:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"requests"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"event"</span><span class="o">:</span> <span class="s2">"https://www.example.com/analytics/event?eid=${eventId}"</span><span class="p">,</span> <span class="s2">"searchEvent"</span><span class="o">:</span> <span class="s2">"https://www.example.com/analytics/search?formId=${formId}&query=${formFields[query]}"</span> <span class="p">},</span> <span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"formSubmit"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"amp-form-submit"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"searchEvent"</span> <span class="p">},</span> <span class="s2">"formSubmitSuccess"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"amp-form-submit-success"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"event"</span><span class="p">,</span> <span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"eventId"</span><span class="o">:</span> <span class="s2">"form-submit-success"</span> <span class="p">}</span> <span class="p">},</span> <span class="s2">"formSubmitError"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"amp-form-submit-error"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"event"</span><span class="p">,</span> <span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"eventId"</span><span class="o">:</span> <span class="s2">"form-submit-error"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <p>All three events generate a set of variables that correspond to the specific form and the fields in the form. These variables can be used for analytics.</p> <p>For example, the following form has one field:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">form</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"/comment"</span> <span class="na">method</span><span class="o">=</span><span class="s">"POST"</span> <span class="na">id</span><span class="o">=</span><span class="s">"submit_form"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"comment"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Comment"</span> <span class="p">/></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </pre></div> <p>When the <code>amp-form-submit</code>, <code>amp-form-submit-success</code>, or <code>amp-form-submit-error</code> event fires, it generates the following variables containing the values that were specified in the form:</p> <ul> <li><code>formId</code></li> <li><code>formFields[comment]</code></li> </ul> <p> </p> <h2 id="styling">Styling</h2> <h3 id="classes-and-css-hooks">Classes and CSS hooks</h3> <p>The <code>amp-form</code> extension provides classes and CSS hooks for publishers to style their forms and inputs.</p> <p>The following classes can be used to indicate the state of the form submission:</p> <ul> <li><code>.amp-form-initial</code></li> <li><code>.amp-form-verify</code></li> <li><code>.amp-form-verify-error</code></li> <li><code>.amp-form-submitting</code></li> <li><code>.amp-form-submit-success</code></li> <li><code>.amp-form-submit-error</code></li> </ul> <p>The following classes are a <a href="#user-interaction-pseudo-classes">polyfill for the user interaction pseudo classes</a>:</p> <ul> <li><code>.user-valid</code></li> <li><code>.user-invalid</code></li> </ul> <p>Publishers can use these classes to style their inputs and fieldsets to be responsive to user actions (e.g., highlighting an invalid input with a red border after user blurs from it).</p> <p>See the <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/../../examples/forms.amp.html">full example here</a> on using these.</p> <h2 id="validation">Validation</h2> <p>See <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/validator-amp-form.protoascii">amp-form rules</a> in the AMP validator specification.</p> </section> <section class="ap--help"> <div class="-ff"> <span class="-fl">Need more help?</span> <p class="-fh">You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.</p> <a href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" class="-n"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Go to Stack Overflow</span> </a> <div class="-fp"></div> <span class="-fl">Found a bug or missing a feature?</span> <p class="-fh">The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.</p> <a href="https://github.com/ampproject/amphtml" rel="noopener" class="-n link-preview-1"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Go to GitHub</span> </a> <div class="-fp"></div> </div> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/documentation/components/stories/amp-form/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/documentation/components/ads/amp-form/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/documentation/components/email/amp-form/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-component"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">3</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-3q-player/">amp-3q-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">A</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-fewcents/">amp-access-fewcents</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-poool/">amp-access-poool</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-scroll/">amp-access-scroll</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access/">amp-access</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-action-macro/">amp-action-macro</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ad-exit/">amp-ad-exit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-animation/">amp-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-apester-media/">amp-apester-media</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-auto-ads/">amp-auto-ads</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-autocomplete/">amp-autocomplete</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">B</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-base-carousel/">amp-base-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-beopinion/">amp-beopinion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-byside-content/">amp-byside-content</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">C</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-connatix-player/">amp-connatix-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-consent/">amp-consent</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">D</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-delight-player/">amp-delight-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">E</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-embedly-card/">amp-embedly-card</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-experiment/">amp-experiment</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">F</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-font/">amp-font</a> </li> <li class="nav-item level-2 active" autoscroll> <a class="nav-link" href="/documentation/components/websites/amp-form/">amp-form</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">G</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-google-document-embed/">amp-google-document-embed</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-google-read-aloud-player/">amp-google-read-aloud-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">H</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-hulu/">amp-hulu</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">I</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-iframely/">amp-iframely</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-img/">amp-img</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-imgur/">amp-imgur</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-inline-gallery/">amp-inline-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-izlesene/">amp-izlesene</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">J</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-jwplayer/">amp-jwplayer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">K</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-kaltura-player/">amp-kaltura-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">L</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-layout/">amp-layout</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-link-rewriter/">amp-link-rewriter</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-list/">amp-list</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-live-list/">amp-live-list</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">M</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mathml/">amp-mathml</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mega-menu/">amp-mega-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-megaphone/">amp-megaphone</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-minute-media-player/">amp-minute-media-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mowplayer/">amp-mowplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mustache/">amp-mustache</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">N</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-nested-menu/">amp-nested-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-nexxtv-player/">amp-nexxtv-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">O</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-onetap-google/">amp-onetap-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ooyala-player/">amp-ooyala-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-orientation-observer/">amp-orientation-observer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">P</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-pan-zoom/">amp-pan-zoom</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-playbuzz/">amp-playbuzz</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-position-observer/">amp-position-observer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-powr-player/">amp-powr-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">R</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-render/">amp-render</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-riddle-quiz/">amp-riddle-quiz</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">S</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-script/">amp-script</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-skimlinks/">amp-skimlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-slikeplayer/">amp-slikeplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-smartlinks/">amp-smartlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-stream-gallery/">amp-stream-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-subscriptions-google/">amp-subscriptions-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-subscriptions/">amp-subscriptions</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">T</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-tiktok/">amp-tiktok</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-truncate-text/">amp-truncate-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-twitter/">amp-twitter</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">U</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-user-notification/">amp-user-notification</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">V</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-video-docking/">amp-video-docking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-video/">amp-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-viqeo-player/">amp-viqeo-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-vk/">amp-vk</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">W</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-wistia-player/">amp-wistia-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-wordpress-embed/">amp-wordpress-embed</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">Y</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-yotpo/">amp-yotpo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-youtube/">amp-youtube</a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Of course, this site is made with AMP!</div> <div class="-l"> <h5 class="-c">Follow us</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Overview</h5> <ul class="-y"> <li class="-b"><a href="/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Framework</a></li> <li class="-b"><a href="/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Use Cases</a></li> <li class="-b"><a href="/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Success stories</a></li> <li class="-b"><a href="/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Functionality</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Docs</h5> <ul class="-y"> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Get Started</a></li> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Guides and Tutorials</a></li> <li class="-b"><a href="/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Components</a></li> <li class="-b"><a href="/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Examples</a></li> <li class="-b"><a href="/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Design Templates</a></li> <li class="-b"><a href="/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Tools</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Community</h5> <ul class="-y"> <li class="-b"><a href="/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Platform and Vendor Partners</a></li> <li class="-b"><a href="/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Contribute</a></li> <li class="-b"><a href="/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Roadmap</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Events</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">AMP Brand Materials</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Styleguide</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Logos</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Privacy Policy</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"components","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"components","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"components","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"components","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"components","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"components","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"components","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"components","event_label":"toc","event_name":"toc"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Dismiss consent"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Accept use of cookies">Got it!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}@keyframes collapse{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes expand{0%{transform:scale(0)}to{transform:scale(1)}}</style></body></html>