Pop-Up Form, doesn't scroll to bottom

Hello,

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.

Hi

Your link is broken :slight_smile:

Strange, it’s working for me just fine on multiple devices!

Hi

That’s what I get when clicking the link

Thank you – turns out that’s a new problem! ha!

Here’s a test link:

https://preview.webflow.com/preview/kaitlyns-test?utm_medium=preview_link&utm_source=designer&utm_content=kaitlyns-test&preview=aa45a22f8365aeaee7d9d9b7ffcf1d68&mode=preview

Nothing is happen when you hit the button :slight_smile:

Sorry, that’s also so strange, button working fine at my end.

https://www.laikinstudio.com/brand-design

All of the buttons on this page should go to the same place.

I can’t speak for the issue on Safari, but I tested it in Chrome and the position: fixed is the issue here. Try using position: absolute instead

Hi Mikey,

Thanks!

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.

Okay, I’m still fairly new to developing, so I’m going to break this down to see if this makes sense:

  • Have this form as position: absolute
  • But have that form inside a div that’s position:relative

Is that correct?

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.

https://www.loom.com/share/504caa2054304e79995ea340a6651a85

Let me know if you have any questions!

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.

I’ll let you know how I get on, thank you!

Works brilliantly, thanks so much for all your help :slight_smile:

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?

The pop-up form is linked to the button “Request Samples”
Here is the read-only link: https://preview.webflow.com/preview/1ig-print-2-3?utm_medium=preview_link&utm_source=designer&utm_content=1ig-print-2-3&preview=de43f0822336af6d9919d7803fa67609&pageId=5f6ba838f0e8653aeb01e195&mode=preview

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 :+1:

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 :frowning: