Answers.Body: <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-29T16:36:35.557Z
Answers.LastActivityDate: 2019-08-29T16:36:35.557Z
Answers.UserDisplayName: LyonsDigital
Body: <p>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.</p>
  
  <p>We would like it appear like this:</p>
  
  <p><a href="https://i.sstatic.net/bQKRu.jpg" rel="noreferrer"><img src="https://i.sstatic.net/bQKRu.jpg" alt="enter image description here"></a></p>
  
  <p>instead of this:</p>
  
  <p><a href="https://i.sstatic.net/3GiLd.jpg" rel="noreferrer"><img src="https://i.sstatic.net/3GiLd.jpg" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <pre><code>// 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 + ' &gt; 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();
  });
  </code></pre>
  
  <p>I would really appreciate any insight anyone could give. 
  Thank you, Malachi</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-02T13:02:02.077Z
Comments.Text: 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.
Comments.UserDisplayName: William Mortada
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-08T15:07:22.520Z
Comments.Text: 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>
Comments.UserDisplayName: CMM Administrator
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-08T15:15:45.333Z
Comments.Text: 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).
Comments.UserDisplayName: CMM Administrator
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-08T15:15:53.463Z
Comments.Text: 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.
Comments.UserDisplayName: CMM Administrator
Tags: <civievent><civicontribute><forms>
Title: Placeholders instead of labels in forms
ThreadText: # Placeholders instead of labels in forms
  
  (Asked by: username_0 on 2018-04-26)
  
  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:
  
  instead of this:
  
  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
  
  **Tags:** civievent, civicontribute, forms
  
  > **Comments:**
  > **username_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.  
  > **username_0**: 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>  
  > **username_0**: 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).  
  > **username_0**: 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.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2019-08-29. Score: 1
  
  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.
  
  
  ---
  
  