Getting started with sign-up forms

You will learn 

Learn how to create and customize your sign-up forms to engage your shoppers, grow your email and SMS lists, and build long-lasting customer relationships.

By following a few key principles, you can have a beautiful, high-converting sign-up form live on your website in just a few minutes. Start by setting a goal for your form; then, add content and design it to meet your goal. Once the form is built, you can publish it to your website with just a few clicks. 

Before you begin

• For Shopify, Active on Site tracking is enabled through Klaviyo’s app embed. 
• For WooCommerce, it’s enabled automatically once you integrate. 
• For BigCommerce, you must check the setting Automatically add Klaviyo onsite JavaScript. 
• If you use a platform that doesn’t have a pre-built Klaviyo integration, install Klaviyo’s onsite JavaScript (Klaviyo.js) by pasting a small snippet of code on your site before you begin. 

Guiding principles for sign-up forms

Following these three principles will help you design a successful sign-up form:

• Keep your style simple
  When you pack too much into a single form, you distract from your form’s main goal and make it harder for a site visitor to say “yes.” Keep it simple so it’s as easy as possible for your visitors to understand and fill out your form.
• Design for the total experience
  It’s easy to get lost trying to find the perfect color or layout. Successful sign-up forms are about more than just a first impression. When designing your next form, consider your subscribers’ experiences before, during, and after they encounter your form.
• Collect the right data
  Most sign-up forms ask for your email address or phone number, but more data can help you build powerful connections with subscribers. Knowing when to ask for more, and what to ask for, will help make it a no-brainer for subscribers to tell you more about themselves.

Goals for your sign-up form 

Before you start building a form, consider your goals. A form can help you connect with potential customers, learn more about your audience, convert email subscribers to SMS subscribers, and more. A simple new prospect acquisition form (to collect the contact information of a person who has visited your site, but never purchased) is a great place to start. 

Once you’ve decided on a goal for your form, head to the Sign-up forms tab.

Create a basic form

To create a form, you can either use a template from Klaviyo’s form library or build a form from scratch.

Build a form from the form library

The forms found in the form library are designed with best practices in mind, and it’s easy to customize them to match your brand. 

1. Navigate to the Sign-up forms > Create Sign-up Form.
2. Scroll down to browse the library and select the form that you would like to use.
   

   If you’d like to minimize the number of fields on your form, but still provide subscribers the opportunity to share more about themselves, consider using a multi-step form. With a multi-step form, you can add additional pages and ask subscribers for optional information, like their name or interests. 

3. Choose the list that your form will submit to. Note that if you are using a multi-step form, you can select different lists for collecting email and SMS subscribers to. If you do not already have an SMS subscribers list, one will be created automatically when you select this list.
4. Click Create Form to enter the editor, where you can design the form to fit your brand.

Build a form from scratch

If you would prefer to start customizing a blank template, build a form from scratch.

1. Navigate to the Sign-up forms tab.
2. Click Create Sign-up Form in the upper right corner.
3. Name your form.
4. Choose the list you would like new signups to feed into.
   

   Note that you can change the list that the form submits to later by editing the form's submit button, if you would like.

5. Choose the type of form that you would like to use (e.g., popup, flyout, embed, or full page).
6. Choose if you would like the default template to include data protection language.
   
7. Click Save and Continue to Design to enter the editor where you can customize your form further.

Once you’ve chosen your form’s content and targeting, head to the Styles section. Here, you can apply your brand’s styles and make the finishing touches before publishing. Recall the first guiding principle: Keep your style simple. When someone looks at your form, they should be able to understand what the form is asking for (and how to close it) with just a glance. If not, consider simplifying your form’s design, so the most important elements are easy to understand. 

Design your form

Once you've created your form, you can use the form editor to customize the style and design, and also add blocks to collect more information from your subscribers.

Style your form

In the Styles section, you can apply you brand's styles and make the finishing touches to the form's appearance before publishing. Remember to keep your style simple; shoppers should be able to understand what the form is asking for (and how to close it) with just a glance.

Form types

When choosing form styles, double check that your form type (i.e., popup, flyout, embed, or full page) matches your form’s goal. Consider the characteristics of each form type: 

• Popups appear in the middle of a browser window, which makes them eye-catching and high converting. However, too many popups (or a popup at the wrong time) can be annoying or distracting to a potential customer. 
• Flyouts are less intrusive than popups, but still noticeable, as they fly onto the edge of the page rather than in the middle. They generally allow a visitor to keep browsing without interacting with or closing the form.
• Embed forms are embedded on a specific page or section of your site, like your footer. Embeds are helpful for visitors who come to your site with the intention of subscribing, but may not trigger a popup or flyout. Consider including an embed form in your footer in addition to any popup or flyout forms you build. 
• Full Page forms display over the entire browser window, capturing your shoppers' full attention. These are high-converting forms since they cannot be easily overlooked, however this also makes them more intrusive since shoppers' must interact with the form to close it.
  

  Consider using a full page form as a landing page to grow your subscriber list. Design your full page form in the editor, then navigate to the targeting and behavior section and set the form's display timing to Show immediately on page load.

General form styles

When choosing fonts and colors for your form, consider accessibility best practices. Use colors with high contrast to ensure it’s easy for all visitors to read the form’s content. Learn more about accessibility in design.

For a deep dive into brand design, head to our guide on how to choose styles for a sign-up form. 

Add blocks

Use the Add Blocks section you can drag and drop various elements and input fields into your form, depending on the information you would like to collect.

Elements:

• Text Block
• Button Block
• Image Block
• Coupon Block, if you are a Shopify user

Input fields:

• Text Input
• Email Input
• Phone Number Input
• Radio Button
• Multi Checkbox
• Date Field
• Dropdown
•  

Configure dynamic blocks

If your form is set to show on all devices, you can configure blocks to create a distinct look for mobile shoppers compared to desktop shoppers. Dynamic blocks can be configured to show on some devices, but not others. This allows you to add any of the blocks listed above to your form, and specify which device the block is shown on.

For more information on using dynamic blocks to tailor your form by device type, head to our guide on understanding blocks and fields.

Success messages

Click Success to view and edit the form’s success message. This will appear to anyone who successfully completes the form, unless your form is set to close or go to a URL upon submission. 

Target your form

Based on your form’s goals, adjust the settings in the Behaviors and Targeting section. You can target a form based on a visitor’s location, device type, list membership, and more. 

For a simple list growth popup, the following behavior settings are a good place to start: 

• Display Timing 
  • Loading delay: Show 3 seconds after page load
• Display Frequency 
  • Don’t show again after submit form or Go to URL action 
  • Show again 5 days after closing 
• Devices
  • Show on: Desktop and Mobile
• Targeting
  • By visitor > Target visitors in a list or segment: Don’t show to visitors in a certain list or segment > [your main list] 

If you’d like to test your behavior and targeting settings, consider using an A/B test to experiment.

Add your form to your website

Once your form is ready to share, click Publish. As long as you’ve integrated your site with Klaviyo, there’s nothing else you need to do to launch a popup or flyout form.

• If you’re publishing an embed form, there’s just one final step: paste the form’s embed code onto your site. 

To view and test your sign-up form, head to your website. Try using an incognito browser if your form is set to be hidden from existing Klaviyo profiles. Make sure you meet all the form’s targeting criteria. For example, if you have a form set to show after 3 seconds and when exit intent is shown, wait 3 seconds for the page to load. Then, show exit intent by quickly moving your cursor towards the “close” button for your tab (or quickly scrolling upward on mobile). Note that all criteria must be met (the time delay and exit intent, in this case) for the form to appear.

In the subsequent hours and days after your form is set live, site visitors will see it and may complete it. View your form’s results in your form analytics. 

Next steps

If your sign-up form includes an incentive for signing up (like free shipping or a discount on an order), new subscribers will expect to be able to use the offer right away. Use a welcome flow to deliver on your offer and start to build brand awareness and loyalty. 

Your welcome flow should use your sign-up form’s list as the trigger, and the first email should be sent right away. You can add additional messages or reminders to use their coupon a few days later. 

If you want to experiment and identify the best incentive for your audience, consider A/B testing your sign-up form offer. 

Additional resources 

• Course: Creating an effective acquisition strategy using sign-up forms
• How to view form responses 
• Understanding form blocks and fields
• Troubleshooting sign-up forms