Preventing Excessively Large Feedback/Contact Messages
Very large emails and feedback/contact messages are more likely to be ignored than short, succinct ones. Zenhabits' Your Emails are Too Long makes good arguments in support of short written messages.
I'll show you how to display a custom error message if the number of characters in the form user's message exceeds your specified limit. If the limit is not exceeded, there is no indication there was a limit at all.
Another way to limit the message length is to put word or character counters next to the form so the form user can see when the message is near maximum length. And don't let the counter exceed that limit.
WebSite's Secret members have a Form Field Word and Character Limits generator they can use to do exactly that. (The link is to the public article.)
Placing word or character counters near the form's message box may be distractive to the form user. If that is a concern, displaying an error message only if the message is excessive can be a better solution.
Here is how to do it.
The First Step
Put this JavaScript somewhere in the source code of the web page with the form. It may be in the HEAD or BODY area.
<script type="text/javascript">
function CheckMaximumFieldLength(field) {
/*
Maximum Field Length Message
Version 1.0
April 14, 2011
Will Bontrager
https://www.willmaster.com/
Copyright 2011 Bontrager Connection, LLC
This software is provided "AS IS,"
without a warranty of any kind.
Bontrager Connection, LLC grants
you a royalty free license to use
or modify this software provided
this notice appears on all copies.
*/
///////////////////////////////////////
//
// Two places to customize:
//
// Place 1.
// Specify the maximum number of characters
// (including spaces) the field may contain.
var MaximumCharacters = 300;
// Place 2.
// Specify the message to display if the maximum is exceeded.
var Message = "Please reduce your message to under 300 characters."
// No further customizations required.
///////////////////////////////////////
if(document.getElementById(field).value.length<=MaximumCharacters) { return true; }
alert(Message);
return false;
}
</script>
The JavaScript has two places to customize, the maximum number of characters and the message to display if the maximum is exceeded. Both customization places are marked.
If your message will be more than one line, see the 3 Backslash Uses in JavaScript Strings blog post.
The Last Step
The form needs to be modified in one or two places to use the above JavaScript.
-
The text box to be checked for length needs an id value. If it already has an id value, there is no need to change it. Otherwise, give it one.
The id value might look like this: id="messageboxid"
Here is an example of a textarea field with an id value:
<textarea id="messageboxid" name="message" cols="33" rows="5"></textarea>
-
The form tag needs this attribute:
onsubmit="return CheckMaximumFieldLength('IDVALUE')"Replace IDVALUE with the id value of the field to be checked. For the above example textarea field, the form tag attribute would be:
onsubmit="return CheckMaximumFieldLength('messageboxid')"With the onclick attribute, the form tag might look something like this:
<form method="post" action="script.php" onsubmit="return CheckMaximumFieldLength('messageboxid')">
Implementation Review
To implement the maximum field length message system, put the JavaScript into the page, then verify the text field to check has an id value and give the form tag the onsubmit attribute.
When the form is submitted, the field length is checked. If the field length less or equal to the maximum specified in the JavaScript, the form submits normally. Otherwise, the message specified in the JavaScript is displayed and the form submission is aborted.
Will Bontrager
