Form Success State

Design help Custom code
1

Hi,

I hope you’re doing well. Please can someone help me with something?

I want my form block’s success state to display itself like the error state does: with the form elements still visible, and the success message to show below it. Now, I have done this in the past through custom code, however I can’t find it anywhere. Because of this, I know it’s possible, I just don’t know how to do it.

If someone could give advise, I’d be more than grateful. Thank you in advance!

Kind regards,

Alex

2

The default Webflow form handler handles the hide/show of the form & success/fail messages automatically, so if you’re using the default form handler you’ll be competing with that.

If you’re using your own form handler such as Basin or a webhook, you have full control over what hides and shows, because you have to do that manually.

In your case I’d say there are three options;

  • Attach a form submit handler, and when it triggers, just re-show the form body that the script is hiding. You may need a timer delay to wait for webflow.js to finish, depending on when the form is hidden.
  • Same, but instead of a submit handler, you’ll install a Mutation Observer. It will detect when the form has been changed, and re-show it.
  • Replace Webflow’s default form handler with something different, so that webflow.js no longer hides the form. You’ll need to handle the call and the response, and show the appropriate message depending.
1 Like
3

I do something similar in this screencast.

It doesn’t keep the form visible but it has all of the javascript code that controls the success / error messages as well as captures the form submit (scroll down about 2/3 of the page to find the linked code).

I don’t recall exactly what I’ve did in the past, but I was able to keep the form visible on the page while displaying a success message.

A good way to figure it out is to inspect the form element on the live site, and watch what happens to it (within the inspector) when you submit the form and it hides.

Hope that helps!

1 Like
4

Thank you for the replies!

I did this last time with a HTML imbed if that helps at all? It’s driving me crazy, as I did have this on a previous website and it’s really annoying.