Webflow sync, pageviews & more.
NEW
Answers

How can I make my Webflow form block's success state display itself with the form elements still visible and the success message below it? I have done this in the past through custom code but can't find it now.

To make the success state display itself with the form elements still visible and the success message below it in Webflow, you can follow these steps:

  1. Add a "Success Wrapper" element: Inside your form block, create a new section or div element and give it a meaningful class name, like "success-wrapper". This element will wrap the form elements and the success message.
  2. Set the initial display for the success wrapper: By default, set the display property of the success wrapper element to "none". This will hide it initially.
  3. Add a "Success Message" element: Within the success wrapper, create a new element for your success message. You can use a text element or any other element you prefer to display the success message. Style it according to your design preferences.
  4. Create a Form Submission Interactions: Select your form block and go to the Interactions panel. Click on the "+" icon to create a new interaction for your form submission.
  5. Set up the Form Submission interaction: In the interaction settings, choose the "Form submission" trigger. This will ensure that the interaction is triggered when the form is submitted successfully.
  6. Show the success wrapper: In the interaction settings, select the "Affect different element" option and choose the success wrapper element you created earlier. Set the display property of the success wrapper to "block".
  7. Hide the form elements: In the same interaction, select the form elements you want to hide during the success state. Set their display property to "none".
  8. Preserve the form data (optional): If you want to preserve the form data in the success state, make sure to enable the "Preserve form data" option in the interaction settings.
  9. Customize the success message: If you want to show a specific success message after form submission, you can either use a static text element within the success wrapper or dynamically display a success message by binding it to a form field value or using custom code.

By following these steps, you can create a success state for your Webflow form block where the form elements are still visible, and the success message is displayed below them. Remember to style the success message and the success wrapper according to your design preferences.

Rate this answer

Other Webflow Questions