I’ve got a little problem with my contact form, it’s pretty long, so if the browser isn’t tall enough, instead of continuing to scrolling through it, the form just stops.
Does anyone know a solution for this?
Thanks!
How to test
If you scroll down and hit the button ‘Let’s make creative sparks fly’ you’ll see it.
The issues with using position absolute, is that then the modal opens at the top of the page, and the user has to scroll up to see it. Is there a way to use absolute, but have the modal open in the location the user is on?
Ah, you’ll want to make sure it’s contained within a position: relative element, like the button for example. Because the absolute position is based on its relative parent, it will appear at the location of the button press.
Correct, however in your case you will need to remove the modal from the section element as it won’t allow you to put a section within another section. The container inside can work as the absolutely positioned element, however you can also use a div if you’d like more granular control over the responsive behavior (since containers come with their own styling).
I’ve included a screen capture below of the changes to get it positioned relative to the button (in this case, the button’s containing div) as well as a couple other minor fixes.
Oh my gosh that is stellar, thank you so much for the video walk through!!
It’s about 10pm here in the UK now and I’m definitely not a night person, so I’ve switched all my buttons to go to a contact page for now (as I needed to have that up at least), and I’ll give this a go tomorrow when I’m fresh.
Hi, I’m wondering if you could help me with a similar issue I am having.
I have been trying to figure out something very similar on the website I am building. I created a fixed pop-up form on my site based on a Webflow tutorial and it works but the background on the form scrolls, not the actual form so when people click to fill it out they can’t see the entire form nor can they click to submit it.
Do I have to try something along the lines of what you explained in this topic? Change my form to relative?
This is a bit off-topic from the original thread, but basically you’ll need to set the popup container to overflow: auto so that content extending beyond the fold is “scrollable”.
I answered a very similar question the other day that you can reference here, however if you’re still having issues feel free to shoot me a DM and I’d be glad to help you further
Thank you so much! Could you please reupload the video? I have exactly the same issue I fixed thanks to your video before but can not seem to do it again now, have been struggling for an hour now