Unbounce: How to Add a Dynamic Character Count

Hey all, in this post I show you how to add an Unbounce dynamic character count.

You can keep reading or just take a look at this video here:

It’s a neat little addition to your page if you want to make sure that people stick to the character limit and don’t exceed it.

No, nothing will happen if the person types more than the character limit and they can still hit submit.

However it can still deter some people from adding way more characters than necessary and can make it easier for you to manage if you are gathering many different responses and don’t want to read long ones.

The process is super simple and I’ll explain it in steps briefly here:

Step 1: Add the HTML element where you’ll have the character count

Just drag and drop the HTML element from the left-hand side to your page. This is where you’ll have the character counter, so make sure to put it in a place where everyone will be able to see it.

So head over to this Unbounce community page.

And copy that first code they provide you with and paste it into this HTML element.

That’s pretty much all there is to this part. You can drag and drop this element anywhere. It does NOT have to be directly undernearth or near your form field.

Let’s move on to the next step in creating an Unbounce dynamic character count.

Step 2: Add the JavaScript and change the element ID

Now head back to the URL linked in step 1 or at the top of this description and copy the JavaScript code provided.

Paste this code into the “before body end tag” section of the Unbounce JavaScript.

Here you will need to change 2 items to let the code know what form field you want this character count to correspond to.

So double click on your form fields, select the form field you want to have the character counter on, and copy whatever is in the “form field and ID” box.

This is the “ID” of the exact form field you want the character counter to correspond to.

Head back into the JavaScript code section in Unbounce and paste this ID into the code we just added.

There should be two areas saying “#email” – replace those with the new ID of the form field you just copied.

Save the JavaScript page in Unbounce and then save your page and publish (if ready).

That’s how you make an Unbounce dynamic character count!

Want to learn how to add a mobile hamburger menu to your page? Check out the previous post to learn how.

And that’s it!

👉 Free Unbounce 14 day trial + 20% off for the next 3 months

👉 Community post with the code as shown in the video

👉 My Unbounce playlist so you can find every important piece you need

👉 Check out my courses!

👉 Like my Facebook page! 

Thanks for watching, and I’ll see you in the next video!