demobook

Klaviyo: Optimizing Signup Forms for Mobile

Demo summary

Cloning a desktop form and adjusting button sizes, font sizes, and input field heights specifically for mobile users.

Step-by-step

  1. Clone your existing desktop form and rename it for mobile.
  2. Navigate to Targeting and Behavior and select Mobile only.
  3. Uncheck the setting for 'When visitor is exiting the page' to avoid unreliable mobile triggers.
  4. Go to Styles and increase the Input Field Height and text size for better readability.
  5. Increase the Call to Action button height and font size to accommodate thumb clicks.
  6. Add padding or white space between elements to prevent a cramped layout.
  7. Adjust the Teaser shape and positioning to ensure it does not overlap with chatbots or other site widgets.
  8. Increase font sizes on the Success page to ensure they are legible on small screens.

Options

  • Change the teaser shape to a circle or corner icon
  • Add images to the mobile form
  • Adjust side padding on the success page

Watch out for

  • Side images from desktop forms are not possible on mobile layouts.
  • The 'exit intent' trigger is unreliable and annoying on mobile devices.

Tips

  • Create two separate forms for desktop and mobile to optimize the user experience for each.
  • Set input field heights to around 70 and button heights to 80 so users with 'big fingers' can easily click them.
  • Test the teaser positioning to ensure it doesn't intervene with other site elements like chatbots or loyalty programs.
  • Use a minimum font size of 20-24 for mobile text to ensure it is easily readable.

Highlights

this is basically how you convert the desktop form into a mobile form... these are really good to go

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 FormUsing 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 MobileCurrentCloning 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 FormUsing 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 MobileCurrentCloning a desktop form and adjusting button sizes, font sizes, and input field heights specifically for mobile users.Emiel Dingemans from Magicianly | Email Marketing