You will learn
Learn how to embed a form on your confirmation page to collect additional information from customers after they have already expressed interest in your brand. Whether you're looking to understand your audience better or have a concrete idea of how you're going to use this data to tailor your marketing, the order confirmation page presents a great opportunity to further engage with your customers.
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. Below, we have outlined how to accomplish this for two ecommerce platforms:
Before you begin
If you are using Shopify or BigCommerce, or have the Klaviyo plugin for Magento or WooCommerce, you're all set to start building. 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, and can be done manually for other platforms. It is what allows Klaviyo to publish sign-up forms on your site.
Build your form
Using Klaviyo's sign-up form editor, you can create an embedded form that asks certain questions of your customers. In this example, a cosmetics brand wants to have a better understanding of two main things:
- Who our customers are (i.e., how often do they use our products and what are their lifestyles like?).
- What potential new products we could branch into (i.e., if you're currently only selling lip products, but want to know what other items our audience would be interested in buying).
When asking your customers questions, it's important to have the foresight to know what you're going to do with the responses. You could simply be interested in audience research, but know this going in so that you can ask pointed questions. Each question you ask increases the likelihood that someone will not complete your form, so keep your form as simple and streamlined as you can.
When creating your form, there are a few important points to keep in mind:
- Make sure that you have edited the success message so that it aligns with the content of your form. This is what will display after someone submits the form.
- Be sure you have an email input and submit button. Custom properties won't be properly recorded on customers' profiles unless there is an email input and submit button.
- You will need to specify a list that the form submits to in the button settings. This could be your main list (if you are clear that they are signing up to receive emails) or a new, separate list. Verify the opt-in settings for that list so that the customer experience is seamless. If the list is double opt-in, you will want to edit the confirmation pages. All Klaviyo lists are set to double opt-in by default.
- To save space, you may only want to have the form appear for desktop users. You can configure this setting in the Targeting & Behaviors section.
- Publish the form immediately once you're finished. It won't appear on your site until you paste the embed code where you would like it to appear.
Once you have created and published your form, copy the embed code from the Targeting & Behaviors section or publish modal.
Add the embed to your Shopify site
Navigate to your Shopify store's backend. Go to Settings > Checkout > Order processing. Here, under Additional scripts, add 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 slightly adjust the form to get the look and feel you'd like. In our example, we added a white border to the form to give more padding between the "Thank you" message and the form itself. Any edits you make with be applied automatically once you publish your changes; there is no need to swap out the embed code once you add it.
Add the embed to your Bigcommerce site
Navigate to your Bigcommerce admin. Go to Storefront > Script Manager and click Create a Script. 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
In the script contents, you will need to create a new script that:
- Contains the form's embed code
- Adds klaviyo.js to the order confirmation page
Even if you have previously installed klaviyo.js on your Bigcommerce site, you will need to install it again directly on the order confirmation page in order for your embed code to display. In the script contents, add the following code:
<script src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=API_KEY"
async=""></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var elem = document.createElement('div');
elem.className = 'klaviyo-form-FORM_ID'
document.body.appendChild(elem);
});</script>In the above code, you must replace API_KEY with your site's public API key and 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.
When you have filled in all the details for the script, click Save. Your embedded 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.
Best practices
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.
Having this data is useful from both an analytics and tactical standpoint. Not only do you gain insight into who your customers are, but you're also able to use this information to better tailor their customer experience.