[How-to] 3 Easy Scripts to Supercharge Your Unbounce Convertables

  • 16 November 2016
  • 12 replies
  • 187 views

Userlevel 6
Badge +4

To celebrate the launch of Unbounce Convertables, we’re sharing 3 easy scripts to help you get the most out of your new overlays.

Our team at ConversionLab was one of the first to gain access to the Convertables beta. Over the last three months, we’ve launched numerous overlays across a number of different websites, and even deployed a high-converting overlay on our own site.

We’ve been seeing a ton of conversions so far, but in the spirit of pushing the envelope, we’ve discovered a few small tweaks that helped push our conversion rates even higher.

1. Add Hint Text to Your Form
2. Add a Custom Icon to Your Form
3. Add Unique On-Click Form Styling

You can see a demo of these scripts in action here: http://hello.conversionlab.no/convertables/


How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Tip #1 - Add Hint Text to Your Form

  1. Click the JavaScript tab at the bottom left of the page builder
  2. Paste this Javascript
  3. Customize the field names and placeholder values to match the fields in your form as show in the below screenshot

https://unbounce.zendesk.com/attachments/token/7iUns1hKtHdYHVmc1o6DfYHqu/?name=placeholders.png


Tip #2 - Add a Custom Icon to Your Form

  1. Upload the icons you want to use to somewhere the icon image can be accessed using a URL. E.g. we have this on our website, located at: http://conversionlab.no/assets/email-light.png
  2. Click the Stylesheet tab at the bottom left of the page builder
  3. Paste this CSS script
  4. Match the field name according to your form field name
  5. (Optional) Specify a different icon for “focus” state, or keep the same icon

Tip #3 - Add Unique On-Click Form Styling

  1. Add a border to your form field with your desired width. Use the same color as your form field if you want it to be “invisible”
  2. Click the Stylesheet tab at the bottom left of the page builder
  3. Paste this CSS script
  4. Change the colour code to match your preferred highlight color

Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀


Voila! You now have a supercharged Unbounce Convertable that should drive even more conversions.

Did you find these scripts useful? Or do you have any tips of your own? Sound off in the comments below and show us what you’re working on! 😀


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


12 replies

This is awesome @Finge! Your Convertables are by far some of the best I’ve ever seen. :clap:

Userlevel 7
Badge +4

Thank you @Finge 🙂 very pretty looking (you and the scripts).

Woah! Well done @Finge 🙂

This is awesome! Absolutely love these updates.

Userlevel 6
Badge +1

@Finge Nice stuff!

I’ve been using various Mark Wainwright scripts for a while now. He has some nice stuff for Unbounce.

We put this together >>> http://unbouncepages.com/spice-up-unbounce/ not long ago to show our clients what extra functionality we can add to their LPs. I should add you field icon - super nice!

Userlevel 6
Badge +4

Thanks @Oli_Gardner! Loved your blogpost on the Convertables!

Userlevel 7
Badge +1

Userlevel 6
Badge +4

Thank you, @Justin! That’s very kind!

Hi Rolf-Inge,

Great scripts, I’ll be putting these to work right away!

Do you have a script that turns a button or link into a close button? I
basically want to mock the functionality of the X in the top right corner,
except have it within my form.

Thanks,
Glenn

I think our friend @Hristian is cooking something up… keep your eyes peeled to the Community next week. 😉

Userlevel 7
Badge +4

@Finge big thanks for this. Such an easy script to put in place and makes our convertables so much prettier <3!

Userlevel 6
Badge +4

Hi everyone!

In the original post we showed an example where you can add an icon to your form fields, and http://conversionlab.no/assets/email-light.png was used as an example.

It seems like many of you has implemented this tip using that exact image 😂

This is just to inform you that I will be deleting that image from the server, and you need to find a replacement or host the image yourself. For your convenience I have attached the image file here with an alternative dark version 🙂

PS. There are far better looking email icons out there than this, but this just in case you need it.

email-dark email-light

Reply