Add Terms and Conditions functionality

How can I add Terms and conditions functionality to my form ?

Very often you will need to ask the user to agree with your terms and conditions before he can submit the form. You can do this quite nicely with RSForm!Pro.

 

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>
 
Note:

Instead of name_of_agree_checkbox, you will have to use the name of your agree checkbox group.

 

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>
 
Note:

Instead of terms, agree and 1, you will have to use the actual names of your fields as well as the exact form Id.

 

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 Terms and Conditions" 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 Terms and Conditions 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> 
 
Note:

remember to also add &tmpl=component to the link_to_your_article syntax in order to load only the article without template modules or menus.

 

10 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Unique email address validation rule HOT

Ajax validation is not working

Display a message on the top side of the form if validation fails

RSForm! Pro regular expression (regex) validation does not work!

How do i validate special chars?