1

I want to render a form element like this:

<div class="form-group clearfix">
  <label>Title: <span class="red">*</span></label> 
  <div class="pull-left">
    <input type="text" placeholder="Title">
    <a href="javascript:void(0);" class="hint hint--right" data-hint="Tooltip text goes here!!!"></a>
  </div>
</div>

I have tried something like this:

$form['title']['#prefix'] = '<div class="form-group clearfix">';
$form['title']['#title'] = '<label>Title: </label>';
$form['title']['#attributes'] = array('placeholder'=> array('Title'));
$form['title']['#suffix'] = '<div class="pull-left"><a href="javascript:void(0);" class="hint hint--right" data-hint="Enter the title."></a></div></div>';

But it gives me:

<div class="form-group clearfix">
  <div class="form-item form-type-textfield form-item-title">
    <label for="edit-title">Title:  <span class="form-required" title="This field is required.">*</span></label>
    <input placeholder="Title" type="text" id="edit-title" name="title" value="" size="60" maxlength="255" class="form-text required uniqueness-processed">
  </div>
  <div class="pull-left">
    <a href="javascript:void(0);" class="hint hint--right" data-hint="Enter the title."></a>
  </div>
</div>

So you see, there a basic structural difference after it is rendered by Drupal. What am I doing wrong? It will be better if I can manage the structure through form api only and dont have to create a template page for this form.

Any suggestions?

  • 1
    It will be better if I can manage the structure through form api only and dont have to create a template page for this form. I would disagree. You want to completely change markup Drupal provides, so it stands to reason you need to theme it. Whether that actually takes the form of a template file or theme function is irrelevant, but if you want to re-theme Drupal you need to use the theme system – Clive Jul 15 '14 at 14:39
  • Almost every form element is wrapped with .form-item or some common classes that you can use in both CSS and JS. If you are trying to integrate some javascript plugin to your site, I doubt you will ever need to wrap them again. Just make a clever use of the selectors. – AyeshK Jul 16 '14 at 8:23
2

check it out this code:

$form['title']=array();
    $form['title']['#prefix'] = '<div class="form-group clearfix"> <label>Title: <span class="red">*</span></label><div class="pull-left">';
    $form['title']['#type']='textfield';
    $form['title']['#attributes'] = array('placeholder'=> array('Title'));
    $form['title']['#suffix'] = '<a href="javascript:void(0);" class="hint hint--right" data-hint="Enter the title."></a></div></div>';  

May this will help you

| improve this answer | |
  • Works perfect! Thanks, just had to hide the original element title $form['title']['#title_display'] = 'invisible'; – Pratip Ghosh Jul 16 '14 at 8:06

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.