Keeping Visitors Informed on Form Submissions

When visitors submit a form on your site, it’s crucial to keep them informed about the status of their submission. In this guide, we explore four different methods to achieve this in Framer.

Method 1: Submit Button Variants

The default submit button in Framer is equipped with several variants, such as loading, success, and error states. These variants map directly to the form’s status. To configure these states, select the submit button and navigate to the properties panel. There, you’ll find options to map each state to a specific variant. By default, loading and success states are already mapped, but you can easily add error and disabled states from the plus button. This setup provides a seamless way to inform visitors about the progress of their form submission.

Method 2: Redirect

Another way to confirm a successful form submission is to redirect the visitor to a different page. To set this up, select the entire form, head to the properties panel, and click on the redirect option. Here, you can choose a page, such as a thank you page, where the visitor will be automatically redirected upon successful submission. This method is straightforward and ensures that visitors receive a clear confirmation.

Method 3: Overlay

The third method involves triggering an overlay when the form is either successfully submitted or encounters an error. With the form selected, go to the properties panel and click the plus icon under the overlays section. You can choose between a relative overlay, like a tooltip, or a fixed overlay, such as a modal. For a success message, a fixed overlay works well. After setting up the overlay, you can add content, like a thank you animation, and ensure that the overlay appears when the form is successfully submitted. This method provides a visually engaging confirmation to the visitor.

Method 4: Form Variants

The final method is to turn the entire form into a component and create a variant for the success state. This allows for animated transitions and keeps the confirmation within the same page. Start by converting the form into a component, then create a second variant for the success state. You can hide the original form content and replace it with a thank you message or animation in the success variant. By linking the default form state to the success variant through an interaction, the form will smoothly transition when a submission is successful.

These four methods offer flexible ways to confirm form submissions, ensuring a seamless user experience on your Framer site.