geist mono

geist mono


Success variant

Success variant

Head to the desktop site to copy.




Feb 14, 2024




  • Swaps variant on successful form submission using Framer's built in transitions and effects. It listens for the

  • Insert Framer's Input or Formspark component to your Canvas, then make a component out of it.

  • Name your variants 'A' ( for your default variant) and 'B' (for success) — these are case sensitive and must match the variant names in the override exactly.

  • There are two overrides: withChildInput is applied to your form inside the component you created; withParent is applied to the component on your Canvas.

  • There's also a withChildInputFormspark function that has a delay of .5s to account for Formspark component's built in success animation. Edit this by editing the value 500 (in miliseconds).

  • To use multiple forms on the same page, you'll need to duplicate the override into a new file.

  • *Needs more testing before it's rolled out for all form providers.


How do I add code overrides?