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.
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.
The two variants default and success of the form card component.
The two variants default and success of the form card component.
The two variants default and success of the form card component.
