Unusual Waitlist Form in Framer

Copy component

Unusual Waitlist Form in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Unusual Waitlist Form in Framer

This is a unusual waitlist form recreated in Framer from Wonder’s original work. Remix the project to explore how forms like this can be built in Framer, or copy the component directly into your own projects.

image of Nandi Muzsik
image of Prianca S.
Image of Wonder

Created by

,

and

Gradient welcome card with stamps and confirmation message
Gradient welcome card with stamps and confirmation message
Gradient welcome card with stamps and confirmation message

About the resource

To create this waitlist form, I started with a native form and customized it to match the desired design. Since the card flips on button submit, I first designed the front face of the card and turned it into a component, then added a back face. Both faces were wrapped within a faces layer, which I placed inside a 3D space using 3D transforms, with backfaces hidden.

Once the default variant was set, I created another variant for the flipped state where the back face becomes visible. To give the back face a 3D hover effect, I added the 3D hover component and linked it specifically to the back face layer in the default state.

Finally, I connected the interaction so that on selecting the success option—once the input fields are filled and the button is submitted—the form switches from the default to the success variant, smoothly revealing the back face of the card.

About the resource

To create this waitlist form, I started with a native form and customized it to match the desired design. Since the card flips on button submit, I first designed the front face of the card and turned it into a component, then added a back face. Both faces were wrapped within a faces layer, which I placed inside a 3D space using 3D transforms, with backfaces hidden.

Once the default variant was set, I created another variant for the flipped state where the back face becomes visible. To give the back face a 3D hover effect, I added the 3D hover component and linked it specifically to the back face layer in the default state.

Finally, I connected the interaction so that on selecting the success option—once the input fields are filled and the button is submitted—the form switches from the default to the success variant, smoothly revealing the back face of the card.

About the resource

To create this waitlist form, I started with a native form and customized it to match the desired design. Since the card flips on button submit, I first designed the front face of the card and turned it into a component, then added a back face. Both faces were wrapped within a faces layer, which I placed inside a 3D space using 3D transforms, with backfaces hidden.

Once the default variant was set, I created another variant for the flipped state where the back face becomes visible. To give the back face a 3D hover effect, I added the 3D hover component and linked it specifically to the back face layer in the default state.

Finally, I connected the interaction so that on selecting the success option—once the input fields are filled and the button is submitted—the form switches from the default to the success variant, smoothly revealing the back face of the card.

Gradient waitlist UI flow with form and success states

The two variants default and success of the form card component.

Gradient waitlist UI flow with form and success states

The two variants default and success of the form card component.

Gradient waitlist UI flow with form and success states

The two variants default and success of the form card component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Stacked card UI design with article preview

    Card Stack Hover Animation in Framer

    Component

    Stacked card UI design with article preview

    Card Stack Hover Animation in Framer

    Component

    Stacked card UI design with article preview

    Card Stack Hover Animation in Framer

    Component

  • Animated prism effect with glowing light rays

    Animated Prism Effect in Framer

    Component

    Animated prism effect with glowing light rays

    Animated Prism Effect in Framer

    Component

    Animated prism effect with glowing light rays

    Animated Prism Effect in Framer

    Component