No more interactions after Form is completed + Mobile Scrolling

Hi Webflow,

I’m currently building a launching page and have encountered a few issues I’d like some help with.

Here is my public share link: https://preview.webflow.com/preview/floravere?preview=8f5b61f659ed0c5731ba7aee8f46816a

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?

Any help here would be much appreciated!

Thanks!

Hello Jeremy.
Your share link isn’t working, but I can still help you anyways.

Step one
Click on your form element

Step two
Choose the settings tab and click on Success

Step three
Go into your layout tab and choose the Success message div.

Step four
Follow the tutorial.

Take a look at this page for more insight! :smiley:

David

Hi @Davidlin_ch12,

Thanks a lot for your input here :slight_smile: Here should be a valid preview link https://preview.webflow.com/preview/floravere?preview=6d5c089c9b31a3760b76bb474d740b39

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. :smiley:

David

Hi David,

A thousand thanks for spending time on this issue and coming up with this answer.

Your solutions sound very good indeed. I was concerned about the modal not fading away on its own but I guess I’ll have to pass on that :slight_smile:

Thanks again,
Jeremy

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.