We would like to use placeholders instead of labels on all our CiviEvent and Contribution forms. What is the best way to do this? We are using CiviCRM with Drupal.

We would like it appear like this:

enter image description here

instead of this:

enter image description here

We have been hiding the labels and setting the placeholder text using the following JQuery in a Main.extra.tpl file. However, this code breaks every time we upgrade CiviCRM. I am currently working on upgrading from Civi 4.6.14 to 5.0.0 and am thinking there has to be a better way of doing this. Would it be possible for Civi to make it easy for users to choose to use placeholders instead of labels somehow?

// Hide all labels
cj('#payment_information fieldset:first legend').hide();

// If IE, then setting placeholder on Gift Amount field causes payment block not to appear
if (detectIE()) {
    //alert('IE ' + detectIE());

    // unhide label for Gift Amount
    cj('.other_amount-section .label').show();

    cj('#billing-payment-block input[type=text].crm-form-text, .custom_post_profile-group input[type=text].crm-form-text').each(function() {
        var label = cj('label[for="'+cj(this).attr('id')+'"]').hide(); // Hide all labels
        cj(this).attr('placeholder', cj.trim(label.text())).attr('title', cj.trim(label.text()).replace('*', ''));
    cj('input[type=text].crm-form-text').each(function() {
        var label = cj('label[for="'+cj(this).attr('id')+'"]'); // Hide all labels
        cj(this).attr('title', cj.trim(label.text()).replace('*', ''));

} else {

    cj('input[type=text].crm-form-text').each(function() {
        var label = cj('label[for="'+cj(this).attr('id')+'"]').hide(); // Hide all labels
        cj(this).attr('placeholder', cj.trim(label.text())).attr('title', cj.trim(label.text()).replace('*', ''));


// Set Placeholder text and Tooltip to label defined in CiviCRM -- for all select2 menus
cj('div.select2-container').each(function() {
    var idselect = '#' + cj(this).attr('id');
    var label = cj(idselect + ' > label.select2-offscreen');
    var placeholder = cj.trim(label.text());
    var tooltip = placeholder.replace('*', '');
    cj(idselect + ' .select2-chosen').text(placeholder).attr('title', tooltip);

// Unhide all radio labels
cj('input[type=radio]').each(function() {

I would really appreciate any insight anyone could give. Thank you, Malachi

  • 1
    I can see the attraction of doing this but it may have a negative impact on the accessibility and usability of your form. In general it is a bad idea to hide form labels as it can make it very difficult for people using screen readers. It can also be awkward for users on mobile devices. When you enter a field you can no longer see what it is for. May 2 '18 at 13:02
  • Thanks for your response. I understand the concerns about accessibility and usability. To solve the accessibility issue we position the labels off screen so they can still be read by screen readers using: .hidden {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} <div class="hidden">This text is hidden.</div> May 8 '18 at 15:07
  • We also us the title attribute for a pop-up hint of the purpose of the field after the user enters the field (but as you pointed out that doesn't help with mobile). May 8 '18 at 15:15
  • It would be nice if the placeholder and title attributes were set consistently by Civi and then we could elect to use them or not in our CSS. May 8 '18 at 15:15

I've been working on a similar goal but I've been working in WordPress. I followed the advice given to me and added Caldera Forms with CF-CiviCRM. CF-CiviCRM is WordPress plugin that functions as a bridge between Calder Forms and CiviCRM. I fully appreciate that you are currently in Drupal. You really need to decide if you are on the right platform for your ultimate goal. If you have the coding chops to pull this off, keep going the way you are going. On the other hand, if you want an existing solution to the problem you've presented, Wordpress with CiviCRM and Caldera Forms is a very workable solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.