2

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.

2

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>
  • I tried this but it just adds a CSS class to it that hides it. I'd really like a better solution for cleaner markup. – barrakuda Dec 4 '14 at 5:46
0

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.

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.