JS Tweak to the Drupal 7 Contact Form

I tweaked our Drupal 7 Contact form today.
The goal was to allow users to select the reason for contact and potentially the subject via the URL.
We had this in place for our Drupal 6 site and the code ported over nicely.

The process was similar to the last post: JS Tweak to the Drupal 7 Menu Management Screen.

The JS consists of two parts, get the URL Var and value and update the form.
I use a stand alone function (getURLVars) to get the URL Var. Then I drop it like it’s hot (so to speak) using jQuery.

Sample URL: /contact?cid=4&subject=What%20is%20all%20this%20then.

Sample JS to try in your console:

if (typeof getURLVars !== 'function') { 
  function getURLVars(urlVar) {
    if(!urlVar){
       return false;
    }
    if(typeof (document.location.href.split('?')) === 'undefined') {
       return false; 
    }
    if (typeof (document.location.href.split('?')[1]) === 'undefined') {
       return false;
    }
    varArray = document.location.href.split('?')[1].split('&');
  
    for(var x=0; x<varArray.length; x++)
    {
      var tmp = varArray[x].split('=');
      eval(unescape(tmp[0]) + '="' + unescape(tmp[1]) + '"');
      if(urlVar == tmp[0]){
        urlVar = eval(unescape(tmp[0]) + '="' + unescape(tmp[1]) + '"');
        return urlVar;
      }
    }
    return ;
  }
}
//getURLVars('cid')

cidVal = getURLVars('cid')?getURLVars('cid'):'';
if(cidVal !== ''){
  theArray = jQuery('#edit-cid').children().map(function() {return jQuery(this).val();}).get();
  if (jQuery.inArray(cidVal, theArray) !== -1){
    //alert('yup');
    jQuery('#edit-cid').val(cidVal);
  }else{
    //alert('nope');
  }
}

subjectVal = getURLVars('subject')?getURLVars('subject'):'';
if(subjectVal !== ''){
  jQuery('#edit-subject').val(subjectVal.trim());
}

Full JS w/ Drupal.behaviors code wrapper where needed:

/**
 * JS to update the contact id based on a URL var. Ported from D6. 
 */

if (typeof getURLVars !== 'function') { 
  function getURLVars(urlVar) {
    if(!urlVar){
       return false;
    }
    if(typeof (document.location.href.split('?')) === 'undefined') {
       return false; 
    }
    if (typeof (document.location.href.split('?')[1]) === 'undefined') {
       return false;
    }
    varArray = document.location.href.split('?')[1].split('&');
  
    for(var x=0; x<varArray.length; x++)
    {
      var tmp = varArray[x].split('=');
      eval(unescape(tmp[0]) + '="' + unescape(tmp[1]) + '"');
      if(urlVar == tmp[0]){
        urlVar = eval(unescape(tmp[0]) + '="' + unescape(tmp[1]) + '"');
        return urlVar;
      }
    }
    return ;
  }
}

/** Set Defaults
 * Reason for Contact
 * if url var = cid
 * and 
 *   val is in the list of vars then jQuery('#edit-cid').val(2);
 *
 * Subject
 * Set subject
 */
 
(function () {
  Drupal.behaviors.setCid = {
    //for use on Attachment content edit screens
    attach: function(context) {
      if(typeof context !== 'undefined'){ //run only if there is a context var
        /*
          Check the type of the context var and type. Process if context = [object HTMLDocument]
          Note: when context == [object HTMLDocument] then this is page load. You may wont some script to run only on page load. Some not and some all the time.
        */
        if(typeof context == 'object' && context.toString().indexOf('HTMLDocument')!=-1){
          //Page Load
          cidVal = getURLVars('cid')?getURLVars('cid'):'';
          if(cidVal !== ''){
            theArray = jQuery('#edit-cid').children().map(function() {return jQuery(this).val();}).get();
            if (jQuery.inArray(cidVal, theArray) !== -1){
              //alert('yup');
              jQuery('#edit-cid').val(cidVal);
            }else{
              //alert('nope');
            }
          }
          
          subjectVal = getURLVars('subject')?getURLVars('subject'):'';
          if(subjectVal !== ''){
            jQuery('#edit-subject').val(subjectVal.trim());
          }
        }
      }
    }
  }
})();

Again I implemented this in a block w/ the Code Per Node (cpn) CSS and JS additions.
Here are the specifics:

Block title:
None;
Block description:
JS for Contact Page
Block body:
 
Text format:
Code input (custom type allowing html)
Pages – Only the listed pages:
contact;
CSS:
#block-block-55 {
  display: none;
  visibility: hidden;
}

*Note the specific block ID in that id selector

JS:
As pasted above
Leave a Comment