Show pop up div on form submission

Design help Animations & Interactions
1

I have a hidden div block that I want it to show when a form is submitted. I currently have the form submission button set to show the pop-up which works but I only want it to show when the required fields on the form are filled out and the form is correctly submitted.

That way, if someone doesn’t fill out a required field in the form, they won’t think that they submitted it and move on.

Any ideas how to do this?

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

2

You could write some custom code to listen for the form’s submit event:

I don’t think you can do it without some custom code.

If you share your website / READONLY link we can tailor the code to what you have.

3

That would be awesome! Heres the link

https://preview.webflow.com/preview/cohere-now-5caa2d?utm_medium=preview_link&utm_source=designer&utm_content=cohere-now-5caa2d&preview=fd77c36cf80c7925f329ab0dca268641&workflow=preview

4

Hi @tenzin11,

The most basic way to do this is remove the interaction from the submit button and add the following code to Page Settings > Custom Code > Before </body> tag:

<script>
Webflow.push(function() {
  $('form').submit(function() {
     $('#feedback-pop-up').show()
  });
});
</script>
1 Like
5

I added the code and removed the trigger and it worked when i typed in a valid email but when I typed in a fake email to test it, the form still popped up. I want to pop up to only show when the form has been submitted. Is that supposed to happen with the code?

6

try doing a validity check first and let me know if that works. Code would look like this:

<script>
Webflow.push(function() {
  $('form').submit(function() {
     if (this.valid()) {
       $('#feedback-pop-up').show()
     }
  });
});
</script>
7

By validity check do you mean submitting an invalid entry into the email form?