Embed a Form on Your Order Confirmation Page

read

Overview

Embedding a form on your order confirmation page is a great way to collect additional information about your customers. 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 after they have already expressed interest in your brand.

The exact steps that you take to embed a form on your order confirmation page will depend largely on your ecommerce platform. Below, we have outlined how to accomplish this for three of the major platforms:

Regardless of your ecommerce platform, this process will involve updating your store's code files with a short snippet. Where, exactly, this snippet should be placed will vary.

This article is inspired by one of our customers, Supply. Patrick Coddou, the founder, shared the results of this experiment in a Twitter thread and achieved a 9% response rate with his order confirmation form.

Before You Start

Before you get started, make sure that you have klaviyo.js installed on your site, either through your ecommerce integration or manually. This is what allows Klaviyo to publish signup forms on your site. If you are using Shopify or Bigcommerce, or have the Klaviyo plugin for Magento or WooCommerce, klaviyo.js is installed automatically.

Build Your Form

Using Klaviyo's Signup Form Builder, you can create an embedded form that asks certain questions of your customers. For detailed instructions on how to create a signup form in Klaviyo, please refer to the Signup Form Builder article. In our example, we're a cosmetics brand and we want to have a better understanding of two main things:

  1. Who our customers are -- how often do they use our products and what are their lifestyles like?
  2. What potential new products we could branch into -- currently, we're only selling lip products, but we 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 adds friction, so keep your form as simple and streamlined as you can.

2019-08-06_13-43-52.png

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 can autofill the email address field with the customer's name if they are already in your Klaviyo account.
  • You will need to specify a list that the form submits to in the button settings. This could be your newsletter 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 Behaviors tab.
  • 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 Behaviors tab or publish modal.

2019-08-06_15-32-49.png

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.

2019-08-06_15-38-24.png

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.

2019-08-06_11-35-45.png

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

2019-08-08_11-47-34.png

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 six-letter code at the end of the URL.

2019-08-08_11-40-31.png

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 tab to ensure that it matches the look and feel of your order confirmation page.

Add the Embed to Your WooCommerce Site

Navigate to your WooCommerce store admin. Here, go to Plugins > Plugin Editor. Next, find Klaviyo for WooCommerce V2 in the dropdown and click Select.

2019-08-09_15-36-34.png

In the right-hand sidebar, click the includes dropdown and select wck-cart-functions.php.

2019-08-09_15-37-17.png

At the bottom of this file, paste the following code:

$klaviyo_settings = get_option('klaviyo_settings'); if (!empty($klaviyo_settings['klaviyo_newsletter_list_id']))
// Add the checkbox field
add_action('woocommerce_after_checkout_billing_form', 'kl_checkbox_custom_checkout_field');
// Post list request to Klaviyo
add_action('woocommerce_checkout_update_order_meta', 'kl_add_to_list');
}
add_action( 'woocommerce_thankyou', 'klaviyo_add_content_thankyou' );
function klaviyo_add_content_thankyou() {
echo '<div class="klaviyo-form-FORM_ID"></div';
}

In the above code, be sure to 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 six-letter code at the end of the URL.

2019-08-08_11-40-31.png

Next, click Update File in WooCommerce.

2019-08-09_15-53-51.png

Depending on your theme, you may want to edit the border, padding, or size of your form in the Styles tab 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.

x
Was this article helpful?
16 out of 17 found this helpful