Add Terms and Conditions functionality

Example 1

We will allow the form to be submitted only after you have scrolled down the Textarea

Steps:

Add necessary fields: You will need to add a textarea that will allow you to display the terms. You will need to also add a checkbox element, for the "agree" part.

• Textarea. In the Default value area, we will add the terms and conditions text. This can be as long as you like. Since the user should not be allowed to edit this, we should make the field readonly. To enable this, head to the Attributes tab, and add readonly="readonly" into Additional Attributes area.
• Checkbox. In the Items section we will only need one element. You can type in "I agree" for example. We will need to trigger a small Javascript function that will verify if the textarea has been scrolled to the bottom. We can easily do this in the Attributes tab, in Additional Attributes section, add this: onclick="return textareaAtEnd(document.getElementById('textarea'));"

Add Javascript function: The small function is required to check whether the terms and conditions textarea has been scrolled to the bottom or not. You will need to head to the Properties > CSS/Javascript: Javascript area, and add the following script:

<script type="text/javascript">
function textareaAtEnd(area)
{
  bul = false;
  bul = (area.scrollTop + area.offsetHeight) > area.scrollHeight ;
  if(!bul)
  {
    alert('Scroll the terms and conditions textbox');
    document.getElementById('name_of_agree_checkbox0').checked = false;
  }
    return bul;
}
</script>

Example 2

We will allow the form to be submitted only after you have scrolled down the Free Text field

Steps:

Add necessary fields: You will need to add a Free Text that will allow you to display the terms. You will need to also add a checkbox element, for the "agree" part.

• Free Text. In the Text area, we will add the terms and conditions. This can be as long as you like and you can use HTML code as well.
• Checkbox. In the Items section we will only need one element. You can type in "I agree" for example. We will need to disable this item by default using the [d] syntax, thus we will have: "I agree[d]"

Add Javascript function: The function is required to check whether the terms and conditions Free Text field has been scrolled to the bottom or not. You will need to head to the Properties > CSS/Javascript: Javascript area, and add the following script:

<script type="text/javascript">
jQuery(document).ready(function($){
  // Provide your own values
  var freeTextName = 'terms';
  var checkboxName = 'agree';
  var formId = 1;
  // Don't change past this point

  var termsDiv = RSFormPro.getBlock(formId, RSFormProUtils.getAlias(freeTextName))[0];
  var checkboxDiv = RSFormPro.getBlock(formId, RSFormProUtils.getAlias(checkboxName))[0];

  $(termsDiv).scroll(function(e) {
    if (isScrolledToBottom(termsDiv)) {      
      $('#' + checkboxName + '0').prop('disabled', false);
    }
  });

  function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
  }
});
</script>

We'll need to add a small CSS rule for making the Free Text field scrollable:

<style type="text/css">

.rsform-block-terms {
    width: 500px;
    height: 150px;
    overflow-y: scroll;
}

</style>

Example 3

We will display just the agreement checkbox. This will include a clickable link which opens a Bootstrap modal containing Terms and Conditions added to a hidden Free Text field

Steps:

Add necessary fields: You will need to add a Free Text that will allow you to display the terms in a modal. You will need to also add a checkbox element, for the "agree" part.

• Checkbox. In the Items section we will only need one element. You can type in "Yes|I agree with the <a href="#myModal" data-toggle="modal">Terms and Conditions</a>" for example.

• Free Text. In the Text area, we will add the terms and conditions. This can be as long as you like and you can use HTML code as well. We will add for example:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Read the Terms and Conditions</h3>
  </div>
  <div class="modal-body">
    <p>Terms and conditions</p>
  </div>
  <div class="modal-footer">
    <button class="btn okey" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

Example 4

Similar to the Example 3, we will display just the agreement checkbox. This will include a clickable link which opens a popup window containing Terms and Conditions added to a Joomla! article

Steps:

• Add the Checkbox field: In the Items section we will only need one element. You can type in Yes|I agree with the <a onclick="openTerms();">Terms and Conditions</a> for example
• Create a Joomla! article and add your Terms and Conditions text
• Create a new menu item, more precisely a Single article and select your Terms and Conditions article for it
• Edit the menu item's 'Options' so that the default article information is not show (category, author, navigation...). This menu item does not need to be displayed on your site, you can add it in a hidden menu, we only need the actual link to the article that also contains the menu item id

Add Javascript function: The small function is required to trigger the popup functionality added into the Checkbox item . You will need to head to the Properties > CSS/Javascript: Javascript area, and add the following script:

<script type="text/javascript">
function openTerms(){
  window.open('link_to_your_article?tmpl=component','Terms and Conditions','height=400,width=300,toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no ,modal=yes');
}
</script>