I’d like to show a modal confirmation pop up when the email form is successfully completed (that reads ‘Thank you, you’re on the list’). I followed this tutorial but now the pop up shows anytime the submit button is clicked, even when it’s done incorrectly and the user is not signed up (try and enter an invalid email to see an example).
Also, on mobile, when the email is inputed, the page scrolls all the way up. What custom code/script could I implement to prevent that?
I did design the success message as you just described. My problem comes from the “Modal Wrapper” that I’d like to show when the user is successfully signed up.
I created two interactions - one for the Modal wrapper & one for the submit button - that basically says “when submit button clicked, show Modal then fades it away”. Now this happens even when the email is incorrect or empty, and I’d like the modal to appear only when I’m sure I’ve successfully collected the email.
If you only want the popup modal to show when it is a success, you need to make it inside Success message. This means when the submit button is clicked, the website first checks to see if the values inside the form are true. If value = true it will show Success message, if not it will show error message.
So how do you throw the popup modal inside Success message? Well it’s easy.
Inside your navigator, expand all on the top right side.
Drag your confirmation wrapper into success confirmation
Delete your Modal wrapper
remake the class succes confirmation to Modal wrapper
It should now show in the top right corner if you write a Email.
To make it full screen you have to sacrifice some interactions. For some reason it is fighting against the popup. (I’m not sure how to fix that)
Delete following interactions Fade Down 5 Fade Down
The popup is now full screen, but it needs a button to stop showing.
Hope this can help, although it isn’t a “full” answer.