Skip to main content

[How-to] Add a Dynamic Character Counter to Your Form


  • Former Unbouncer
  • 1556 replies

Hi folks!

Just wanted to share a quick tip about how to add a Dynamic Character to a form field on your Unbounce landing page. This has been asked a few times in our Community, so I figured I would make a quick tutorial to show how itโ€™s done. 

By using a dynamic character counter, you can restrict the number of characters that a user is allowed to submit. This can be handy if youโ€™re using third party integrations that enforce a character limit for things such as comment fields and usernames. 

Weโ€™re going to be using a variation of a Character Counter script to achieve this. Check out this demo page to preview the character counter in action: 
http://unbouncepages.com/character-counter-demo/

Note: This code wonโ€™t actually disable someone from submitting the form if they are over the character count, but it will deter them from submitting.


๐Ÿšจ

Please note: 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.


Step 1:
Add an HTML widget to your page, and paste the following code:
<div id="textarea_feedback"></div>

Note: Be sure to place the widget directly under the form field, as this is where it will be rendered on page.

Step 2:
Jump into your javascript console, and paste the following code:

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
     <script>
     jQuery(document).ready(function() {
        var text_max = 99;
        jQuery('#textarea_feedback').html(text_max + ' characters remaining');

        jQuery('#email').keyup(function() {
            var text_length = jQuery('#email').val().length;
            var text_remaining = text_max - text_length;

            jQuery('#textarea_feedback').html(text_remaining + ' characters remaining');
        });
    });
    </script>

Step 3:
Double click on your form, and find the Field Name and ID of the field youโ€™re applying the character counter to.

Step 4: Jump back into your javascript console, and replace #formfield with the Field Name and ID from step 3 (example: in the scenario above, I would replace it with #email )

Step 4:
Save your changes and hit publish to see it in action!


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

7 replies

Joe
  • 263 replies
  • August 13, 2015

Solid walk through, Justin!  Always appreciate your insights and can see how this can come in handy. 

Thanks,

Joe


  • Author
  • Former Unbouncer
  • 1556 replies
  • August 17, 2015

Thanks Joe! If you have any tips to share with fellow Unbouncers, be sure to share them as well. :) 


Alex_Bur
  • 2 replies
  • December 6, 2016

Hey Justin, Thanks for this info, super helpful. However, is there a way to actually enforce a character limit via JS?


Vic
  • Former Unbouncer
  • 23 replies
  • December 6, 2016

Hi Alex - Victor here from Customer Success,

I have a little script here that will help you limit the character number in any field on your form:

<script> 
$(document).ready(function(){

//Change 'email' for the ID of your form field and '10' for the max number of characters allowed. 
    $("#email").attr('maxlength','10');
});
</script>

Please let me know if you have any questions and have a great day!


  • Author
  • Former Unbouncer
  • 1556 replies
  • December 6, 2016

Whoa, awesome @Vic! ๐Ÿ‘


Alex_Bur
  • 2 replies
  • December 6, 2016

You just made my day Vic!! Thank you so much!


Forum|alt.badge.img
  • 1 reply
  • September 29, 2022

Hi - just jumping on this thread - I wondered if anyone had figured out how to limit word count, rather than character count, for a form question?

 

Thanks, Leah


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings