Form sliding in when clicking the CTA button

Finge
Userlevel 6
Badge +4

I have been playing with the idea of testing Pageslide js for the form on a landing page.

My goal is to put the form in a modal window that slides out from the side when you click a CTA on the page using this js
http://srobbin.com/jquery-plugins/pag…

I have successfully implemented this on my website - and it seems to be working really well.

I just haven’t figured out how to replicate the effect in Unbounce, so thought I’d share with you guys, perhaps someone knows 🙂

Feel free to see the effect I am talking about here
http://conversionlab.no

Click any of the CTAs to see the form sliding in from the side.

Finge

32 replies

D

Hi! Can someone share the scripts for this? Thanks!!

D

Has anyone used this for mobile ALSO could you copy/paste the script on the post? Thanks!

J

Hey guys!

I really would love some new fresh links to this kickass feature 🙂
Can you help me out?

J

We’re pretty big fans of @Finge as well, @MaxG_BA. 💙

MaxG_BA

Finge,

Thank you very much!. I’m new to Unbounce and I’ve been learning a lot here in the forum and you are one of the persons I follow the most. Thank you for your time and sharing your knowledge.

Max

Finge
Userlevel 6
Badge +4

I have sendt you a link as DM 🙂

Finge
MaxG_BA

Hello to all,

I love this script and I went to the developer link http://srobbin.com/jquery-plugins/pageslide/ and github page at https://github.com/srobbin/jquery-pageslide#setup and both links are dead. Could someone please share this script?. Thanks!.

Finge
Userlevel 6
Badge +4

@johnny, do you remember this topic. Do you know how I could att the form content to a hidden div on the SAME page insteasd of adding the form content as an iframe? Something like we had to do with lightboxes prior to the built in lightbox feature?

Finge
Finge
Userlevel 6
Badge +4

Make sure the page you are feeding into the iframe is narrow enough. For me it was a bit trial and error to get it working 😉

Finge
A

Hi Finge,

How did you hide the vertical scroll bar? I’m facing a similar issue.

Thanks!
Ann

J

I’m a big fan of Finge’s work. The first time I saw the form popping in from the side my jaw dropped. Such a great idea! Can’t wait to see what affect this has on conversion rates.

Stuart_Mitchell

Sorry to hijack this from 2 months ago, I just saw the demo and I really like it. I thought I’d just chime in that the horizontal bar is a knock on effect of the vertical one displaying and taking up the extra screen real estate that then forces it to need more width. 

What I mean is, fix the vertical and the horizontal should fix itself :O)

Really awesome page… I am so making one of these!

S.

Finge
Userlevel 6
Badge +4

Thanks! Will let you know as soon as it’s been tested and concluded 🙂

Finge
Joe

Hi Finge,

Interesting idea!  Did this end up correlating with an increase in conversion rate after testing?  Excellent hypothesis for a test at the least! 🙂

Tip of the cap,

Joe

Finge
Userlevel 6
Badge +4

Thanks for the heads up and kudos! The page is work in progress so far - and not finalized. I amd not sure why you are seeing the horizontal bar since the page loaded is only 300px wide while the slide is 320. 

What browser are you using? The vertical bar I have no idea how to remove.

Finge
Federico_Nelli

FInge, your landing is really amazing!
BTW, the second CTA in http://effekt.conversionlab.no/slide/ doesn’t work.
Is there a way to hide the scrolling bars from the form?

Finge
Userlevel 6
Badge +4

Thanks, Andrew. We accomplish this using CSS. We style each input field with it’s own id like this:

input#fieldname {  background: white url(http://conversionlab.no/assets/user-dark.png) no-repeat 18px;
}

As you can see we host the icons as image files on a specific URL that we use. I am sure there are more clever ways to do this - but this is how we did it 🙂

Hope this helps!

Finge
A

Hi Finge,

Nice page you got there with the sliding form. I have a question about the form, how did you manage to insert the icons in the fields? Are they simply put in there as images?

//Andrew

J

Definitely! We’ll keep in touch and see how things go. 

Finge
Userlevel 6
Badge +4

Yes, would love that! Let me run some testing on this first. Would be good if it’s a high performing formula before we start explaing how to implement, agree? 

Finge
J

Awesome!! This looks fantastic. 

Perhaps we could create an article that covers  how _to do this, and  _why _you decided to implement it. Also, what effect it had on your conversion rate. What do you think?

Finge
Userlevel 6
Badge +4

Hi Jurijs, never got to implement this on a landing page and for a test until now. I will be starting to test this very soon. Can keep you posted here 🙂

Finge
Finge
Userlevel 6
Badge +4

Hi Justin! Thanks to the ever so helpful Johnny I was able to create the page as planned. You can see it here http://effekt.conversionlab.no/slide/. In Norwegian though, but feel free to submit the form 😉

Finge
J

Hey guys! Any update on this page? How did it turn out? 

Johnny_Opao
Userlevel 3

I’d be happy to send that over Finge. Lookout for my email shortly

Reply


Terms & ConditionsCookie settings