Answers.Body: <p>You write a small jQuery script and include it on your forms</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  CRM.$(function($) {
    let label, labelDiv, value;
    $('input').each(function() {
      value = $(this).val();
      labelDiv = $(this).closest('.crm-section').find('.label');
      $(labelDiv).hide();
      label = $(labelDiv).text();
      label = label.replace(/\s\s+/g, ' ');
      $(this).attr("placeholder", label);
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>There are various ways to include jquery in your forms</p>
  
  <ol>
  <li>Implement hook(buildform or preprocess or pagerun) via extension/plugin/module to add js using <a href="https://docs.civicrm.org/dev/en/latest/framework/resources/" rel="nofollow noreferrer">add resource method</a></li>
  <li>Override tpl file using <a href="https://civicrm.org/blog/dave-greenberg/now-its-easier-add-custom-behaviors-templates" rel="nofollow noreferrer">extra.tpl method</a> to include jquery</li>
  </ol>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-13T13:06:23.980Z
Answers.Text: Thanks. But what do you mean by forms? Create a tpl file or something?
Answers.UserDisplayName: Tapash
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-13T13:12:27.967Z
Answers.Text: Just updated my answer
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-13T14:44:57.290Z
Answers.Text: Thanks @Pradeep which template does the contribution pages use?
Answers.UserDisplayName: Tapash
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-13T14:51:31.433Z
Answers.Text: templates/CRM/Contribute/Form/Contribution/Main tpl
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-13T14:53:41.183Z
Answers.Text: If you trying to override the template by custom templates or extra.tpl than make sure your extension or module or plugin dont have this file already in their folder than either yours or module will be invoked based on how ext or module is invoked
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-13T13:01:37.207Z
Answers.LastActivityDate: 2020-03-13T13:12:08.923Z
Answers.LastEditDate: 2020-03-13T13:12:08.923Z
Answers.UserDisplayName: Pradeep Nayak
Body: <p>I would like to convert all the form fields labels of the contribution pages and events pages into placeholder. Is it possible to do? If yes, how please ? Thanks </p>
  
  <p><a href="https://i.sstatic.net/doihC.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/doihC.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.sstatic.net/3JXON.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/3JXON.png" alt="enter image description here"></a></p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-13T08:50:58.540Z
Comments.Text: Can you provide an example of the end result you want to achieve?
Comments.UserDisplayName: Aidan
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-13T08:52:25.713Z
Comments.Text: @Aidan say for names, address, any custom fields that are usually available by profile, for those ones remove labels and show a placeholder of the same name as labels.
Comments.UserDisplayName: Tapash
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-13T09:01:19.053Z
Comments.Text: Still not sure I understand what you want to do, but does Word Replacement or even translation help?
Comments.UserDisplayName: Aidan
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-13T12:49:58.557Z
Comments.Text: @Aidan I have added screenshot
Comments.UserDisplayName: Tapash
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-13T14:09:10.740Z
Comments.Text: Ah - I get it now!  A picture is worth a 1000 words etc ...
Comments.UserDisplayName: Aidan
Tags: <contribution-page><forms>
Title: How to change contribution pages profile labels into a placeholder?
ThreadText: # How to change contribution pages profile labels into a placeholder?
  
  (Asked by: username_0 on 2020-03-13)
  
  I would like to convert all the form fields labels of the contribution pages and events pages into placeholder. Is it possible to do? If yes, how please ? Thanks
  
  [![enter image description here](https://i.sstatic.net/doihC.png)](https://i.sstatic.net/doihC.png)
  
  [![enter image description here](https://i.sstatic.net/3JXON.png)](https://i.sstatic.net/3JXON.png)
  
  **Tags:** contribution-page, forms
  
  > **Comments:**
  > **username_1**: Can you provide an example of the end result you want to achieve?  
  > **username_0**: @username_1 say for names, address, any custom fields that are usually available by profile, for those ones remove labels and show a placeholder of the same name as labels.  
  > **username_1**: Still not sure I understand what you want to do, but does Word Replacement or even translation help?  
  > **username_0**: @username_1 I have added screenshot  
  > **username_1**: Ah - I get it now!  A picture is worth a 1000 words etc ...  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2020-03-13. Score: 2 | Accepted answer
  
  You write a small jQuery script and include it on your forms
  
  
  There are various ways to include jquery in your forms
  
  Implement hook(buildform or preprocess or pagerun) via extension/plugin/module to add js using add resource method
  Override tpl file using extra.tpl method to include jquery
  
  > **Comments:**
  > **username_0**: Thanks. But what do you mean by forms? Create a tpl file or something?  
  > **username_2**: Just updated my answer  
  > **username_0**: Thanks @Pradeep which template does the contribution pages use?  
  > **username_2**: templates/CRM/Contribute/Form/Contribution/Main tpl  
  > **username_2**: If you trying to override the template by custom templates or extra.tpl than make sure your extension or module or plugin dont have this file already in their folder than either yours or module will be invoked based on how ext or module is invoked  
  
  ---
  
  