If you’ve worked with Pardot’s forms then you likely know that the comments field has a 255 character limit, which, if gone over results in syncing errors with Salesforce. This results in leads being stuck in a Pardot no mans land.
A potential Pardot fix
After dealing with this issue for a number of months, we have managed to find a simple solution that completely solves the problem without the need for any other code.
A popular fix we have found online counts the characters and lets the user know when they are over the 255 character limit and disables the submit button. While this does work, pasting more than 255 characters gets around this and allows forms to be submitted with more than 255 characters.
A simple solution: maxlegth
Both input and textarea fields in HTML can make use of the maxlegth attribute. Maxlength allows the maximum length in characters to be set directly into the element, preventing more than the number of characters allowed to be entered, even when pasting.
So now that we a solution, insert the attribute and its value into the element shouldn’t be too hard. The following two lines of code does the job perfectly.
<script>
const target = document.querySelector(".limit textarea");
target.setAttribute('maxlength',255);
</script>Let us explain how the above code works.
The top line looks for an element on the page with a class name limit and then a <textarea> element nested within. The second line inserts an attribute, in this case maxlength with a value of 255, which translates into maxlength=”255″.
Add the code to the Pardot form
This tutorial is specifically targeting <textarea>, if are looking to target <input>, replace <textarea> with it and add the css class to it.
Total Time: 10 minutes
Go to or create a new Pardot form.
Click Edit form and go to the Fields step on the form creation page.
Add a class to the field
On the field you are wanting to limit the characters, click the edit button, go to the advanced tab, and add a class name. In this case we use limit.
Go to the Look and Feel tab
Go to the look and feel tab and select Below form. Then click on the code view icon in the text editor. This should be the last icon on the right and looks like a page with <> coming out of it.
Add the code
Copy and paste the code from above. Hit save and test your form. It should now be working and you should no longer have issues with forms being filled out with more than 255 characters.
Image via Salesforce
