Using Technology to Bridge the Customization Gap

When working with clients we often get requests for advanced form features besides the standard request for form validation. During the development phase, we always look to optimize the user experience and performance of the form. By using jQuery we can accomplish our goal of enhancing the user experience while optimizing performance.

jQuery is the most popular JavaScript library in use today. jQuery has the advantage of a clear, easy syntax with a great set of core features, and a modular approach that allows for the additional use of plugins.

Listed below are examples of how we have used jQuery for our clients.

1. To optimize form look and feel
   Often forms have options that allow us to hide/show additional form elements or content based on user selections. By hiding and showing these parts of the form, the user has a better experience with a more efficient “flow” and the data collected is narrowed down more efficiently.
   If we have a form field that asks “Who invited you”:
   
   If Other is selected we can then “show” an additional input field to capture that information.
   To accomplish this task, we just have to add some code to the form. In this example, we use the jQuery.noconflict() so it won’t interfere with other JavaScript libraries in use. In the code, we look for the select element to change. When it does, we see if the selection is set Other. If so, show the additional input field and make it required. If the field value does not equal Other, we hide the additional input field, make it not required, and disable it.Code:

   <script type="text/javascript">
   	var $j =  jQuery.noConflict();
   	$j(document).ready(function(){
   	  //Invitedby Other Choice --- look for the invited by select to change
   	  $j('#Invitedby').on('change', function() {
   
   		//Invitedby value --- if other add field and make required
   if($j('#Invitedby').val() == 'Other') {
   				$j('#InvitedbyOtherLabel').show();
   				$j('#InvitedbyOther').removeAttr('disabled');
   				$j('#InvitedbyOther').attr('required', '');
   		  }else{
   		  //If value is not other hide the field, remove the required and disable it
   			  	$j('#InvitedbyOtherLabel').hide();
   				$j('#InvitedbyOther').attr('disabled', 'disabled');
   				$j('#InvitedbyOther').removeAttr('required');
   		  }
   	  });
   	});
   </script>

   JSFiddle Example

2. Streamline back end design
   When a form has a complex set of options, we can use code to clean up options that get processed by the form. We can use jQuery to narrow down the number of options and pass that value to a hidden field. We are using the jQuery.noconflict() so it won’t interfere with other JavaScript libraries in use. We are checking the value of 2 selects (Food and Role). From those choices we pass the value to the backend to be processed. In this example, we could use the hidden field to send out a specific confirmation email or add the user to a contract group.Code:

   <script type="text/javascript">
   	var $j =  jQuery.noConflict();
   	$j(document).ready(function(){
   		//set arrays of food options
   		var rf = ["Carrots"];
   		var fish = ["Flakes","Pellets"];
   		var bird = ["Seeds"];
   		var cat = ["Can"];
   		//job role arrays
   		var dm = ["Owner"];
   		var researcher = ["Breeder"];
   
   	  $j('#FORM-NAME-HERE').submit(function(){
   			//grab food options and job role data from form
   			var role = $j('#Role').val();
   			var food = $j('#Food').val();
   			//set hidden field based on choices
   			if($j.inArray(role, dm) > -1 && $j.inArray(food, cat) > -1){
   				$j('#foodChoice').val('Cat Breeder');
   			}else if($j.inArray(role, researcher) > -1 && $j.inArray(food, cat) > -1){
   				$j('#foodChoice').val('Cat Owner');
   			}else if($j.inArray(food, fish) > -1){
   				$j('#foodChoice').val('Fish');
   			}else if($j.inArray(food, rf) > -1){
   				$j('#foodChoice').val('Rabbit');
   			}else if($j.inArray(food, bird) > -1){
   				$j('#foodChoice').val('bird');
   			}
   		});
   	});
   </script>
   
   <form action="#" name="FORM-NAME-HERE" id="FORM-NAME-HERE">
   <input type="hidden" id="foodChoice" value="">
   
   <fieldset>

   JSFiddle Example

3. Use external files to control forms
   jQuery can be used to read external files to customize forms. An external file allows us to use one form with multiple options that has the additional advantage of being easily updated. The code below looks for parameters passed in the URL to control what data gets displayed on the form. There is a default option in case nothing is passed. This example is reading the file:

   {"types":{"default":{"header":"Please fill out the form below in order to send contact a confirmation email","content":""},"Poster":{"header":"Confirmation Email - Poster","content":"Please provide the contact email address, subscription selection, country and your email address in order receive the poster"}}}

   Sample File

   Code:

   <script type="text/javascript">
   $(function () {
   	//capture URL parameters
   	$.urlParam = function(name){
   		var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
   		if (results==null){
   		  return null;
   		}
   		else{
   		  return results[1] || 0;
   		}
   	}
   
   	//assign variables
   	var choice = $.urlParam('CHOICE1');
   
   	//process the variables
   	dataChoice(choice);
   
   	//these can be inputs or hidden fields
   	$('#Source').val($.urlParam('SOURCE'));
   	$('#ID').val($.urlParam('ID'));
   });
   
   //function to process what got passed in the URL string
   function dataChoice(choice){
   	var url = 'https://api.myjson.com/bins/59ufu';
   	$.ajax({
   	  type: 'GET',
   		url: url,
   		async: false,
   		contentType: "application/json",
   		dataType: 'json',
   		success: function(data) {		  if(choice != null){
   				$('#Response_Email_Header').html(decodeURIComponent(data.types[choice]['header']));
   				$('#Response_Email_Content').html(decodeURIComponent(data.types[choice]['content']));
   			 }else{
   	//use default values in ext file			$('#Response_Email_Header').html(decodeURIComponent(data.types['default']['header']));
   				$('#Response_Email_Content').html(decodeURIComponent(data.types['default']['content']));
   			 }
   		},
   		error: function(e) {
   		  console.log(e.message);
   		}
   	});
   }
   </script>

   JSFiddle Example

There are a few keys to remember when working with forms and jQuery:

1. Keep the code simple and clean. The less complex and wordy the code is the easier it is to debug if you run into any issues.
2. Test, Test, Test. Run tests on as many browsers as possible. It’s best to test more than you think you need to, rather than deal with any surprises.
3. Don’t use code unless you have to. This goes back to the Keep It Simple Stupid (KISS) method. Don’t add code you don’t need.

Creating forms with advanced features can provide clean, customized, and efficient forms. Use jQuery to your advantage to bridge design and customization gaps.

______

Rich Deacon is a Campaign Specialist that works with several client accounts. His goal is to provide clean, scalable, feature rich solutions that enable clients to reach their marketing goals. Rich has an extensive coding and systems administration background. Apache, DNS, Linux, Mysql, PHP and jQuery are just some of the areas of his expertise. His favorite quote sums up is personality and work ethic:
“It’s kind of fun to do the impossible..” Walt Disney

The post Using Technology to Bridge the Customization Gap appeared first on DemandGen.