Form CSS Advice

I’ve added a form behind the header and it works great on Desktop but not so much on Mobile/Tablet view.

https://preview.webflow.com/preview/assembled?preview=218dbe8adffccdbdf32e33b6b3fceb68

I need it to do 2 things.

  1. If you are at the bottom of the page. It moves to the top then the header will slide down revealing the form.

  2. Allow for user to scroll down the form, not the body of the website.

I Fixed issue 2. Any ideas of how to fix the #1?

For 1 simple use the scroll into view interaction that affects different element. :wink:

Do you have an example page?

Sorry. I am brand new to Webflow. Can you be more specific?

Hi @colourfulchris, it is possible to setup a scroll interaction, so that when the home section is not shown, the form is hidden, and when it is in view, the registration form shows.

I think though, you are trying to have the form appear only after reaching the bottom of the page, and to do that, you would need to have a link to click on to trigger the form so that it does not open until the user click a CTA button.

Would that work for you? If you use a CTA button, you could create one interaction for the form, and then have multiple CTA buttons on the page, linked to that interaction showing the form.

The kind of interaction needed would be a “click to show and hide” interaction, learn more about that here: https://interactions.webflow.com/click-to-show-content-video

Well my thought process was this:

User comes to site
User scrolls to bottom reviewing the website
Sticky Header follows user and has one call to action.
“Register Free” btn allows for scroll to the top and then reveals registration section.

Will the solution above work for what I was trying to do?

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