Is there a way to create a form in a fixed position using Unbounce without fancy coding or CSS?

Brad_Down

I would like to have a form in a fixed position on the screen as the rest of the content scrolls down. Is there a setting for this or does it require so CSS trickery?

6 replies

Amit_Zala

Hi There

I’m not sure that is possible ? It may cause issues with the page depending in the length of the page - and how would this transpose to a mobile version too ?

However I guess if you had a page with one page section other than a header and footer - maybe this could work.

Here’s a great link I used to help with sticky headers/footers - /topics/creating_a_fixed_header_menu

You might find some help there - but I’m not sure if what you’re asking is possible - but I would certainly like to know how if it is!! 

Brad_Down

Did it! Definitely took some trickery though.

I would highly suggest to Unbounce that they include this as a setting and figure a mobile responsive option to make static. This is becoming a pretty common technique for landing pages.

http://go.burstsms.com/free-consultation/

Javascript:

CSS:



.stick {

    position: fixed !important;

    top: 0 !important;

    z-index: 10000 !important;

}

Custom HTML:

Carter
Rank

That is awesome Brad! Definitely taking note and adding to the product backlog. Thanks for sharing!

D

Hi,

I hope you don’t mind me taking a look as this seems like a cool idea if it can work. 

I wanted to let you know however though that the form partially blocks some of the copy on an ipad in landscape mode and on my android phone, the form completely covers the copy and a lot of the text is completely scrambled on my mobile also. 

Not sure if you had got to test it on different mobile devices so I wanted to let you know.

So for mobile and tablet use the page really needs some work 😉

J

Super cool. Looks like there might be a few little bugs to squish (things get shaky if I resize the page) but overall very handy. Great work!

Amit_Zala

Bookmarked !

Reply


Terms & ConditionsCookie settings