Streaming live at 10am (PST)

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
laikinstudio.com
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.

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.

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: