Add a character counter

Est. Reading: 1 minute
By: Jan
Created: 03/12/2018
Difficulty: Intermediate

Add a character counter

×Warning: This tutorial was created 2232 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.

I needed a character counter for making sure my client uses the Yoast recommended amount of characters for socials shares and search results. He understands SEO gubbins is important but, every time he wrote a post with my advice in mind, he failed miserably.
So I figured I'd have to literally force him to comply with standards for his own good.
One part of that was making sure he writes his excerpts to the correct specifications.

This is only a minor change to Formidable's Word Counter, but it works well and achieves the goal.

  var s = this.value;
  s = s.replace(/(^s*)|(s*$)/gi,"");
  s = s.replace(/[ ]{2,}/gi," ");
  s = s.replace(/n /,"n");
  s = s.replace(' ', '')
 document.getElementById("frm_field_16168_container").innerHTML = (s.split('').length) + ' characters used';

Used with html5's min length and max length, you can ensure a certain amount of characters are submitted though a field in the form.

Leave a Reply

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community