Get A Feel Of The New Input Component In Framer

In this Framer Tutorial, you'll discover how to optimally utilize the new input component in Framer. Not just this, but you'll also learn to show toast or modal notifications post form submission and to redirect users to designated pages once they've submitted their email.

Getting Started

To assist you on this journey, all you'll need is a free Framer account. To get your hands on this input component, hit 'I' on your keyboard. On doing this, you'll observe an 'Insert' menu appearing on your screen's left side, whereupon inputting 'input', you'll find the component. It’s as easy as drag and drop!

Stay Updated With The New Component

This input component holds something new in store for Framer Tutorials followers. Previously, there was the form spark, but it did not permit certain functionalities. Thus, if your needs include having a name and message field, you should still opt for form spark. However, this new input component seems a better fit for everything else.

Understanding Its Unique Properties

The new input component in Framer has intriguing properties, visible in the right panel. Here, you can select different services, like Loops, Formspark, MailChimp, and Get paid list. You've to paste the respective ID provided by your chosen service into the ID slot given. For instance, Loops, MailChimp, and Gateway give you an ID, a URL, and an API key, respectively.

Shaping Success Stories

One of the most captivating features is called Success. Here, one can choose between 'Open Link' and 'Show Overlay'. Remember, 'Show Overlay’ will open the overlay assigned for the input component whereas 'Open Link' will open the link specified by you. This indeed adds to your kit of enhancing Success Stories.

Customizing Your Component

Another property allows you to customize the font of your input here. In addition to this, you also have the authority to modify the size, line height, placeholder text color, and background color. Moving ahead, one pops onto an absolute game-changer - focus state. It essentially lets you specify a focus state with a border color of your own choice, something the form spark component lacked.

The Finishing Touch

Last but not least, but you also get to control the button. Change the text on it, choose a unique font, fill it with a color you fancy, or even hide it, if you wish. More so, you even get the option to dock the button inside the input. Finally, you can also adjust padding and Shadow. All these customizability options could entirely reshape your prototypes in Framer Showcase.

Perfecting Your Overlay

Let us now switch our focus to creating a toast on submission, you have to select the 'Show Overlay' option and then add an overlay to the input field. This opens up myriad possibilities with what you want to show on the overlay. With this knowledge, you can effortlessly create amazing toast or modal notifications upon form submission. Be it building a Framer Templates or a toast upon successful form submission, this tutorial has got you covered.