How to Limit Characters on a Marketing Cloud Account Engagement (Pardot) Form Textarea

How to Limit Characters on a Marketing Cloud Account Engagement (Pardot) Form Textarea

Blogs Left Sidebar Form

This is the form that is on the left side of the blogs.

First Name(Required)
Last Name(Required)
This field is for validation purposes and should be left unchanged.

How to Limit Characters on a Marketing Cloud Account Engagement (Pardot) Form Textarea

How to Limit Characters on a Marketing Cloud Account Engagement
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
 $(document).ready(function() {
        window.pardot.$("p.comments textarea").after("</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p id='limit-text' style='color: #000000; font-weight: normal;'>Under character limit.</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>");

        $('.comments textarea').on('keyup', function() {
           
            var charMax = 10;
       
            var charCount = $(this).val().replace(/s/g, '').length;
            var charCountOver = charCount - charMax;
           
            var charUnderLimit = "Under character limit";
            var charOverLimit = charCountOver + " characters over";
           
            if (charCount <= charMax) {
                window.pardot.$("p.comments").removeClass("error");
                window.pardot.$(".limit-text").remove();
                window.pardot.$("p.submit input").prop('disabled', false);
            } else {
                window.pardot.$("p.comments").addClass("error");
                window.pardot.$("p.submit input").prop('disabled', true);
            }
            if (charCountOver < 1) {
                window.pardot.$("#limit-text").text(charUnderLimit);
            } else {
                window.pardot.$("#limit-text").text(charOverLimit);
            }
        });
    });
</script>
window.pardot.$("p.fieldName fieldType").after("0/100");
var charLimit = charCount+" /  "+ charMax;

window.pardot.$("#limit-text").text(charLimit);

window.pardot.$("#limit-text").text(charLimit);

If you found this helpful, or would like to discuss how we can further help grow your business, please reach out using the button below: