Requiring Terms to Be Read

You can put text in front of someone, but you can't make them read.

An indication that terms of service are agreed to can be enforced before submitting a form. A requirement that terms be read cannot be enforced.

But it can be made more likely — perhaps only scanned, but at least seen.

To make the terms more likely to be read, require an action at the end of the terms content. It requires scrolling through the content to where the action must take place.

A checkbox can be placed at the end of the terms content. The checkbox must be checked to indicate agreement with the terms.

When the checkbox is checked, the submit button that had been hidden now becomes visible.

Implementation Overview

The form contains the terms of service agreement checkbox and the submit button. Most likely, there will be other fields, but this article addresses only the checkbox and the button.

The checkbox is at the end of the terms of service content.

The submit button is hidden when the form first loads.

Lengthy terms of service may be in a scrolling div. However, because the checkbox needs to be part of the form, the terms may not be in an iframe.

When the terms of service agreement checkbox is checked, the submit button becomes visible. If the checkbox is unchecked again, the button becomes hidden again.

Only when the checkbox is checked, making the submit button visible, can the form be submitted.

Important note: Browsers with JavaScript turned off will never display the submit button. A noscript tag can be used to publish that fact for users of non-JavaScript browsers.

Example

Here's an example. The submit button appears only when the checkbox is checked.

The Code

Here is source code to implement the functionality of the example. Notes follow.

<form method="post" action="script.php">

<div style="max-height:1.5in; overflow:auto; border:1px solid #ccc; padding:.5em;">
<p style="font-size:larger; font-weight:bold; text-align:center; margin-top:0;">Terms of Service</p>
<p>
[terms of service content]
</p>
<p style="text-align:center; font-weight:bold;">
<input id="checkbox-field" type="checkbox" onclick="MonitorSubmitButton()"> I agree to the Terms of Service.
</p>
</div>

<p>
The Terms of Service must be agreed to. To agree, use the checkbox at the end of the terms content. When the checkbox is checked, a button will be available to submit the form.
</p>
<noscript>
<b>NOTE:</b> JavaScript is required to use this form.
</noscript>

<p>
<input id="button-field" style="display:none; width:100%;" type="submit" value="Submit Form">
</p>

</form>

<script>
function MonitorSubmitButton()
{
   var checkboxID = "checkbox-field";
   var buttonID = "button-field";
   if( document.getElementById(checkboxID).checked ) { document.getElementById(buttonID).style.display = "block"; }
   else { document.getElementById(buttonID).style.display = "none"; }
}
</script>

These are the two most important things to know about implementing the source code.

1. The id values of (i) the checkbox field and (ii) the submit button need to be specified in the JavaScript. In the above source code, they are colored blue. The blue id values are in the fields and in the JavaScript, a total of four places.

2. The submit button needs to have an inline CSS display:none; rule (also colored red in the source code). It hides the button when the page first loads so it can't be clicked without first checking the checkbox.

In the example, the terms of service is in a scrolling div. The div doesn't have to be scrolling. The terms don't actually have to be in a div. Just ensure that the checkbox is at the end of the terms of service content.

Instead of hard-coding the terms content into the scrolling div, it can be inserted with Ajax. The Ajax to Fill Div article is a practical how-to.

Because the form user needs to scroll through the terms of service to find the checkbox, the terms are more likely to be read. Perhaps only scanned or glanced over, but they had a prompt to read the terms.

With the present state of technology, it may be the best that can be done to influence the form user to actually read the terms — short of requiring the user to type the content of the terms into a text box.

(This article first appeared in Possibilities ezine.)

Will Bontrager