How to embed a sign-up form on your order confirmation page

You will learn

Learn how to embed a sign-up form on your confirmation page to collect additional information from customers after they finish the checkout process. These recent customers are already interested in your brand, so the confirmation presents a great opportunity to further engage with them.

The exact steps that you take to embed a form on your order confirmation page will depend largely on your ecommerce platform, but the process will involve updating your store's code files with a short snippet snippet. In this guide we have outlined how to accomplish this for 2 ecommerce platforms:

• Shopify
• Bigcommerce

Before you begin

If you are using Shopify or BigCommerce, or have the Klaviyo plugin for Magento or WooCommerce, you're ready to start building your form in the section below.

However, if you're using an ecommerce platform that does not natively integrate with Klaviyo, make sure that you’ve enabled Active on Site tracking for your site. This is done automatically for the platforms listed above, but must be done manually for other platforms. It is what allows Klaviyo to publish sign-up forms on your site. 

Build your form

You can create a sign-up form and embed it on your confirmation page to ask relevent questions of your customers after they checkout. For example, you could ask questions to learn more about how often a customer uses your products, or what potential new products they might be interested in buying.

To build your sign-up form:

1. In Klaviyo, navigate to Sign-up forms > Create Sign-up form > Build from scratch.
2. In the menu that appears, name your form and select a list for new subscribers to submit to. 
3. Select Embed as the form type.
   
4. Click Save and continue to design. 
5. This will bring you into the form editor where you can edit the following styles:
   • Styles: Edit the appearance of your form to match your brand, such as form or input field styles and font type. You can also edit any text by clicking on it and replacing the default language with your own. 
   • Add blocks: Here you can add content to your form in order to collect information, such as a text box for a question or a date field for a birthday. Make sure to set a profile property with each field you add, and to not overwhelm customers with too many questions.
   • Targeting and behavior: Choose whether you want the form to appear on desktop, mobile, or both. Keep your form set to either Show to all visitors or Don't show to existing Klaviyo profiles.  
6. In the menu bar, select Success to edit the page that displays after someone submits your form.
7. When you're satisfied with your form's design, click Publish.
8. From the modal that appears, copy your embed code so that you have it ready to paste. 
   
9. Click Publish.

Your form will not appear on your site until you've pasted the embed code in your site code. The next 2 sections will go over how to paste the code for a Shopify site, and then a Bigcommerce site.

Add the embed to your Shopify site

1. Navigate to your Shopify store's backend.
2. Go to Settings > Checkout > Order processing.
3. Under Additional scripts, paste the embed code.

To test how the form appears live, create a sample order and complete the checkout process. Based on your store's theme, you may need to go back into the form editor to slightly adjust for the look and feel you'd like. Make sure to publish again after making any changes; but, you will not need to add the embed code again as all edits will be applied automatically after publishing.

In our example, we added a white border to the form to give more padding between the "Thank you" message and the form itself. 

Add the embed to your Bigcommerce site

1. Navigate to your Bigcommerce admin.
2. Go to Storefront > Script Manager and click Create a Script. 
3. Name the script and configure it with the following:
   • Location: Head
   • Description (optional): Describe the purpose of the script
   • Pages where the script will be added: Order confirmation
   • Script type: Script
     
4. Delete the script contents and instead paste the following code to add klaviyo.js to your confirmation page. Note that you need to do this even if you previously installed klaviyo.js on your website:
   

     <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async=""></script>
     <script>
        document.addEventListener("DOMContentLoaded", function() {
          var elem = document.createElement('div');
        elem.className = 'klaviyo-form-FORM_ID'
        document.body.appendChild(elem);
        });</script>

5. In the snippet above, replace PUBLIC_API_KEY with your site's public API key.
6. In the snippet above, replace FORM_ID with your form's ID. To find your form ID, navigate to the embedded form in your Klaviyo account. The form ID is the 6 letter code at the end of the URL.
   
7. When you have filled in all the details for the script, click Save.

Your embed form will now display at the bottom of the page after someone places an order. Depending on your theme, you may want to edit the border, padding, or size of your form in the Styles section to ensure that it matches the look and feel of your order confirmation page; publish any changes you make to see them reflected.

Next steps

After you start collecting responses with your embedded form, each submission will be stored on the customer's profile as a custom property, available to use in segments, flows, and email templates.

Based on the responses, you can branch the post-purchase experience. You may also want to branch your welcome series based on this data or create relevant segments to send campaigns to. For example, let's say we decide to release a new mascara. Since we're collecting product interest data on this embedded form, we can notify anyone who told us they were interested in mascara in the product release.

Additional resources

• Getting started with sign-up forms
• How to embed a sign-up form on your website