The Input Component

The Input Component brings native email signup forms to Framer, complete with service integrations and custom success states. This tutorial walks through connecting to popular email services, styling your forms to match your brand, and creating engaging thank you pages that keep visitors in your site flow. Benjamin demonstrates how to drag and drop the component from the Forms section, connect it to services like Loops, MailChimp, FormSpark, or GetWaitlist, and customize everything from layout to typography. You'll see how to create focus states, add subtle animations, and most importantly, redirect successful submissions to custom thank you pages designed right in Framer. The component supports multiple layout patterns, docked buttons, custom borders, and motion effects to match any design system. Demo: https://input.framer.wiki/ 0:00 Introduction 0:23 Adding the Input Component 0:42 Connecting email services 1:08 Customizing layout and typography 2:00 Styling borders and focus states 2:47 Adding appear effects 3:08 Setting up redirect on success 3:38 Testing the final form Topics covered: email newsletter forms, web development forms, responsive form design 🌞 Start for free: https://framer.link/yt 📚 Learn more at: https://framer.link/yt-academy 💎 Join the Community: https://framer.link/yt-community 🎉 Follow on X: https://framer.link/yt-x