{"id":4330,"date":"2022-02-28T08:03:52","date_gmt":"2022-02-28T16:03:52","guid":{"rendered":"https:\/\/blog.amp.dev\/?p=4330"},"modified":"2022-02-28T08:03:52","modified_gmt":"2022-02-28T16:03:52","slug":"web-story-forms-unlock-more-ways-to-engage-your-audience","status":"publish","type":"post","link":"https:\/\/blog.amp.dev\/2022\/02\/28\/web-story-forms-unlock-more-ways-to-engage-your-audience\/","title":{"rendered":"Web Story Forms unlock more ways to engage your audience"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">It\u2019s no surprise that Creators want to own the relationship with their fans. Everyone from influencers to your favorite bloggers are creating newsletters to help grow their brands by creating more meaningful connections with their audience. To further empower creators, we have expanded the Web Stories page attachment functionality to <strong>support forms<\/strong>, so readers can submit their information and opt-in to receive future updates from their favorite brand or creator.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This component allows a reader to easily sign up for a newsletter, opt-in to text updates, or submit your info to learn more about a product or service. The experience was designed to be as seamless as possible. While reading a story a user can \u201cswipe up\u201d, or a tap on the call to action button to learn more. When the page attachment opens, a reader can complete the fields, submit their information, and then easily go back to finishing the story or reading a new one.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/amp.dev\/documentation\/components\/amp-form\/\"><strong>amp-form<\/strong> <\/a>extension allows you to create forms (&lt;form>) to submit input fields in a Web Story. The amp-form extension also provides <a href=\"https:\/\/amp.dev\/documentation\/components\/amp-form\/#polyfills\">polyfills<\/a> for some missing behaviors in browsers. For the full implementation guidance, review this <a href=\"https:\/\/github.com\/ampproject\/amphtml\/issues\/35569\">resource<\/a>.\u00a0<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">custom-element<\/span>=<span class=\"hljs-string\">\"amp-form\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.ampproject.org\/v0\/amp-form-0.1.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"new-opportunities-for-new-verticals\"><strong>New opportunities for new verticals<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creators-build-brand-awareness\"><strong>Creators &#8211; Build brand awareness<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Did you just post your Bali travel vlog? Looking to increase engagement on your latest Winter Lookbook?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Consider up-leveling your content strategy by using Web Stories to grow your newsletter.\u00a0<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image2-1024x285.png\" alt=\"\" class=\"wp-image-4332\" srcset=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image2-1024x285.png 1024w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image2-300x83.png 300w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image2-768x213.png 768w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image2-1536x427.png 1536w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image2.png 1828w\" sizes=\"auto, 100vw\" \/><figcaption>Readers can enter their email address directly within a Web Story form<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"publishers-small-businesses-secure-leads\"><strong>Publishers &amp; small businesses &#8211; Secure leads<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Are you hosting an event? Do you want to let your readers know when your newest cupcake recipe is published?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Forms can help you keep track of your growing audience.\u00a0<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image3-1024x283.png\" alt=\"\" class=\"wp-image-4333\" srcset=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image3-1024x283.png 1024w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image3-300x83.png 300w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image3-768x212.png 768w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image3-1536x424.png 1536w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image3.png 1824w\" sizes=\"auto, 100vw\" \/><figcaption>Use Web Story forms to collect reader information and keep them up to date<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"brands-nurture-and-convert-leads\"><strong>Brands<\/strong> &#8211; <strong>Nurture and convert leads<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Is your new product dropping soon?\u00a0 Do you want to stay connected with your top customers?\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of an endless vertical scroll, experiment with Web Stories as landing pages.\u00a0<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"352\" src=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image1-1024x352.png\" alt=\"\" class=\"wp-image-4334\" srcset=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image1-1024x352.png 1024w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image1-300x103.png 300w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image1-768x264.png 768w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image1-1536x528.png 1536w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2022\/02\/image1.png 1822w\" sizes=\"auto, 100vw\" \/><figcaption>Use Web Story landing pages to generate leads<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"summary\">Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Forms for Stories are like forms for your website. Creation tools are working on adding form support. Finally, remember to follow form best practices to ensure you are protecting your readers&#8217; data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"stay-updated\">Stay updated<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Whether you like reading Web Stories, are interested in creating them yourself, or are building creation tools, come share your ideas and suggestions with the Web Stories working group. You can reach out to us on <a href=\"https:\/\/github.com\/ampproject\/amphtml\/issues?q=is%3Aissue+is%3Aopen+label%3A%22WG%3A+stories%22+\"><strong>Github<\/strong><\/a>, <a href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/master\/CONTRIBUTING.md#discussion-channels\"><strong>Slack<\/strong><\/a> and can subscribe to a low traffic <a href=\"https:\/\/groups.google.com\/a\/amp.dev\/g\/web-stories-devpreview\"><strong>developer preview email group<\/strong><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Posted by Ryan Warrender, Web Stories Product Manager, Google<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s no surprise that Creators want to own the relationship with their fans. Everyone from influencers to your favorite bloggers are creating newsletters to help grow their brands by creating more meaningful connections with their audience. To further empower creators, we have expanded the Web Stories page attachment functionality to support forms, so readers can [&hellip;] <a class=\"excerpt-read-more\" href=\"https:\/\/blog.amp.dev\/2022\/02\/28\/web-story-forms-unlock-more-ways-to-engage-your-audience\/\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[32],"tags":[],"class_list":["post-4330","post","type-post","status-publish","format-standard","hentry","category-stories"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paQKQx-17Q","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/comments?post=4330"}],"version-history":[{"count":2,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4330\/revisions"}],"predecessor-version":[{"id":4336,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4330\/revisions\/4336"}],"wp:attachment":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/media?parent=4330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/categories?post=4330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/tags?post=4330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}