{"id":41569,"date":"2024-11-13T17:27:22","date_gmt":"2024-11-13T11:57:22","guid":{"rendered":"https:\/\/email.uplers.com\/blog\/?p=41569"},"modified":"2024-11-15T11:10:48","modified_gmt":"2024-11-15T05:40:48","slug":"how-to-embed-klaviyo-sign-up-form","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/","title":{"rendered":"How to Embed Klaviyo Sign-up Forms \u2013 The Complete Guide"},"content":{"rendered":"\n<p>While embedding a sign-up form on your website is important, the very thought of having to deal with HTML code can be a bit daunting.&nbsp;<\/p>\n\n\n\n<p>You don\u2019t want to be dealing with code and that\u2019s fair.&nbsp;<\/p>\n\n\n\n<p>That\u2019s why we\u2019re here. To help you navigate the process of embedding a sign-up form on your website. In this guide, you\u2019ll learn how to do it on Klaviyo. We are certified <a href=\"https:\/\/email.uplers.com\/klaviyo-email-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">Klaviyo experts<\/a>, specializing in Klaviyo consulting for over a decade now. So we know the platform from stem to stern. Let\u2019s go!<\/p>\n\n\n\n<p>(<em>Par for the course, we <\/em>will <em>be dealing with some code. But we will explain every bit of it so that you don\u2019t need to twist your brains<\/em>.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"How\"><strong>How to Embed Klaviyo Sign-up Forms: The Steps<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Add\">1. <strong>Add Klaviyo\u2019s Onsite JavaScript<\/strong><\/h3>\n\n\n\n<p>In the first step, you\u2019ll have to add Klaviyo\u2019s onsite JavaScript known as Klaviyo.js.&nbsp;<\/p>\n\n\n\n<p>Why? Because Klaviyo.js establishes the link between Klaviyo\u2019s servers and your website. So when a user submits the form, it is this piece of code that captures the data and sends it to Klaviyo for processing and storage.&nbsp;<\/p>\n\n\n\n<p>This is how the code reads:<\/p>\n\n\n\n<div class=\"dm-code-snippet dark dm-normal-version default no-background-mobile\" snippet-height=\"\" style=\"background-color:#abb8c3\"><div class=\"control-language\"><div class=\"dm-buttons\"><div class=\"dm-buttons-left\"><div class=\"dm-button-snippet red-button\"><\/div><div class=\"dm-button-snippet orange-button\"><\/div><div class=\"dm-button-snippet green-button\"><\/div><\/div><div class=\"dm-buttons-right\"><a id=\"dm-copy-raw-code\"><span class=\"dm-copy-text\">Copy Code<\/span><span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span><span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a><\/div><\/div><pre class=\" no-line-numbers\"><code id=\"dm-code-raw\" class=\" no-wrap language-php\">&lt;script type=\"text\/javascript\" async=\"\" src=\"https:\/\/static.klaviyo.com\/onsite\/js\/PUBLIC_API_KEY\/klaviyo.js\">&lt;\/script><\/code><\/pre><\/div><\/div>\n\n\n\n<p><strong>Decoding the code:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&lt;script&gt;<\/strong> is used to embed JavaScript in a webpage.<br \/><\/li><li><strong>\u201casync\u201d <\/strong>tells the browser to load the script asynchronously. In other words, it will download the file without interrupting page loading.<br \/><\/li><li><strong>src=&#8221;<\/strong><a href=\"https:\/\/static.klaviyo.com\/onsite\/js\/PUBLIC_API_KEY\/klaviyo.js\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>https:\/\/static.klaviyo.com\/onsite\/js\/PUBLIC_API_KEY\/klaviyo.js<\/strong><\/a><strong>&#8221; <\/strong>specifies the URL of the external JavaScript file.<br \/><\/li><li>The <strong>PUBLIC_API_KEY<\/strong> placeholder will be replaced with your actual Klaviyo public API key. This key will link back to your Klaviyo account.<br \/><\/li><li>Consequently, Klaviyo will be able to track user behavior on your website and integrate Klaviyo\u2019s features on your site.&nbsp;<\/li><\/ul>\n\n\n\n<p>In short, the above code is what facilitates the actual liaison between your website and Klaviyo. Follow these steps to add it to your website:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Log in to your Klaviyo account.<br \/><\/li><li>Select your account name and click <strong>Integrations<\/strong>.<br \/><\/li><li>Select <strong>Add Integration<\/strong>.<br \/><\/li><li>Find your e-commerce platform. Then, click <strong>Add App<\/strong>.<br \/><\/li><li>Connect to your e-commerce platform.<br \/><\/li><li>Log in to your online store and click <strong>Install<\/strong>.<br \/><\/li><li>Click <strong>Confirm<\/strong> to return to the Klaviyo interface.<br \/><\/li><li>Check <strong>Automatically add Klaviyo onsite javascript<\/strong>.<br \/><\/li><li>Click <strong>Save<\/strong>.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"818\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image9-1024x818.png\" alt=\"code\" class=\"wp-image-41570\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image9-1024x818.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image9-300x240.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image9-768x614.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image9-175x140.png 175w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image9-624x499.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image9.png 1294w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/help.klaviyo.com\/hc\/en-us\/articles\/115005082547#step-3---install-klaviyo-js-and-viewed-product-tracking5\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Image source<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Embed\">2. <strong>Add the Embed Code to Your Website<\/strong><\/h3>\n\n\n\n<p>The next step is adding the embed code to your site.<\/p>\n\n\n\n<p>Now, what\u2019s an embed code? An embed code is a piece of HTML code that allows you to integrate content from another website into your own. For example, if you want to embed a YouTube video in a blog post, you copy the video embed code and paste it where you want the video to appear. That\u2019s how it works for sign-up forms.<\/p>\n\n\n\n<p>Klaviyo will generate the embed code. Copy it from their <strong>Publish Form<\/strong> modal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"568\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image4.png\" alt=\"Publish Form modal\" class=\"wp-image-41571\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image4.png 1008w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image4-300x169.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image4-768x433.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image4-248x140.png 248w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image4-624x352.png 624w\" sizes=\"auto, (max-width: 1008px) 100vw, 1008px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p>That done, go to your online store and locate the sign-up form. This is an important step for two reasons:<br \/><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Klaviyo wants you to ensure that the form appears where it should.<br \/><\/li><li>Because you\u2019ll need to paste the embed code you copied where the form appears, you must check the form\u2019s location on your website.<\/li><\/ul>\n\n\n\n<p>If that sounded a bit vague, don\u2019t worry! It will be clear in the next steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-31244 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/klaviyo-email-templates\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"220\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2022\/04\/Klaviyo.jpg\" class=\"attachment-full size-full\" alt=\"Klaviyo expert\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2022\/04\/Klaviyo.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2022\/04\/Klaviyo-300x83.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2022\/04\/Klaviyo-768x211.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2022\/04\/Klaviyo-624x172.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Navigate\">3. <strong>Navigate to Your \u201cStorefront\u201d<\/strong>&nbsp;<\/h3>\n\n\n\n<p>In this step and following, you\u2019ll learn how to navigate to the exact .html file where you need to paste the code you copied in the previous step.&nbsp;<\/p>\n\n\n\n<p>First, go to <strong>Storefront<\/strong> and select <strong>My Themes<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Select <strong>Edit Theme Files<\/strong> as shown in the following image.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"847\" height=\"523\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image6.png\" alt=\"Theme file\" class=\"wp-image-41572\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image6.png 847w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image6-300x185.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image6-768x474.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image6-227x140.png 227w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image6-624x385.png 624w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Locate\">4. <strong>Locate the Form Code&nbsp;<\/strong><\/h3>\n\n\n\n<p>Now, here\u2019s where knowing the form location will help you.&nbsp;<\/p>\n\n\n\n<p>If, for example, your subscription form appears in the website footer, you need to open the file corresponding to that location.&nbsp;<\/p>\n\n\n\n<p>So you\u2019ll have to open the footer.html file in Klaviyo\u2019s editor.&nbsp;<\/p>\n\n\n\n<p>Just press Ctrl+F and type \u2018newsletter\u2019 in the Find bar as shown. The highlighted portion is the newsletter code.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-1024x578.png\" alt=\"\" class=\"wp-image-41573\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-1024x578.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-300x169.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-768x433.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-1536x867.png 1536w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-248x140.png 248w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-624x352.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10.png 1680w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p><strong>Decoding the code:&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It starts with an HTML element that has a class name <strong>footer-info-col<\/strong>.<br \/><\/li><li><strong>data-section-type<\/strong> is a data attribute set to \u201cnewsletter subscription.\u201d<br \/><\/li><li>A conditional statement follows. If the setting <strong>show_newsletter_box<\/strong> is true, it will execute the code inside the block.<br \/><\/li><li><strong>{{ components\/common\/subscription-form}} <\/strong>is where the user will enter their email address in order to subscribe to the newsletter.<br \/><\/li><li><strong>{{&gt; components\/common\/payment-icons}}<\/strong> displays the various payment options. \u201cIcons\u201d probably refers to the different payment logos.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Find\">5. <strong>Find the Reference to Your Sign-up Form<\/strong><\/h3>\n\n\n\n<p>You\u2019ve successfully located the form code.&nbsp;<\/p>\n\n\n\n<p>Now look for the exact reference to your subscription form. As shown below, the form code is not located in the same file.<\/p>\n\n\n\n<p>Select the code snippet to open the subscription.form HTML file.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"126\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image8.png\" alt=\"\" class=\"wp-image-41574\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image8.png 720w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image8-300x53.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image8-624x109.png 624w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Replace\">6. <strong>Replace the Form Code with the Embed Code<\/strong><\/h3>\n\n\n\n<p>In the image below, you can see the components of your sign-up form. Highlight the entire block of code and replace it with the embed code you copied.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1558\" height=\"367\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1.png\" alt=\"\" class=\"wp-image-41575\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1.png 1558w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1-300x71.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1-1024x241.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1-768x181.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1-1536x362.png 1536w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1-624x147.png 624w\" sizes=\"auto, (max-width: 1558px) 100vw, 1558px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p><strong>Decoding the code:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The so-called <strong>\u201chidden\u201d <\/strong>input fields are used to send additional information with the form submission without displaying the data to the user.<br \/><\/li><li><strong>type=&#8221;email&#8221;<\/strong> specifies that the input must be a valid email address.<br \/><\/li><li><strong>placeholder=&#8221;{{lang &#8216;newsletter.email_placeholder&#8217;}}&#8221;<\/strong> gives a hint to the user. You must have seen those grayed-out placeholders in sign-up forms.<br \/><\/li><li><strong>settings.show_newsletter_summary<\/strong> is a conditional statement. As the user hits the Submit button, it will show a summary related to the newsletter.&nbsp;<\/li><\/ul>\n\n\n\n<p>Now, save your theme files and go back to your Klaviyo account. Ensure that your form has been published. Navigate to your site to view the Klaviyo embedded form.&nbsp;<\/p>\n\n\n\n<p>Bingo! You just learned how to embed Klaviyo sign-up forms in your website.&nbsp;<\/p>\n\n\n\n<p>All the above examples used BigCommerce as the e-commerce platform. Let\u2019s also explore how to utilize Klaviyo embed form in Shopify.<\/p>\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-40230 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/hire-dedicated-email-developer\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"376\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-02-100.jpg\" class=\"attachment-full size-full\" alt=\"Responsive Email Design\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-02-100.jpg 1001w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-02-100-300x113.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-02-100-768x288.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-02-100-624x234.jpg 624w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Klaviyo\"><strong>Klaviyo Embed Form in Shopify: A Quick Guide<\/strong><\/h2>\n\n\n\n<p>To include a sign-up form in the footer of your Shopify site, follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Log in to your Shopify account.<br \/><\/li><li>On the Shopify dashboard, click <strong>Online Store<\/strong>. Select <strong>Themes<\/strong>.&nbsp;<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"388\" height=\"797\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image2.png\" alt=\"\" class=\"wp-image-41576\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image2.png 388w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image2-146x300.png 146w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image2-68x140.png 68w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Click the three dots and select <strong>Edit code<\/strong>.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"372\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3.png\" alt=\"\" class=\"wp-image-41577\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3.png 376w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3-300x297.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3-142x140.png 142w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3-24x24.png 24w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3-48x48.png 48w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image3-96x96.png 96w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Open the <strong>footer.liquid <\/strong>theme file by clicking on <strong>theme.liquid<\/strong>.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"353\" height=\"328\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image7.png\" alt=\"\" class=\"wp-image-41578\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image7.png 353w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image7-300x279.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image7-151x140.png 151w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Find the area where you need the sign-up form to display. In the image below, the sign-up form appears in the footer just above the copyright information.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"825\" height=\"601\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image5-1.png\" alt=\"\" class=\"wp-image-41580\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image5-1.png 825w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image5-1-300x219.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image5-1-768x559.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image5-1-192x140.png 192w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image5-1-624x455.png 624w\" sizes=\"auto, (max-width: 825px) 100vw, 825px\" \/><figcaption><a href=\"https:\/\/help.klaviyo.com\/hc\/en-us\/articles\/360006897412\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Image source<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Paste the embed form code and click <strong>Save<\/strong>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Sign\"><strong>Klaviyo Sign-up Forms: Best Practices<\/strong><\/h2>\n\n\n\n<p>Instead of a general wrap-up, we leave you with some expert-vetted <a href=\"https:\/\/email.uplers.com\/blog\/types-of-email-signup-forms\/\" target=\"_blank\" rel=\"noreferrer noopener\">email signup form<\/a> best practices:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Make sure that your signup form is accessible to ALL users, including differently-abled visitors. Include clear labels, provide alternative texts for images, and test compatibility with the help of screen readers.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Triple-check privacy compliance. Ensure your form complies with local as well as national\/global data protection laws. Clearly state your privacy policy. Always obtain consent from visitors.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Optimize your signup form for mobile and other handheld devices, particularly in the case of popup forms.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Gradually profile website visitors instead of asking too many details at once. Start with collecting basic information and progressively gather more data in proportion to user engagement.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Simplify the signup process by inviting visitors to sign up using their social media accounts.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Send a confirmation email and wrap up the verification process. This is important because you don\u2019t want fake or incorrect addresses in your email list.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Beef up the verification process by implementing a double opt-in process.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>You may consider implementing spam mechanisms like CAPTCHA to minimize the risk of bots and bogus signups slipping into your email list.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Continuously A\/B-test your email signup form template, from design to placement to text.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Lastly, use analytics tools to track user behavior and monitor relevant metrics such as bounce rate, conversion rates, abandonment rates, etc.&nbsp;&nbsp;<\/li><\/ul>\n\n\n\n<p>Navigating ESPs can be tricky. But with experts like us, you\u2019re free to choose ANY ESP to work with and <a href=\"https:\/\/email.uplers.com\/klaviyo-email-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">we\u2019d be thrilled to assist you<\/a>.&nbsp;<\/p>\n\n\n\n<p>Next up, learn <a href=\"https:\/\/email.uplers.com\/blog\/create-signup-forms-mailchimp-campaign-monitor\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to create sign-up forms<\/a> in Mailchimp and Campaign Monitor.<\/p>\n\n\n\n<p><br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your email marketing program kicks off with the sign-up form on your website. Learn how to embed one through Klaviyo<\/p>\n","protected":false},"author":78,"featured_media":41581,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[382,1250],"tags":[],"class_list":["post-41569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-coding","category-klaviyo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Embed Klaviyo Sign-up Forms: Complete Guide<\/title>\n<meta name=\"description\" content=\"Learn how to embed Klaviyo sign-up forms on your website, from setup to best practices. Boost your email list and optimize form placements with our expert guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Embed Klaviyo Sign-up Forms: Complete Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to embed Klaviyo sign-up forms on your website, from setup to best practices. Boost your email list and optimize form placements with our expert guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-13T11:57:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-15T05:40:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Susmit Panda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Susmit Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/\",\"name\":\"How to Embed Klaviyo Sign-up Forms: Complete Guide\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3\"},\"description\":\"Learn how to embed Klaviyo sign-up forms on your website, from setup to best practices. Boost your email list and optimize form placements with our expert guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide.jpg\",\"width\":1170,\"height\":470},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Embed Klaviyo Sign-up Forms \u2013 The Complete Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3\",\"name\":\"Susmit Panda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png\",\"caption\":\"Susmit Panda\"},\"description\":\"A realist at heart and an idealist at head, Susmit is a content writer at Email Uplers. He has been in the digital marketing industry for half a decade. When not writing, he can be seen squinting at his Kindle, awestruck.\",\"sameAs\":[\"https:\/\/email.uplers.com\/\",\"https:\/\/www.linkedin.com\/in\/susmit-panda-965a1214a\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Embed Klaviyo Sign-up Forms: Complete Guide","description":"Learn how to embed Klaviyo sign-up forms on your website, from setup to best practices. Boost your email list and optimize form placements with our expert guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/","og_locale":"en_US","og_type":"article","og_title":"How to Embed Klaviyo Sign-up Forms: Complete Guide","og_description":"Learn how to embed Klaviyo sign-up forms on your website, from setup to best practices. Boost your email list and optimize form placements with our expert guide.","og_url":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2024-11-13T11:57:22+00:00","article_modified_time":"2024-11-15T05:40:48+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide-540x282.jpg","type":"image\/jpeg"}],"author":"Susmit Panda","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Susmit Panda","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/","url":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/","name":"How to Embed Klaviyo Sign-up Forms: Complete Guide","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3"},"description":"Learn how to embed Klaviyo sign-up forms on your website, from setup to best practices. Boost your email list and optimize form placements with our expert guide.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/How-to-Embed-Klaviyo-Form-A-Comprehensive-Guide.jpg","width":1170,"height":470},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/how-to-embed-klaviyo-sign-up-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Embed Klaviyo Sign-up Forms \u2013 The Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3","name":"Susmit Panda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png","caption":"Susmit Panda"},"description":"A realist at heart and an idealist at head, Susmit is a content writer at Email Uplers. He has been in the digital marketing industry for half a decade. When not writing, he can be seen squinting at his Kindle, awestruck.","sameAs":["https:\/\/email.uplers.com\/","https:\/\/www.linkedin.com\/in\/susmit-panda-965a1214a\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/41569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=41569"}],"version-history":[{"count":14,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/41569\/revisions"}],"predecessor-version":[{"id":41600,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/41569\/revisions\/41600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/41581"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=41569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=41569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=41569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}