Webform theming field labels through webform-form.tpl.php

Question

I'm theming a Webform I created by using a custom webform-form-[nid].tpl.php template. I've been able to render individual fields fine, but I'm having a problem with the date field which is split into 3 fields (month, day, year).

To wrap each item in custom HTML, I render each of those fields like this:

 <?php print drupal_render($form['submitted']['birthdate']['day']); ?>
 <?php print drupal_render($form['submitted']['birthdate']['month']); ?>
 <?php print drupal_render($form['submitted']['birthdate']['year']); ?>

But the label is automatically being rendered separately, so how can I render it manually?

This is the output that I'm getting: (simplified for ease of understanding)

<div class="row">

  <div class="column">
    <label for="month">Month</label>
    <select name="submitted[birthdate][month]">
      <option selected="selected" value="">Month</option>
      <option value="1">Jan</option>
      ...more options...
    </select>
  </div>

  <div class="column">
    <label for="day">Day</label>
    <select name="submitted[birthdate][day]">
      <option selected="selected" value="">Day</option>
      <option value="1">1</option>
      ...more options...
    </select>
  </div>

  <div class="column">
    <label for="year">Year</label>
    <select name="submitted[birthdate][year]">
      <option selected="selected" value="">Year</option>
      <option value="2014">2014</option>
      ...more options...
    </select>
  </div>

</div>

<!-- this gets generated automatically -->
<div class="webform-component--birthdate">
  <label for="birthdate">Birthdate</label>
  <div class="webform-container-inline">
    <!-- empty container here where date fields were being rendered -->
  </div>
</div>

So I need to somehow print that "Birthdate" label manually so I can place it wherever I need, like so:

row
  column label
  column month
  column day
  column year
/row

I need to do this so I can wrap each element with CSS classes for a responsive grid.

Answer 1

You can simply hide the label from date field setting and add like this :

<div class="date-wrapper">
  <label>Label here</label>
  <div class="date-field">
    <?php print drupal_render($form['submitted']['birthdate']['day']); ?>
    <?php print drupal_render($form['submitted']['birthdate']['month']); ?>
    <?php print drupal_render($form['submitted']['birthdate']['year']); ?>
  </div>
</div>

Answer 2

So this is what I ended up doing. Please let me know if this is a good approach or not.

I hid the date fields like this:

<?php hide($form['submitted']['birthdate']); ?>

This way the date fields (and label) don't get rendered automatically at all. Only when I manually render them like in my initial example.

And then I add the label manually, like Sumit Madan suggested.