demobook

Klaviyo: Designing a High-Converting Signup Form

KlaviyoTry it →Watch full video →Emiel Dingemans from Magicianly | Email MarketingEmiel Dingemans from Magicianly | Email Marketing·

Demo summary

Using the form editor to customize headlines, input fields, CTA buttons, and success pages while removing friction elements like the 'X' close button.

Step-by-step

  1. Go to Styles to select the form type, width, and height.
  2. Choose the image placement and size, then add an Alt Text for the image.
  3. Update the headline to focus on the incentive rather than the action.
  4. Delete unnecessary sub-headlines or text elements to reduce friction.
  5. Edit the email input field placeholder text and change its background color to contrast with the form background.
  6. Modify the call to action button text and increase its height to make it stand out.

Options

  • Select image placement on the left side, right side, or other positions
  • Set image size to small, medium, or large
  • Toggle visibility between desktop and mobile devices
  • Use button text variations like 'Get my discount now', 'Claim my discount', or 'Claim my deal'

Watch out for

  • Avoid using words like 'sign up' or 'subscribe' as they do not grab attention and can deter users.
  • Do not make the call to action button excessively large (e.g., 150 height) as it becomes ridiculous.

Tips

  • Always use Alt Text for images to ensure accessibility and branding.
  • Use a headline that focuses on the value, such as 'Unlock 10% off', rather than the process.
  • Make the input field a different color than the form background to make it pop.
  • I'd advise making the call to action button larger (e.g., height of 70) to increase click rates.
  • Split test different button text and design elements to optimize the signup rate.

Highlights

“you want to make it as easy as possible because the more friction you create the less conversion you get”

All demos from “Klaviyo Email Marketing FULL COURSE 2026 ($300M Generated for Shopify eCommerce)”

  1. 6:061:16Klaviyo Account Creation and Shopify IntegrationWalkthrough of signing up for a Klaviyo account, selecting business type, and connecting a Shopify store URL.KlaviyoImport / migrate contacts
  2. 7:221:22Setting up a Main Subscriber ListDemonstration of creating a newsletter list and choosing between single and double opt-in settings.KlaviyoTag & manage subscribers
  3. 8:443:57Setting up a Dedicated Sending Domain and DMARCStep-by-step guide on adding NS and TXT records to DNS settings (Squarespace/Google Domains) to verify a branded sending domain in Klaviyo.KlaviyoAuthenticate sending domain (SPF/DKIM/DMARC)
  4. 12:412:04Configuring Smart Sending and Attribution SettingsAdjusting account-level settings for smart sending windows, conversion attribution, and UTM tracking parameters.KlaviyoDeliverability & setup
  5. 14:451:55Setting up the Klaviyo Brand LibraryUploading logos, selecting brand colors, and importing Google Fonts for consistent email styling.KlaviyoDesign a newsletter / email (drag-and-drop editor)
  6. 19:177:25Creating and Targeting a Popup Signup FormBuilding a popup form from a template and configuring advanced targeting rules like exit-intent, scroll depth, and URL exclusions.KlaviyoAdd an opt-in popup
  7. 26:428:36Designing a High-Converting Signup FormCurrentUsing the form editor to customize headlines, input fields, CTA buttons, and success pages while removing friction elements like the 'X' close button.KlaviyoCreate an email signup / subscription form
  8. 37:101:58Setting up a Signup Form TeaserDemonstrating how to create a persistent 'teaser' tab that allows users to reopen the signup form after closing it.KlaviyoCreate an email signup / subscription form
  9. 39:083:37Optimizing Signup Forms for MobileCloning a desktop form and adjusting button sizes, font sizes, and input field heights specifically for mobile users.KlaviyoCreate an email signup / subscription form
  10. 48:081:31Adding a 'Micro-Yes' Step to Signup FormsDemonstrating how to add an initial commitment step to a form to increase overall conversion rates.KlaviyoA/B test a campaign
  11. 56:119:34Klaviyo Flow Builder BasicsAn overview of the flow interface, including selecting triggers (Added to List, Placed Order), adding profile filters, and using conditional splits.KlaviyoBuild a welcome / drip automation
  12. 1:05:4510:54Building a Multi-Step Welcome Series FlowConstructing a 7-email welcome sequence with specific time delays and content angles like brand story, bestsellers, and social proof.KlaviyoBuild a welcome / drip automation
  13. 1:19:135:28Setting up a Site Abandonment FlowCreating a flow triggered by 'Active on Site' to target visitors who browse the home page but don't view specific products.KlaviyoTrigger emails from behavior / events
  14. 1:24:414:06Building a Browse Abandonment FlowConfiguring a flow triggered by 'Viewed Product' with filters to exclude those who have already added items to their cart.KlaviyoTrigger emails from behavior / events
  15. 1:28:477:56Creating an Abandoned Cart FlowSetting up a flow triggered by 'Added to Cart' and explaining the difference between cart abandonment and checkout abandonment.KlaviyoSet up an abandoned-cart flow (ecommerce)
  16. 1:38:5311:12Building a Post-Purchase Customer Thank You FlowDesigning a flow triggered by 'Placed Order' that uses conditional splits to distinguish between first-time and returning buyers.KlaviyoSet up a post-purchase / win-back flow
  17. 1:53:203:16Creating a Sunset Flow for Unengaged SubscribersSetting up an automation to re-engage or suppress subscribers who haven't opened emails in a long period to protect sender reputation.KlaviyoImprove deliverability / avoid spam
  18. 1:57:472:53Creating and Scheduling an Email CampaignThe process of starting a new campaign, selecting recipients, and navigating to the drag-and-drop editor.KlaviyoSend a broadcast campaign
  19. 2:34:4411:34Importing Custom Designs into KlaviyoDemonstration of taking sliced images from Figma, compressing them, and assembling them into a responsive email within the Klaviyo editor.KlaviyoDesign a newsletter / email (drag-and-drop editor)
  20. 2:49:395:43Building an Engaged Customer SegmentUsing the segment builder to define 'Engaged 120 Days' based on email opens, clicks, and website activity.KlaviyoSegment the list
  21. 3:05:320:33Bulk Suppressing Unengaged ProfilesShowing the shortcut in Klaviyo to suppress all current members of a segment to clean the email list.KlaviyoTag & manage subscribers
  22. 3:22:321:32A/B Testing Campaign Send TimesSetting up a send-time split test to determine which hour generates the highest 'Placed Order' rate.KlaviyoA/B test a campaign
  23. Watch “Klaviyo Email Marketing FULL COURSE 2026 ($300M Generated for Shopify eCommerce)” →

Create an email signup / subscription form

  1. 5:403:13Setting up a Klaviyo signup form and targeting rulesThe creator demonstrates how to create a new signup form in Klaviyo, selecting the list, and configuring targeting behaviors like exit intent, time delays, and page exclusions.Emiel Dingemans from Magicianly | Email Marketing
  2. 8:535:12Designing a high-converting popup in KlaviyoA step-by-step walkthrough of the Klaviyo form builder, showing how to add logos, edit headlines, style input fields, and remove the close 'X' to reduce friction.Emiel Dingemans from Magicianly | Email Marketing
  3. 19:422:45Optimizing Klaviyo forms for mobile devicesDemonstration of cloning a desktop form to create a mobile-specific version, adjusting button heights, font sizes, and teaser styles for smaller screens.Emiel Dingemans from Magicianly | Email Marketing
  4. 9:432:23Building and Targeting Signup FormsShows the creation of popups, flyouts, and embedded forms, including multi-step collection, mobile optimization, and behavioral triggers like exit intent.Business Solution
  5. 26:428:36Designing a High-Converting Signup FormCurrentUsing the form editor to customize headlines, input fields, CTA buttons, and success pages while removing friction elements like the 'X' close button.Emiel Dingemans from Magicianly | Email Marketing
  6. 37:101:58Setting up a Signup Form TeaserDemonstrating how to create a persistent 'teaser' tab that allows users to reopen the signup form after closing it.Emiel Dingemans from Magicianly | Email Marketing
  7. 39:083:37Optimizing Signup Forms for MobileCloning a desktop form and adjusting button sizes, font sizes, and input field heights specifically for mobile users.Emiel Dingemans from Magicianly | Email Marketing
demobook

Show, don’t tell.

Categories

LaunchesEmail MarketingImage Generation & EditingMusic & AudioSales TechVideo & Animation

Trends

AI Fruit Video

About

SubmitAboutPrivacyTermsContact

© demobook.co