Recently we had a client request to limit characters on the comments textarea of a Pardot form. After searching high and low, we did find one beneficial blog on the subject, but it did not suit our purposes exactly, so we used that to build on and created our own. You can find it here written by Allie Cappetteli : https://thespotforpardot.com/2019/10/09/adding-character-limits-to-pardot-form-fields/
Let’s get started then!
Below you will find the code for this solution. The character limit is set to 10 (on line 8), which you can change to whatever you care to. Our use case called for 1000 characters.
Add the code to your Pardot form
1. Open the form editor
2. Navigate to the ‘Look and Feel’ editor page
3. Select the ‘Below Form’ section and click the ‘Source’ icon
4. Copy the code from above and paste the code into the editor
4. Click “Confirm & Save”
Add CSS class to the Comments textarea
1. Navigate to the “Fields” page in the editor
2. Click the edit button on the “Comments” form element. If you have not added the Comments textarea do so now.
3. Click the “Advanced” tab and enter “comments” in the CSS Classes field
Click “Confirm & Save” and then test your form.
That’s it! Good Job!
Other Settings in the Code
Change the Text Shown On Load
When the page opens up, there is text that shows under the comment field on load. Depending on if you elect to change some of the other criteria in the script, you may decide that you want to present different text to your site visitors when the form loads. In this example, you can update the red portion of the below code snippet on line 4 to update your text that is shown on load:
0 / 100
Change the Text to Show Different Text
If you want to change the text that appears at the bottom of your Comments field, simply change lines 13 and 14 between the quotes.
var charUnderLimit = “Under character limit“;
var charOverLimit = charCountOver + ” characters over“;
Change the Count Text to Show Amounts Instead of Under/Over Limit
If you want to change the text at the bottom of your comments field to show the number of typed characters over the number of available characters, make these below changes:
- Remove Lines 13 and 14 and replace with a new limit
- Add a new Limit
- Update Line 25 and 27 with the new output
var charLimit = charCount+" / "+ charMax; window.pardot.$("#limit-text").text(charLimit); window.pardot.$("#limit-text").text(charLimit);
Adapting this Code for Different Field Types
One important thing to note here is that yes, this code can be just cut and pasted to run on any textarea field type in Pardot, there are other field types that you will likely want to use this on. One of the most likely scenarios is a text field instead of a textarea. In this case, you must update the code to execute against this different field type.
Please update the textarea section in lines 2 and 6 to say text.
Please let us know how you made out by submitting a reply below.