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

You will learn

Learn how to embed a sign-up form on your BigCommerce 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.

Before you begin

Make sure that you've integrated with BigCommerce and checked the setting Automatically add Klaviyo onsite javascript (Recommended).

Build your form

You can create a sign-up form and embed it on your confirmation page to ask relevant questions of your customers after they check out. 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 Website > Sign-up forms and click Create form.
2. If prompted to choose a channel, name your form, select Web, and click Create.
3. Click Create blank form. In the menu that appears, enter or confirm your form’s name and select a list for new subscribers to join.
4. Select Embed as the form type.
   

5. Click Save and design.
6. In the form editor, customize the following settings:
   • Edit 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 & display behavior: In Display, choose whether the form appears on desktop, mobile, or both. In Targeting, set Audience to Show to all audience members so recognized customers can also see the form. Don’t show to existing Klaviyo profiles hides it from visitors Klaviyo recognizes, which can exclude customers you want to ask for feedback.
7. In the menu bar, select Success to edit the page that displays after someone submits your form.
8. When you're satisfied with your form's design, click Publish or schedule. Resolve any blocking form alerts, then select Publish now and click Publish now to make the form live.
9. Open Targeting & display behavior > Display and copy the Embed code. You will use the form ID from this code in the installation script below.

Your form will not appear on the order confirmation page until you add the installation script below.

Check the opt-in settings for the list your form submits to. Lists can use single or double opt-in. If the list uses double opt-in, customize its confirmation pages and remember that new subscribers must confirm their subscription before they join the list.

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>

1. In the snippet above, replace PUBLIC_API_KEY with your site's public API key.
2. In the snippet above, replace FORM_ID with the ID after klaviyo-form- in the embed code you copied from Klaviyo. Copy only the ID, not the entire embed code.

3. 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 Edit 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.

After placing a test order, check that the form appears at the bottom of the order confirmation page on the devices you selected. Submit a test response and confirm that the answers appear on the intended profile in Klaviyo. If you are testing a new subscription to a double opt-in list, complete the confirmation before checking list membership.

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