{"id":17109,"date":"2020-04-09T09:04:11","date_gmt":"2020-04-09T09:04:11","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=17109"},"modified":"2020-04-09T09:26:02","modified_gmt":"2020-04-09T09:26:02","slug":"how-to-create-klaviyo-form-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-create-klaviyo-form-in-amp\/","title":{"rendered":"How to create Klaviyo form in AMP"},"content":{"rendered":"\n<p>If you want to add a Klaviyo form in AMP then first you need to purchase and install&nbsp;<a href=\"https:\/\/ampforwp.com\/opt-in-forms\/\">Opt-in Forms for AMP<\/a>&nbsp;plugin.<\/p>\n\n\n\n<p>After installing you will find this option in&nbsp;<strong>WordPress Dashboard<\/strong>&nbsp;-&gt;&nbsp;<strong>AMP optin<\/strong>&nbsp;-&gt;&nbsp;<strong>Add New optin<\/strong>&nbsp;-&gt; select \u201c<strong>&nbsp;Klaviyo <\/strong>\u201d option -&gt; Now you need API Key and List ID.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"491\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42-1024x491.png\" alt=\"\" class=\"wp-image-17110\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42-1024x491.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42-768x368.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/42.png 1048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4>How to get API key and List id<\/h4>\n\n\n\n<p>Once you set up and logged in to your&nbsp;Klaviyo account successfully, please follow the steps below to get API Key<\/p>\n\n\n\n<p><strong>Step 1 \u2013&nbsp;<\/strong>After Signup\/login Klaviyo clicks on the&nbsp;List option&nbsp;-&gt;&nbsp; To create a new list click the&nbsp;<strong>Lists &amp; Segments<\/strong>&nbsp;tab and then click the blue&nbsp;<strong>Create List\/Segment<\/strong>&nbsp;button in the upper right corner <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"495\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43-1024x495.png\" alt=\"\" class=\"wp-image-17113\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43-1024x495.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43-300x145.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43-768x371.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/43.png 1131w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> <strong>Step 2 &#8211;<\/strong> Next,&nbsp;choose to create a new&nbsp;<strong>List<\/strong>&nbsp;and you&#8217;re ready to add contacts and then click on the \u201c<strong>Create<\/strong> <strong>List<\/strong>\u201d button <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"348\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44-1024x348.png\" alt=\"\" class=\"wp-image-17114\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44-1024x348.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44-300x102.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44-768x261.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44-60x20.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44-100x34.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/44.png 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> <strong>Step 3 \u2013<\/strong> Navigate to Account Settings by clicking the account at the upper right corner of your Klaviyo account. Then, in the Settings dropdown, choose API Key option and from there you find an API key then copy this key and paste in AMP Opt-in form and if you didn&#8217;t create an API key then you can create using create API key button on right side<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"395\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45-1024x395.png\" alt=\"\" class=\"wp-image-17116\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45-1024x395.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45-300x116.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45-768x297.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45-100x39.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/45.png 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4>How to Find Your List ID<\/h4>\n\n\n\n<p><strong>Step 1 \u2013&nbsp;<\/strong>To find the list ID for an existing Klaviyo list, navigate to the&nbsp;<strong>Lists &amp; Segments<\/strong> tab of your account and click on a particular list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"450\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46-1024x450.png\" alt=\"\" class=\"wp-image-17118\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46-1024x450.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46-300x132.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46-768x337.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46-100x44.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/46.png 1343w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 2 &#8211; <\/strong>Then, navigate to the&nbsp;<strong>Settings<\/strong>&nbsp;tab in your account. Here, you can find a list&#8217;s ID.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"408\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47-1024x408.png\" alt=\"\" class=\"wp-image-17119\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47-1024x408.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47-300x119.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47-768x306.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47-50x20.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47-60x24.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47-100x40.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/47.png 1344w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 3 &#8211; <\/strong> Copy this List ID and Paste this in AMP Opt-in form. <\/p>\n\n\n\n<p> <strong>Step 4 \u2013&nbsp;<\/strong>Create a new AMP Opt-in now enter the API key and List ID and copy the shortcode and place where you want to display the Klaviyo Form. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"385\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48-1024x385.png\" alt=\"\" class=\"wp-image-17120\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48-1024x385.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48-300x113.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48-768x289.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48-100x38.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/48.png 1343w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 id=\"the-output-of-mailpoet3-in-amp\">The Output of Klaviyo in AMP<\/h4>\n\n\n\n<p>Make sure you need to fill this form and then click on the submit button after that you will get the \u201c<strong>Subscription successful<\/strong>\u201d message.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"479\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24-1024x479.png\" alt=\"\" class=\"wp-image-17057\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24-1024x479.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24-300x140.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24-768x359.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/04\/24.png 1346w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n\n\n\n<p><br><\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>If you want to add a Klaviyo form in AMP then first you need to purchase and install&nbsp;Opt-in Forms for AMP&nbsp;plugin. After installing you will find this option in&nbsp;WordPress Dashboard&nbsp;-&gt;&nbsp;AMP optin&nbsp;-&gt;&nbsp;Add New optin&nbsp;-&gt; select \u201c&nbsp;Klaviyo \u201d option -&gt; Now you need API Key and List ID. How to get API&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[29],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17109"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=17109"}],"version-history":[{"count":8,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17109\/revisions"}],"predecessor-version":[{"id":17124,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17109\/revisions\/17124"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=17109"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=17109"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=17109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}