Often times people will just tick the box without reading them so adding your terms into a scrollable area that requires the user to scroll to the bottom before the checkbox can be ticked is a great way to ensure that your users have read or at least attempted to read them.
In this quick tutorial I’ll show you how to add a scrollable terms box to your Gravity Form’s checkbox field.
The first thing to do is to add a checkbox field to your Gravity Form and under the “Appearance” options add the class terms-and-conditions-field to the “Custom CSS Class” field.
In your functions.php file of your WordPress theme, we need to add two bits of code, the first bit is to add the scrollable box and the second bit is to add the JavaScript functionality to disable and enable the checkbox.
The first bit of code will look like this:
/* Add the terms of use box to a Gravity Forms field with the class of terms-and-conditions-field */
add_filter('gform_field_content', 'add_terms_and_conditions_field', 10, 5);
function add_terms_and_conditions_field($content, $field, $value, $lead_id, $form_id) {
if($field->cssClass == 'terms-and-conditions-field' && RG_CURRENT_VIEW != 'entry') {
/* If using content directly then add it here */
$terms_and_conditions_content = '<p>Terms of use here</p>';
/* If using content from a page then add it here */
$terms_and_conditions_page_id = 3;
$terms_and_conditions_content = get_post_field('post_content', $terms_and_conditions_page_id);
$terms_and_conditions_box_code = '<div class="terms-and-conditions-field-box">'.$terms_and_conditions_content.'</div>';
$terms_and_conditions_box_css = '<style type="text/css">
.terms-and-conditions-field-box {
display: block;
border: 1px solid #CCC;
padding: 20px;
height: 200px;
overflow: scroll;
margin: 0 0 10px 0;
}
</style>';
$content = $terms_and_conditions_box_code.$terms_and_conditions_box_css.$content;
}
return $content;
}
To display the scrollable box, we’re hooking into the Gravity Forms filter gform_field_content and creating our own function add_terms_and_conditions_field.
We then add an if statement to check that the CSS class is terms-and-conditions-field and the current view isn’t the entry view.
There’s then two ways of bringing in the content, we can either just paste the content into the code directly by adding it to the $terms_and_conditions_content variable. Or we can pull it in directly from a page on the website. Make sure you remove the line that you don’t want to use.
We then add the content to a div element and add some CSS before putting that all together into the $content variable which is what gets returned from the function.
The next step is to add some JavaScript to initially disable the checkbox field and once the user has scrolled to the bottom then re-enable it. If you don’t want that functionality then you don’t need to add this code.
The code is as follows:
/* Add JS to check the scroll position of the terms and disable or enable the checkbox */
add_action('gform_register_init_scripts', 'add_terms_and_conditions_js', 10, 2);
function add_terms_and_conditions_js($form, $field_values) {
/* Add some JS to check if the visitor has scrolled */
$js = 'jQuery(function() {
jQuery(".terms-and-conditions-field input.gfield-choice-input").each(function() {
if(!jQuery(this).is(":checked")) {
jQuery(this).prop("disabled", true);
}
});
jQuery(".terms-and-conditions-field-box").on("scroll", function(e) {
if(jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight) {
jQuery(this).parent(".terms-and-conditions-field").find("input.gfield-choice-input").prop("disabled", false);
}
});
});';
/* Check if the form has a terms of use field before adding the JS */
$form_has_terms_and_conditions_field = 0;
foreach($form['fields'] as $field) {
if(strpos($field->cssClass, 'terms-and-conditions-field') !== false) {
$form_has_terms_and_conditions_field = 1;
}
}
if($form_has_terms_and_conditions_field) {
GFFormDisplay::add_init_script($form['id'], 'terms_and_conditions_js', GFFormDisplay::ON_PAGE_RENDER, $js);
}
}
We’re hooking this code into the gform_register_init_scripts action in Gravity Forms. This means that it will only load within the Gravity Form rather that loading it on every page if we added it to the general website’s JS.
The first thing we do is check for the existence of the checkbox field and if it isn’t checked already we’ll disable it. The reason we look to see if it’s checked first is so that if the form has been submitted and another field hasn’t validated correctly we don’t want the field to be disabled again.
The second part of the JS adds an action to the scroll event of the box and checks if it’s scrolled to the bottom, if it has then it will re-enable the checkbox field so that the user can tick it.
We then loop through all fields on the current form to see if the form has a terms and conditions field because we don’t want it to load the JS if we’re not using the field on that form. We run the check and if it finds the field then we add the JS through the GFFormDisplay::add_init_script function.
That’s it, all done! The full code should look something like this:
/* Add the terms of use box to a Gravity Forms field with the class of terms-and-conditions-field */
add_filter('gform_field_content', 'add_terms_and_conditions_field', 10, 5);
function add_terms_and_conditions_field($content, $field, $value, $lead_id, $form_id) {
if($field->cssClass == 'terms-and-conditions-field' && RG_CURRENT_VIEW != 'entry') {
/* If using content directly then add it here */
$terms_and_conditions_content = '<p>Terms of use here</p>';
/* If using content from a page then add it here */
$terms_and_conditions_page_id = 3;
$terms_and_conditions_content = get_post_field('post_content', $terms_and_conditions_page_id);
$terms_and_conditions_box_code = '<div class="terms-and-conditions-field-box">'.$terms_and_conditions_content.'</div>';
$terms_and_conditions_box_css = '<style type="text/css">
.terms-and-conditions-field-box {
display: block;
border: 1px solid #CCC;
padding: 20px;
height: 200px;
overflow: scroll;
margin: 0 0 10px 0;
}
</style>';
$content = $terms_and_conditions_box_code.$terms_and_conditions_box_css.$content;
}
return $content;
}
/* Add JS to check the scroll position of the terms and disable or enable the checkbox */
add_action('gform_register_init_scripts', 'add_terms_and_conditions_js', 10, 2);
function add_terms_and_conditions_js($form, $field_values) {
/* Add some JS to check if the visitor has scrolled */
$js = 'jQuery(function() {
jQuery(".terms-and-conditions-field input.gfield-choice-input").each(function() {
if(!jQuery(this).is(":checked")) {
jQuery(this).prop("disabled", true);
}
});
jQuery(".terms-and-conditions-field-box").on("scroll", function(e) {
if(jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight) {
jQuery(this).parent(".terms-and-conditions-field").find("input.gfield-choice-input").prop("disabled", false);
}
});
});';
/* Check if the form has a terms of use field before adding the JS */
$form_has_terms_and_conditions_field = 0;
foreach($form['fields'] as $field) {
if(strpos($field->cssClass, 'terms-and-conditions-field') !== false) {
$form_has_terms_and_conditions_field = 1;
}
}
if($form_has_terms_and_conditions_field) {
GFFormDisplay::add_init_script($form['id'], 'terms_and_conditions_js', GFFormDisplay::ON_PAGE_RENDER, $js);
}
}