You will learn
Learn how to create and customize your signup 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 signup 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
Before you begin, integrate your website with Klaviyo. If you use an ecommerce platform that has a pre-built Klaviyo integration, like Shopify, BigCommerce, or WooCommerce, make sure your integration is live and that you’ve enabled Active on Site tracking.
- For Shopify, Active on Site tracking is enabled through Klaviyo’s app embed.
- For WooCommerce, it’s enabled automatically once you integrate.
Guiding principles for signup forms
Following these three principles will help you design a successful signup 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 signup 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 signup 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 signup 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 Signup 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.
- 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.
- Choose the list that your form will submit to. Note that you can select different lists for collecting email and SMS subscribers if it is a multi-step form.
- 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.
- Navigate to the Signup Forms tab.
- Click Create Signup Form in the upper right corner.
- Name your form.
- 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.
- Choose the type of form that you would like to use (e.g., popup, flyout, embed, or full page).
- Choose if you would like the default template to include data protection language.
- 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.
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 signup form.
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. These include:
- Text Block
- Button Block
- Image Block
- Coupon Block, if you are a Shopify user
- Text Input
- Email Input
- Phone Number Input
- Radio Button
- Multi Checkbox
- Date Field
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
- Show on: Desktop and Mobile
- 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.
If your website platform doesn’t integrate with Klaviyo directly, install klaviyo.js by pasting a small snippet of code on your site to enable your forms to appear.
To view and test your signup 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.
Follow up on your offer
If your signup 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 signup 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 signup form offer.
Manage your forms
Navigate to the Signup Forms tab to see a list of all the forms in your account. A green dot indicates a live form, a gray dot indicates a draft form, and a green circle indicates a form that is live, but has unpublished edits.
To pause a live form without deleting it, open the form and select Draft from the dropdown in the top right. This will remove the form from your site, and you can always return and reactivate it at a later time.
To rename, clone, or delete a form, head to the Signup Forms tab and use the button with three dots to access form management options.
Change the list a form submits to
To change the list a form submits to, open up the form’s editor. Click the main button block in your form; then, in the Button Click Action section, select a new list under List to Submit.
Review your data
Once you’ve collected a few subscribers, you can review the information they’ve shared in their profiles. Search for a person’s name or email address to find them. Then, scroll down to their Information section to see the data they shared in the form.
To learn more about reviewing your signup form data, head to our article: how to view form responses.
Level up your signup forms
Ready to take your list growth program to the next level? Try optimizing your forms for mobile devices, using a multi-step form, or offering tiered discounts to different customer groups.
For a deep dive into building your signup form strategy, register for our course creating an effective acquisition strategy using signup forms
- Course: Creating an effective acquisition strategy using signup forms
- How to view form responses
- Guide to form blocks and fields
- Signup form troubleshooting