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.
TL;DR
- Open your Webflow project and navigate to the Designer to locate the form block you want to adjust.
- Ensure the Success message element is visible by setting its display setting to Block or Flex and adjust its margins for spacing.
- Add custom CSS in Project Settings to ensure the Success message displays correctly after form submission.
- Publish your project to apply the changes live.
Adjusting the Webflow form block's success state to display alongside the form elements involves some CSS manipulation within the project settings. Here's how you can achieve this:
1. Access Your Webflow Project
- Go to your Webflow project dashboard and open the project where you want to make the changes.
2. Open the Page with the Form
- Navigate to the Designer and select the page that contains your form block.
3. Modify the Form and Success Message
- Select the form block you want to modify in the Designer panel.
- Look for the Form element in the Navigator panel, then find its child Success message element.
4. Style the Success Message
- Click on the Success message element and ensure that its Display setting is not set to “None” (ensure it's visible for styling purposes).
- In the Style panel, do the following:
- Set it to Display Block or Flex to ensure it lines up below the form fields visually.
- Adjust margins or padding as needed to ensure appropriate spacing from the form fields.
5. Customize with CSS for Continuous Display
- Add Custom Code to your project settings if you need further customization.
- Go to the Project Settings, then Custom Code under the “Head Code” section and add:
```css
<style>
.w-form-done {
display: block; / Ensure it's visible /
}
.form-class {
margin-bottom: 20px; / Adjust spacing so success is seen below /
}
</style>
```
- Update
.form-classwith your actual form class if different.
6. Publish Your Changes
- Publish your project to see the changes live on your site.
Summary
To display your Webflow form's success state below the form elements, adjust the Success message to display block in the style settings and use custom CSS as necessary for layout adjustments. This configuration allows both form elements and success message to be visible simultaneously when users successfully submit a form.