Close / Hide Form Automatically On Submit

Hey guys,

I have a Fixed Div that remains on the website all the time. Inside this DIV there is only one element - Form.

Can I somehow add an option to close / hide this whole DIV once the form inside this DIV was submitted?

Thank you

Here is my public share link: LINK
(how to access public share link)

You can do this with custom code
Or maybe just a good ol’ click trigger in the submit button that hides the entire div’s content once you click it, maybe add a little delay and transition so that it doesn’t just abruptly disappear. You could also add a text element (eg. thank you for your submission, to send another message, refresh this page) that shows up when the div’s content is gone.

A read-only link would be helpful.
Cheers

Hi Kimmy,

Thank you for the answer. I got the idea. Thanks. Haven’t thought of adding it simply as an interaction on the button. I did it and it worked well but the downside of this is that it would remove the form even if you just click on this button without submitting information. Even if for example the email field is mandatory, and you didn’t fill it, pressing on the button would remove the form from the screen. So if someone clicked on the button by accident, the form will disappear.

Do you think you have other ways with custom code?

Thank you.

https://preview.webflow.com/preview/formblockclose?utm_medium=preview_link&utm_source=designer&utm_content=formblockclose&preview=34d5f88d66b7af2b403f54ffd63eb114&pageId=6042c6df84622c950c705c3b&mode=preview

There are ways to achieve that with custom code, yes. Sadly, i’m not able to fully provide you with a solution because i’m not an expert in JS.

I need the same thing.
Once the user submits their data, then this form should not be visible again. Even if they refresh page or revisit it again.
I know this can only be done with JS. Can anyone help with that?

Would be much appreciated. :pray: :pray:

I’m not an expert in JS, but my understanding is that you could use Cookies to ensure that the form is not visible when a user refreshes or revists the page after form submission. I.e. You’d generate a cookie on form submission, which would then be checked on page load & if the cookie exists then you can set the page not to display the form :pray:

You could use this example from Finsweet as a reference point :slightly_smiling_face: It’s slightly different than what you’re after, but similar enough to point you in the right direction:

They also have a Cookie Consent UI you can use if needed as well:

1 Like