22

I'm trying to add the placeholder attribute to all textfields across my website, but I'm having no luck.

I've created a module that overrides hook_form_alter

function mymodule_form_alter(&$form, &$form_state, $form_id)
{
    foreach ($form as $key => $value) {
        if ("textfield" == $value["#type"]){
            $value['#attributes']["placeholder"] = t($value["#title"]);
        }
    }
}

I should tell you that I'm also using the webform module.

10 Answers 10

14

Because I'm using the webform module I could just theme the global webform template (webform-form.tpl.php) and put it in my theme folder. No need to complicate things with a module.

foreach ($form["submitted"] as $key => $value) {
    if ("textfield" == $value["#type"]) {
        $form["submitted"][$key]['#attributes']["placeholder"] = t($value["#title"]);
    } 
}

I put this at the top of the template file.

  • 3
    This can generate some "undefined index" error when doing the foreach loop, remember to check if the index isset() – Matteo Dec 13 '12 at 16:54
10

Slightly change it to....

function mymodule_form_alter(&$form, &$form_state, $form_id)
{
    foreach ($form as $key => $value) {
        if ("textfield" == $value["#type"]){
            $form[$key]['#attributes']["placeholder"] = t($value["#title"]);
        }
    }
}

$value in foreach scope is value type not a reference.


EDIT:

I just experimented with following code and I succeeded to recursively iterate whole of the form for textfields to edit their attributes.

function add_placeholder(&$form){
    foreach($form as $key => $val){
        if(substr($key,0,1) == '#' && $form[$key] == 'textfield'){
            $form['#attributes'] = array('placeholder' => t('some text'));
        }else if(is_array($form[$key])){
            add_placeholder($form[$key]);
        }
    }
}
  • Thanks for your help! Should have spotted that one myself. Because it's not solving my original problem I can't award you with a correct answer. – Josua Pedersen Oct 6 '11 at 16:58
4

You could probably do that with hook_form_alter or hook_form_FORM_ID_alter and adding the "placeholder" attribute

e.g, untested, but something like:

/**
 * Implements hook_form_FORM_ID_alter
 */
function mymodule_form_webform_client_form_12_alter(&$form, &$form_state) {
  drupal_set_message('<pre>'.print_r($form,1).'</pre>'); // debug form
  $form['submitted']['my_form_component']['#attributes'] = array('placeholder' => 'placeholder 1');
}

Find the hidden form element in the webform HTML named form_id to get the correct form id for the form_alter function name.

  • will i have to make module for this? – user13218 Feb 8 '13 at 4:58
  • 1
    You can do a module or set that in your theme's template.php, changing mymodule by the template's machine name. – mariomc Feb 8 '13 at 11:09
  • Will this code work for D6 too ? – Bala Nov 16 '13 at 12:06
4

A better approach to Josua Pedersen's code:

foreach ($form['submitted'] as $key => $value) {
 if (isset($form['submitted'][$key])) {
   $types = array('textfield', 'webform_email', 'textarea');

   if (isset($value['#type']) && in_array($value['#type'], $types)) {
     $form['submitted'][$key]['#attributes']['placeholder'] = t($value['#title']);
   }
 }
}
  • +1, this code is working great, I just copied and pasted in my custom module, with drupal 6, but I got this error warning: Invalid argument supplied for foreach() in C:\wamp\www\r4launch\sites\all\modules\advanced\advanced.module on line 16. – Bala Nov 16 '13 at 13:26
  • 1
    I solved it by placing inside the if condition. if (isset($form_state['webform'])) { above code goes here.. } – Bala Nov 16 '13 at 13:36
3

In your code, you change the variable $value that never when associate again to the variable $form, which one is passed by reference.

In clear, you make some changes but don't send it back to Drupal.

Also, you can do it like that (I've not tested it but in theory it should work).

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  $keys = element_children($form);
  foreach ($keys as $key) {
    if (in_array(array('textfield', 'textarea'), $form[$key]['#type'])) {
      if (!empty($form[$key]['#title'])) {
        $placeholder = array('placeholder' => t($form[$key]['#title']));
        if (is_array($form[$key]['#attributes'])) {
          $form[$key]['#attributes'] = array_merge($form[$key]['#attributes'], $placeholder);
        }
        else {
          $form[$key]['#attributes'] = $placeholder;
        }
      }
    }
  }
}

I was just lazy to add a check for fieldset and add placeholder to the children. But I guess you can change it very easily.

3

A slight improvement to @Josua's template file solution: This code will also add placeholder text to webform email feilds.

foreach ($form["submitted"] as $key => $value) {
    if ("textfield" == $value["#type"]) {
        $form["submitted"][$key]['#attributes']["placeholder"] = t($value["#title"]);
    }
    if($value['#type'] == "webform_email") {
        $form["submitted"][$key]['#attributes']["placeholder"] = t($value["#title"]);
    } 
}
  • To be a true improvement you should do 2 things: 1) check the index to be set 2) use a better syntax to check the different cases – Matteo Dec 13 '12 at 21:37
2

using hook_form_alter try this

function mymodule_survey_builder_form_alter(&$form, &$form_state, $form_id) {    
 if ($form_id == 'form_builder_field_configure') {
        $form['title']['#attributes']=array('placeholder' => t('Please enter the Qustion(English) name here.'));
}
}
1

For anyone using an older or outdated version of Drupal's Webform module, it's worth noting that placeholder support was added in the 7.x-4.x branch (June 2013).

Thus, HTML5 placeholder functionality is now a native, built-in option along with custom CSS classes for components and several other long-requested features.

Here's a screenshot of how the new functionality appears:

Drupal Webform Component Settings showing HTML5 placeholder support

0

In most cases, I guess, one would only want to add placeholder attributes on some forms.

If you want to add placeholder to all webforms, you can do it like this:

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  // If webform, add "placeholder" attributes to all textfields
  // got code here:http://drupal.stackexchange.com/questions/12706/adding-html5-placeholder-to-all-drupal-forms
  if (isset($form['#node']->type) && ($form['#node']->type == 'webform')) {
    foreach ($form["submitted"] as $key => $value) {
      switch ($value["#type"]) {
        case 'textfield':
        case 'textarea':
        case 'webform_email':
          $form["submitted"][$key]['#attributes']["placeholder"] = $value["#title"];
          break;
      } 
    }
  }
}
0

Just use the module for it: Webform Hints

Its exactly what you need. Its easy to manage and there is no need to custom code. This module also provides support for legacy browsers that don't support the placeholder attribute.

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.