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?

2
  • 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
    Commented Jul 15, 2014 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.
    – AKS
    Commented Jul 16, 2014 at 8:23

1 Answer 1

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

1
  • Works perfect! Thanks, just had to hide the original element title $form['title']['#title_display'] = 'invisible'; Commented Jul 16, 2014 at 8:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.