Form sliding in when clicking the CTA button


#1

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

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.


#2

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

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.


#3

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

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/


#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 :slight_smile:

Again, thanks for the heads up, Jurijs!


Popup from the right hand side
#5

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. :)

How do I create a sticky side-bar in Unbounce?
#6

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


#7

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


#8

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.


#9

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


#10

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


#11

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


#12

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


#13

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?


#14

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? 


#15

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


#16

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


#17

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

Hope this helps!


#18

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?


#19

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.


#20

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! :slight_smile:

Tip of the cap,

Joe