Remove colon from label

Paste this in your template.php in 'sites/all/themes/your_theme/' replacing 'theme' with the title of your theme folder.

function theme_form_element($element, $value) {
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  $output = '<div class="form-item"';
  if (!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
      $output .= ' <label for="'. $element['#id'] .'">'. $t('!title !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
    else {
      $output .= ' <label>'. $t('!title !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
  }

  $output .= " $value\n";

  if (!empty($element['#description'])) {
    $output .= ' <div class="description">'. $element['#description'] ."</div>\n";
  }

  $output .= "</div>\n";

  return $output;
}

Original code can be found in includes/form.inc
it looks like this

function theme_form_element($element, $value) {
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  $output = '<div class="form-item"';
  if (!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
      $output .= ' <label for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
    else {
      $output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
  }

  $output .= " $value\n";

  if (!empty($element['#description'])) {
    $output .= ' <div class="description">'. $element['#description'] ."</div>\n";
  }

  $output .= "</div>\n";

  return $output;
}

This will be a site wide change affecting all forms the same way. I just add ':' when I need to. Works out well for me. I've only tried this on 5.x but this is code from 6.x and should work the same way. Hope this helps.

I tried this it creates an error tells me that the function has already been declared in includes/form.inc and cannot be redeclared in template.php

To follow this suggestion for making a site wide change then you would need to make the change to the includes/form.inc file itself. Just remove the colon after !title: in the theme_form_element() method (2 places).

Sorry, flavor
If I wasn't clear in the beginning. The error you received telling you that that function has already been called is because both functions are titled the same. So to be more specific you must replace the 'theme' part of theme_form_element with the title of the folder in which your active theme is kept. So if your theme folder is titled "nancy' then your function in your template.php file should look like this "nancy_form_element". If you wanted all active themes to use this function then 'theme' should be replaced by 'phptemplate' (instead of 'nancy' in this example) and I believe the template.php file should be outside the individual theme folders but inside the sites theme folder. Glancing at the Drupal handbook on theming should clarify that. Of course it's also functional to paste this in each theme's template file also, just more to manage that way.

Hope this helps

Thanks, by the way.

I'd like to figure out how to apply this only to forms generated by the webforms module but it is a huge start.

This method does not work for me either, to remove colons from the field labels in webforms

I hacked the includes/form.inc code to remove the colons, removing the colons from $t('!title: to make them $t('!title in function theme_form_element lines 2202 and 2205, ( http://drupal.org/node/376345 ) but of course that was lost upgrading to core 6.11

so I devised a DHTML method - paste this script into the webform body

<script type="text/javascript">
function nocolons(){
doclabs = new Array;
doclabs = document.getElementsByTagName('label');
if (doclabs.length) {
  for (i=0; i<doclabs.length; i++ ){
    labtext = doclabs[i].innerHTML;
    if (labtext.indexOf(":"))	{
      striptext = labtext.substr(0, labtext.indexOf(":")) + labtext.substr(labtext.indexOf(":")+1, labtext.length);
      doclabs[i].innerHTML = striptext;
    }
  }
}
}
onload=nocolons;
</script>

I suppose this snippet could also go in a theme file, probably page.tpl.php

I only have one webform, so it is more efficient for me to put the code in the webform body

#201941: How to remove punctuation from the end of a form field label?

#201941: How to remove punctuation from the end of a form field label?

sorry, I'm not sure what these last two posts mean

this is not a duplicate of #201941, although I posted there first about hacking the form.inc file

I pointed to the DHTML code I posted here from that thread, as this thread is more on the topic of my issue

This was super helpful. I dropped it into the body and it works great. Thank you.

For those where this is not working, don't forget to flush your cache!

I only want to get rid of the colon that goes along with "Username:" and "Password:" in the login field not make a site wide change.

Here's a javascript solution that only removes the colon if the label contains a question mark. (#7 removes all colons).

<script type="text/javascript">
function nocolons(){
doclabs = new Array;
doclabs = document.getElementsByTagName('label');
if (doclabs.length) {
  for (i=0; i<doclabs.length; i++ ){
    labtext = doclabs[i].innerHTML;
    if (labtext.indexOf("?") > 0) {
	doclabs[i].innerHTML = labtext.replace(":","");
    }
  }
}
}
onload=nocolons;
</script>

Thank you to cooperwd in #14. Works great.

If you have trouble getting it to work make sure to check your input filter settings. I had to set mine to none for the script to work properly.

re: filters

enabling the PHP filter for admins then setting input format to PHP filter default usually works

@#14 nice use of replace function, but I would test for presence of ":" rather than "?" before invoking it

Thanks decibel.places! But I'm confused. The module appends a colon to the end of every label, so why test for the presence of a colon? Instead, we want to test for the presence of a question mark -- only then do we want to remove the colon. Maybe I'm misunderstanding?

@#17 - you're absolutely correct, cooperwd

testing for "?" is necessary to remove the colon after question mark

although we can "assume" that your module adds a colon always, I still think it's good practice to test for it too to prevent unexpected problems - I've seen assumptions break many routines

The fix in #1 works as of Drupal 6.14, thank you!

If you want to remove colon on specific label, here is jQuery code (example for two text field):

if (Drupal.jsEnabled) {
    $(document).ready(function()
    {
        var lab1 = $('#edit-first-name-wrapper > label');
        lab1.html(lab1.html().replace(":", ""));

        var lab2 = $('#edit-second-name-wrapper > label');
        lab2.html(lab2.html().replace(":", ""));
    });
}

Just set $('#edit-....-wrapper > label') to appropriate id of textfield.

Tracking.

The script from sakiland applied on all label in a form :

if (Drupal.jsEnabled) {
    $(document).ready(function()
    {
        var lab1 = $('#myform-id label');
        lab1.each(function() { $(this).html($(this).html().replace(":", "")); });
    });
}

I used this snippet in #7 in my webform and it worked perfectly except for one problem: i have a label without text in it (value = ). this was the main reason i was looking into this issue in the first place. this method removes all colons except for the label without any text in it, which just appears as a colon with nothing else next to it. how can i fix this?

@awm6392 #23

I suspect that #7 has a problem with blank labels and length

try #22 which does not rely on length. It assumes you have the jQuery library loaded, which is added in a Drupal installation in the misc directory.

#22 works great - thanks birdy! Don't forget to replace "#myform-id" with your own

Here's my non-JavaScript solution to remove the colon only from webform fields. This code goes in your template.php file and you need to replace "mythemename" with your theme name in the function declaration. It works for me in Drupal 6.11

/**
 * Return a themed form element.
 *
 * @param element
 *   An associative array containing the properties of the element.
 *   Properties used: title, description, id, required
 * @param $value
 *   The form element's data.
 * @return
 *   A string representing the form element.
 *
 * @ingroup themeable
 */
function mythemename_form_element($element, $value) {
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  $output = '<div class="form-item"';
  if (!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
		if(!isset($element['#webform_validated'])){
		  $output .= ' <label for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
		}
		else{	  
		 //removed colon
		  $output .= ' <label for="'. $element['#id'] .'">'. $t('!title !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";	  	
		}
    }
    else {
      $output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
  }

  $output .= " $value\n";

  if (!empty($element['#description'])) {
    $output .= ' <div class="description">'. $element['#description'] ."</div>\n";
  }

  $output .= "</div>\n";

  return $output;
}

Hello :

I solved using this jquery code:

$(document).ready(function() {
  $('#node-38 label').each(
                            function() {
                              var myText = $(this);
                              myText.text( myText.text().replace(':','') );
                            }
                          );
});

Regards,
Luis.

Solution #1 worked great (using Drupal 6), thanks! And yes, as mentioned above, don't forget to do two things:

1) In the first line, replace the function name: "mytheme_form_element($element, $value)", with your theme's name like this: "mytheme_form_element($element, $value)"
2) flush your cache

Greatly appreciated,

Ben

P.S. The JQuery solutions looked good as well, except for one thing - don't they strip out colons that are supposed to be there, too?

@flamingvan thanks for the code

I landed here when looking to remove colons, it seems there is now a module for this
http://drupal.org/project/no_colons

Nice, Very usefull posting thanks so much for share this.i used this and its working well.once again thanks so much.

thanks all, this post really helped :)
i tried #1 (read #28) and #14 both worked

BTW: http://drupal.org/project/no_colons

I didn't want to deal with testing and getting an entire module into a production environment (with weekly updates) just to get this kind of functionality to work, and I liked the jQuery solution in #22 here. I wanted to improve on it a bit in order to:

1. narrow it down to only remove the colons from the "top-level" label tags, and not touch the text in the label tags (i.e. checkboxes option text, radio button text, etc.)
2. only remove one colon (inside the label tags):
   • for required fields, the last colon before the required* span tag, or
   • for non-required fields, the last colon at the end of label text (i.e. no span * tag)
3. only remove the colon if there was a non-alphanumeric character (i.e. question mark, exclamation point, etc.) right before it.

Here's my solution (using regex):

$(document).ready(function() {
  $('form[id^=webform] div.webform-component > div.form-item > label').each(function() {
    $(this).html($(this).html().replace(/^(.+)(\W)\:\s?(<span.+\<\/span>)?$/, "\$1\$2 \$3"));
  });
});

If you want to remove the last colon from all the elements, this should work as well:

$(document).ready(function() {
  $('form[id^=webform] div.webform-component > div.form-item > label').each(function() {
    $(this).html($(this).html().replace(/^(.+)\:\s?(<span.+\<\/span>)?$/, "\$1 \$2"));
  });
});

Caveats: 1) I'm using a Zen subtheme in D6 along with the Webform module, so your [selector] may vary. 2) I didn't do any kind of performance testing on it (assuming the .replace function with regex is slow).

Drupal 7

I came across this thread looking to make a modification in my custom template (much better than a jQuery solution if you can cope with writing templates). However the function will not work in Drupal 7+ as the $value parameter has been dropped.

See http://api.drupal.org/api/drupal/includes!form.inc/function/theme_form_e...
Copy the code into your template.php file, rename the function to YourTemplate_form_element, make desired changes, and you're done.

I actually wanted to swap the label and the element order around. This seems to be done via a setting, but I have no idea where to change that setting in the admin so I've hard-coded it.

Re: #14 tordrup, you are my hero! I love Drupal and everything, but this is one very aggravating choice baked into Drupal, with the only workarounds being extremely heavy-handed. I'll borrow your lightweight script and call it a day.