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
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 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.
- Navigate to the Sign-up forms > Create Sign-up Form.
- 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 Sign-up forms tab.
- Click Create Sign-up 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 sign-up 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.
- 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
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.
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 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.
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.
- Course: Creating an effective acquisition strategy using sign-up forms
- How to view form responses
- Understanding form blocks and fields
- Troubleshooting sign-up forms