Guide to Creating a Signup Form

read
Last updated at:

Overview


Signup forms help you grow your list and collect more data about your subscribers. This guide covers the main principles you should follow when designing a signup form. To illustrate these principles, we showcase three examples of signup forms that you can build inside of your account. To tie it all together, we cover the important metrics you need to measure your success.

Prerequisites

Before you jump into designing your own signup form, make sure you complete the following prerequisites:

  1. Install klaviyo.js on your site
    Review our guide on Installing Klaviyo Signup Forms to ensure that you’ve added klaviyo.js to your site so you can publish Klaviyo forms directly from your account. You probably already installed klaviyo.js when you set up your Klaviyo account and integrated your ecommerce site. To be sure, the guide to Installing Klaviyo Signup Forms walks you through verifying your installation.
  2. Review our other Signup Form resources
    This guide does not dig into all of the details of our signup form builder. If you’re looking for a comprehensive reference, or trying to answer a specific question about the form builder, use our guide to The Signup Form Builder.

Once you’ve completed the required prerequisites you’re ready to start designing your first form.

The Three Principles of a Successful Form


Following these three principles will help you design a successful signup form:

  • Keep your style simple
    When you try to pack too many elements, colors, or details into a single form, you distract from your form’s main goal, and make life harder for your customers. Keep it simple and make it as easy as possible for your customers to understand and fill out your forms.
  • Design for the total experience
    It’s often easy to get lost trying to find the perfect color or layout. Successful signup forms are about more than just the form. When designing your next form, think about your customer’s experience before, during, and after they encounter your form.
  • Collect the right data
    Most signup forms ask for your email address. Once you get highly targeted with Klaviyo signup forms you can easily ask for more data. Knowing when to ask for more, and what to ask for, will help ensure you don’t bother customers with too many questions and deter them from actually providing you this data when filling out your forms.

The rest of this guide will dig into concrete examples of signup forms that showcase each of these principles in action. Along the way, we will cover how you can build out these forms in your own account.

Upgrading a Simple Popup to Acquire Subscribers

What makes some popup forms successful and others annoying? Here is a basic popup form:

popup-simple-default.png

Does this form satisfy the three principles listed above?

  • The design of the form is simple, but there's nothing in the copy or the color scheme that matches this from to any business.
  • It's hard to tell what the complete experience is just by looking at the form, but the Behaviors tab gives us some clues within Klaviyo. This form is set to show to everyone, with no delay, on every page. Not much not went in to personalization.
    popup-behaviors-tab.png
  • This form asks for your email. In the case of a homepage popup, this is all you all you want to ask for. Unless there is a specific reason you would like to collect more data on your signup form (to tailor your welcome series, for example), you don’t need to ask for anything other than email address.

In the following video we give this simple form an upgrade by applying the three principles.


With just a few adjustments we were able to transform our simple popup into a well-targeted form that’s easy for our customers to fill out.

How to Build this Form

This form starts with Klaviyo’s default popup. We are keeping with the default size, alignment, and background color, but keep these options in mind if a different selection aligns better with your brand’s design.

Next, add in an image. Start with a larger image, about 600px, and then scale down the width to 400px. We want the image to match the overall size of the form, and starting with a larger image helps us not compromise the quality by trying to scale up a small image.

popup-image-width.png

For the button, adjust the color to match the color of the buttons on our site.

popup-button-color.png

With the layout of our form in place, we can now add the content. Like in the video, we need to adjust the text to match our customers’ expectations.

Last, on the Behaviors tab we use the following settings:

  • Loading delay - 3 seconds
    We don’t want to show this form immediately when someone lands on the page, but we don’t want to wait too long either. We’re going to test a 3 second loading delay and see how the form performs over a few weeks. If we’re not getting enough views, we can decrease the delay. If we’re getting views but not enough submissions, we can increase the delay and give customers more time to browse before asking them to sign up.
  • Display Frequency - Don’t show again after submitting the form
    Once someone submits to our form (or decides to close the form), we don’t need to show it again. Constantly showing your form to browsers who have already seen it is a similar experience to a salesperson who won’t leave you alone when shopping for items in a store.
  • Targeting - Don’t show to existing Klaviyo Profiles
    The goal of this form is to gain more new subscribers, so there’s no need to show it to any of our existing customers.

popup-targeting.png

A welcome popup like this is perfect as a first step to your welcome series. Check out our Guide to Creating a Welcome Series to learn more about how you can create a great experience for your customers after they submit to your form.

First-time Purchasers Flyout

Now that we've acquired some new customers, there are a few additional ways we can message our customers with forms along their journey with our brand.

For this example, we're going to use a flyout to collect preference information. A flyout is less disruptive because it does not cover the entire screen. We will target this form to anyone who has already made a purchase, so that we’re not bothering the wrong group of customers with this form.


How does this flyout form stack up when evaluated against the 3 principles a successful form?

  • The design is simple and matches our brand.
    We kept things simple by starting with one of our existing forms and only making the modifications that we needed.
  • The experience focuses on a specific step in our customer’s journey.
    This flyout is crafted to match the group it is targeting. The flyout format is noticeable but less obtrusive, and it only asks for preference data from customers that have already made a purchase.
  • We’re asking for data that builds our relationship
    Asking for preference data when customers first sign up might deter anyone who doesn’t feel like filling out a long form. Waiting until after customers complete their first purchase allows us to target customers that have shown a certain level of engagement by making a purchase. The next step is to follow through and actually send content that matches their selected preferences. We can do this by creating segments of our customers based on their preference information, and sending these segments targeted campaigns.

Now we're using a well targeted and subtle flyout form to collect valuable preference information about our customers. What more can we do with forms?

How to Build this Form

This form starts by cloning our popup form in order to match our existing styles and take advantage of the work we’ve already done. You could just as easily start by creating a new form and using Klaviyo's default flyout.

First we change the form type on the Styles tab. We are using the bottom-right flyout position because we want to be noticed, but we don’t want to get in the way. You can experiment with other positions. Monitor your form’s engagement rate to see if changing your flyout position leads to a higher rate.

flyout-change-form-type.png

For content we hardly changed anything from the popup we built in the first example. This shows you just how easy it is to create a new form experience. On the other hand, you might want to make some modifications to the content of new forms you create. For this flyout, one simple idea would be to use a photo that reflects the type of data you’re collecting. In the example below, we replaced our original photo with a photo showing a collection of coffee types and colors.

flyout-targeting.png

To collect roast preference data we need some checkboxes. Checkboxes allow our customers to select multiple roast preferences, but you can collect many different types of data with Klaviyo forms. Just to show you, here’s a form that includes all the different data fields you can ask for: checkboxes, dropdown, radio buttons, textbox, date property. Choose the field that works best for the data you want to collect.

flyout-data-collection-types.png

As a last step we set up our targeting and prefilled the email field. We can take this example one step further. We already know the customers we are targeting because they have made a purchase and been added to our Klaviyo account. So, we can remove the email field and make it even easier for our customers to quickly understand and fill out our form.

flyout-no-email-box.png

Customers that see this form are already in our Klaviyo account. Any customer who follows through and submits will have their roast preference data added to their profile.

Targeting Facebook Ad Traffic

Facebook advertising gives you the tools to reach very specific groups of customers. With Klaviyo signup forms and URL targeting, you can continue to customize the journey after customers click one of your Facebook ads and navigate to your site.

This video walks through how to set up a popup that only displays to customers coming to your site from your Facebook ads.


Facebook is only one example of how you can use URL targeting to enhance specific customer journeys. For another example, you might be running a campaign on Google Ads. Just like the Facebook example, you can include a special UTM parameter on the end of the URLs in your ads, and target any customers who click through.

How to Build this Form

This is the simplest form we are building. We are tying it into a larger marketing effort, so the actual form doesn’t need to do much.

Start in Facebook by adding a UTM parameter to the end of any URLs included in your ad. When customers click on your ad, they will be taken to your site, but the UTM parameter will help us identify them as coming from Facebook. Make sure you’re using a unique UTM parameter, otherwise your form might display on other pages that you’re not expecting.

facebook-utm.png

Next, target the form to only display on URLs containing our UTM parameter. URL targeting is very powerful, and you can use this method to scope forms to specific pages or sets of pages.

facebook-utm-editor.png

For form content we add in our static code. When displaying static coupon codes inside of your signup forms, you can display the code in the main form, or in the success message. Usually you’d display the code in the success message if you wanted to and ensure someone fills out your from before getting your coupon code.

facebook-utm-static-code.png

The last step is to remove anything else we don’t need. For our button, we’re changing the text and updating the behavior so the form closes when this button is clicked.

facebook-close-form.png

Now this form is ready to go. It will only display to customers coming to our site from our Facebook campaign, and it will deliver the static discount code we promised in our ads.

Measuring Success

How do you know if your forms are successful? Klaviyo offers a pre-built dashboard view that displays all of your form data, as well as the ability to customize the dashboard to fit your needs.


For ecommerce stores, the average engagement rate for a signup form is only 1.8%, but successful forms can see rates in the range of 6-10%. What can you do to achieve signup form numbers like these? Here are some some key metrics and how to evaluate them.

Form views

When evaluating form views, it’s important to consider the targeting of your form. If you’re displaying your form on every page of your site, then you can compare your form views to your general site traffic. As you get more targeted with your forms, be sure to scope your baseline traffic to match where your form displays. For example, if you’re running a special promotion and only displaying you form on a specific page, you’ll want to compare your form views to the traffic for just that page.

Form engagement

When evaluating your form engagement rate, you have to consider both the content and how customers are discovering your form.

Start by evaluating if your form is getting enough views. There’s no concrete number or percentage to look for here, but your form should be displaying to customers who are landing on the page where your form displays and who meet the other criteria for your form’s targeting.

Next, test out the form yourself. Put yourself in your customers’ shoes and make sure that any expectations you set when customers are clicking on your ads or discovering your site are met with your form’s content.

The key takeaway when evaluating signup form performance is to look for small improvements and test out new ideas. Your forms are the onramp for your new customers, so make sure your forms are simple to use, highly targeted, and asking for the right data.

Resources

Now you've got all the tools you need to create an excellent signup form experience.

To wrap things up, we've got a list of additional resources so you can continue your learning. Make sure you check them out and remember to keep experimenting, iterating, and optimizing your forms.

To help you build:

To help you strategize:

x
Was this article helpful?
27 out of 43 found this helpful