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

Jurijs_Burcena

Thanks for sharing this, Rolf.

You say “really well”, are we talking about double digits improvements in conversions here? Trying to figure out if this is worth pursuing 🙂

Also, one thing I noticed – when I press ‘Get Help With Landing Pages’ on your webstie, nothing happens at all. Oops! The modal window only appears if I click on the CTA buttons below the fold. Thought you should look into that.

Finge
Userlevel 6
Badge +4

When I say works very well it isn’t backed with numbers as I should. Hence my desire to test on a landing page. The page generates a lot of leads, I guess that’s what I mean. Wordpress is not the greatest environment for these kinds of tests 🙂

Thank you so much for tip on the CTA. This is really bad! On it!

Very strange though - the Norwegian version of the page works just fine
http://conversionlab.no/nb/

Finge
Finge
Userlevel 6
Badge +4

Well, look at that! None other than Optimizely broke my CTA…

As soon as I turned off the Optimizely experiment running it works again. Yet another reason why this should be tested in a proper environment for testing, Unbounce 🙂

Again, thanks for the heads up, Jurijs!

Finge
Johnny_Opao
Userlevel 3

Hey Finge! It should work fine with Unbounce pages. I have it working on the test page below:

http://unbouncepages.com/pageslide/

PageSlide has some setup instructions on their GitHub page which you can follow along almost step by step:

https://github.com/srobbin/jquery-pag…

You’ll have to download and host following pageSlide files yourself:

jquery.pageslide.css
jquery.pageslide.min.js

Otherwise you can copy the javascript and css code within those files and paste it into your Unbounce javascript/css boxes

No need to host/copy the jquery 1.7.1 script (jquery.min.js) yourself as it’s already hosted by google. Just reference it into your landing page like so:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

You’ll also want to uncheck the ‘jQuery 1.4.2’ box on the javascript manager.

Once you have those files referenced/copied in simply trigger the function by referring to your buttons ID like so:

  $("#lp-pom-button-9").pageslide({ direction: "left"}); <br /><br /> </script>```   
 
That's about it! If you need me to clarify anything further let me know. :)
Finge
Userlevel 6
Badge +4

Thanks Johnny! This is awesome, thank you so much for doing this!!

Seem from the code that the form sits on a separate page. Did you try and accomplish this with the form on the same page in a hidden div? Perhaps that’s not possible.

Look forward to testing this! Will make sure to run an A/B test to see wether the ‘regular’ on-page form or the slide-in form works better. Either way it’s nice to have the option of using this 🙂

Finge
Johnny_Opao
Userlevel 3

Hey Finge! I did test it with our forms div on the page. Unfortunately It doesn’t seem to play well with how our forms are setup.

If I do manage to get it working smoothly with our form on the same page i’ll let you know 🙂

Finge
Userlevel 6
Badge +4

Hi Johnny. I have not had the chance to implement this myself yet, and now I am struggling. Any chance you can share the test you made as a template? Feel free to email it to me.

Finge
Johnny_Opao
Userlevel 3

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

J

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

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

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

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

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

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
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 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
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! Will let you know as soon as it’s been tested and concluded 🙂

Finge
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.

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.

A

Hi Finge,

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

Thanks!
Ann

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

Reply


Terms & ConditionsCookie settings