jQuery terms & conditions link

We’ve worked on a few projects recently that require a “I agree with the terms & conditions” checkbox at the bottom of a form or checkout page.

In the “olden days” we’de provide a link to the terms and conditions which would open in a new window or a popup, but in 2013 this feels somewhat clumsy.

Below is a small jQuery plugin we developed which transforms the link into a smarter AJAX call. You can try it by clicking the link:

I agree to the terms & conditions

The advantages

  1. When clicking the link, the text that populates the box is called via AJAX from the site’s terms & conditions page which you can see here. This means you don’t need multiple terms and conditions in different places.

  2. Because the content is called via AJAX, if the visitor has JavaScript or CSS turned off, visually this solution will remain as intended because the bottom of your form won’t be cluttered with reams of terms & conditions text that you might otherwise try and hide using CSS and “display:none;”

  3. If the visitor has JavaScript turned off, or if they right-click on the link and select to open it in a new window, the link will still function as expected. There’s an argument for adding target=”_blank” to the link in case of the former, but that’s a contentious subject.

The HTML

<form>
   <div><input type="checkbox" /> I agree to the <a href="/jquery-terms.php" id="terms">terms &amp; conditions</a></div>
   <div id="content-area"></div>
</form>

The above is just a very basic example and can be adapted to use fieldsets, labels or whatever else your form needs. Note the link to /jquery-terms.php which is the page containing the actual content.

The CSS

#content-area {
	display:none;
	height:200px;
	overflow:auto;
	margin-bottom:1.5em;
	padding:10px;
	border:solid 1px #d7d7d7;
	color:#505050;
	background-color:#ffffff;
	font-size:90%;
}

The above styles the content area for the terms and conditions and hides it to begin with.

The jQuery

Now, here’s the jQuery plugin that makes it work:

jQuery.fn.terms_agree = function(content_area, selector) {
	var body = $(body);
	$(this).click(function() {
		body.css("height", "auto").css("height", body.height()); // Prevent page flicker on slideup
		if ($(content_area).html() == "") {
			$(content_area).load( $(this).attr("href") + (selector ? " " + selector : "") );
		}
		$(content_area).slideToggle();
		return false;
	});
}

Now you can activate the terms & conditions link like this:

$(function() {
    $("#terms").terms_agree("#content-area", "#small-print");
});

You’ll also need to include the jQuery library in your document:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

To clarify, the first parameter #content-area specifies the area on your form that you want to populate with the content that is retrieved.

The second parameter #small-print is an optional selector from within the external terms and conditions page. This means you can load in a fragment of the page, rather than the whole page itself. This is useful when your terms and conditions page has its own header, navigation and footer that you don’t want to load into the content area of your form.

6 replies to “jQuery terms & conditions link”

  1. Jamie says:

    Hi there, I am having trouble getting it to work – i have completed all tasks. where do i put the activate part? thanks for your help and great article. Do you have an example of the source code for the page that features the box – this would be a great help for those unsure of where to put it.

    • Gareth says:

      Hi Jamie, I’ve edited the article above to make it a little clearer. Make sure your call to $(“#terms”).terms_agree(“#content-area”, “#small-print”); is done like this:

      $(function() {
      $(“#terms”).terms_agree(“#content-area”, “#small-print”)
      });

      You’ll also need to include the jQuery library in your document:

      <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

      Drop me an email if you’re still struggling.

      • Jamie says:

        Thanks for clearing that up – its now working and it looks great!

        Jamie

        • Jamie says:

          well almost – its starting as expanded and then upon click retracting! hmmm!

          • Gareth says:

            Be sure to include the CSS which hides the content area to begin with. Without this it will work the opposite way around as you’re experiencing.

  2. Louis E says:

    Thanks for this Gareth, this worked perfectly on my Drupal 7 site. I created a Terms page and added the title and description in the #small-print div. It displays just the content not the entire page.
    Thanks for a great script! Much appreciated.

Leave a reply

(won't be published)
Email us Web enquiry form