Details

Category: Customizing your forms

Before you try to create something a bit more advanced you have to understand how Contact Enhanced works, therefore I suggest you to create a form and test most of its features before you continue; Also, please take a look at the online documentation.

Understanding Contact Enhanced code for Joomla 4.x:

Each Form Field will add a block of code similar to the HTML below. Each block represented by the <div> tag has a specific ID (ce-ff-container-ALIAS), which we will use in the javascript, where ALIAS is the form field alias.

<div id="ce-ff-container-ALIAS" class="control-group ce-ff-container ce-ff-type-text">
[...]
</div>

Usage

1. Add all fields that you will need and under the General Parameter set the Show field to No for all fields that you want to load hidden; 
2. Create the Radio button or Checkbox or Select List (dropdown) like you would normally do; 
3. Create a Javascript Form Field with the following content:

For Radio buttons:

jQuery(function($){
  $('#ce-ff-container-RADIO_ALIAS input').on('change', function(){
    var value = $(this).val();
    if(value == 'Other' || value == 'Other search engine' ){
      $('#ce-ff-container-ALIAS').css('display','block'); 
    }else{
      $('#ce-ff-container-ALIAS').css('display','none'); 
    }
  });
});

For Checkboxes:

jQuery(function($){
  $('#ce-ff-container-CHECKBOX_ALIAS input').on('change', function(){
    if($(this).val() == 'Other' && $(this).is(':checked') ){
      $('#ce-ff-container-ALIAS').css('display','block'); 
    }else{
      $('#ce-ff-container-ALIAS').css('display','none'); 
    }
  });
});

For Select Lists:

jQuery(function($){
  $('#ce-ff-container-SELECT_ALIAS select').on('change', function(){
    if($(this).val() == 'Other' ){
      $('#ce-ff-container-ALIAS').css('display','block'); 
    }else{
      $('#ce-ff-container-ALIAS').css('display','none'); 
    }
  });
});

Understanding Contact Enhanced code for Joomla 3.x:
Each Custom Field will add a block of code similar to the HTML below. Each block has a specific ID (ce-cf-container-fieldId), which we will use in the javascript, where fieldId is the custom field id.

<div id="ce-cf-container-fieldId" class="ce-cf-container cf-type-fieldType ce-fltwidth-100">
	<label class="cf-label requiredField" for="alias">fieldName</label> 
	<input id="alias" class="inputbox required" name="alias" type="text" value="" />
</div>

Usage

1. Add all fields that you will need and set the Parameter Hide field to Yes for all fields (fieldId) that you want to load hidden; (See option for degrading javascript gracefully)
2. Create the checkbox or radio box like you would normally do; For the purposes of this tutorial we will use the Value below:
   Through organic searches in Google|Through ads in Google|Mouth to mouth|Other|Other search engine

Implementing for CE 3.x:

We'll use the jQuery (javascript) framework for this because it is the default Javascript framework for Joomla 3, so in case you want to understand the inner works and you are not familiar with jQuery (the default javascript framework in Joomla) you need to do some reading: https://jquery.com

• Add the javascript below to the Attributes field:

onchange="value = jQuery(this).val();
if(value=='Other' || value=='Other search engine' ){
  jQuery('#ce-cf-container-fieldId').css('display','block'); 
}else{
  jQuery('#ce-cf-container-fieldId').css('display','none'); 
}"

Graceful Degradation

"Graceful Degradation" is an important principle in Web design. It means that, when you put in features designed to take advantage of the latest and greatest features of newer browsers, you should do it in a way that older browsers, and browsers letting users disable particular features, can "step down" to a method that still allows access to the basic content of the site, though perhaps not as nice in appearance. If you want to allow users without javascript enabled to see the fields (without the show/hide effects of course), you will have to apply the changes below:

Change FIELD_ID for the Form Field ID, which can be found in the Form Field Manager.

In Joomla 3.x:

Use the Javascript Custom field type with the following content:

jQuery(document).ready(function($){
if($('#ce-cf-container-FIELD_ID1')){ 
$('#ce-cf-container-FIELD_ID1').css('display','none'); 
$('#ce-cf-container-FIELD_ID2').css('display','none'); 
$('#ce-cf-container-FIELD_ID3').css('display','none'); 
} 
});

Recommend to a friend