Unbounce: How to Add a Dynamic Character Count

👉 Free Unbounce 14 day trial + 20% off for the next 3 months: https://unbounce.grsm.io/ivan?sid=u-dynamicchar-1

👉 Community post with the code as shown in the video: https://community.unbounce.com/t/how-to-add-a-dynamic-character-counter-to-your-form/2073

👉 My Unbounce playlist so you can find every important piece you need: https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

👉 Check out my courses!: https://www.ivanmana.com/all-courses

Hey all, in this video I show you how to add a dynamic character count to your Unbounce page.

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.

Head back to the URL I linked above:

👉 https://community.unbounce.com/t/how-to-add-a-dynamic-character-counter-to-your-form/2073

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.

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

And that’s it!

👉 Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

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

source