5

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('.label').hide();
cj('#payment_information fieldset:first legend').hide();
cj('input[name$="billing_middle_name"]').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() {
    cj(this).parent().parent().children('.label').show();
});

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. – William Mortada 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> – CMM Administrator 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). – CMM Administrator 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. – CMM Administrator May 8 '18 at 15:15

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.