Drupal 7 - Overriding Basic Form HTML Mark-Up

Question

I'm really struggling to get my head around Drupal Form API...actually Drupal as a whole.

Here's my problem, I've created a form with renders fine, however what I've like to do now is wrapper divs around certain form elements, this is so I style my form in a way that'll suit my site and not some box standard crap.

Can someone please help or at the least point in the right direction of a "good" tutorial and not some brief and very vague nonsense that is plastered all over the web?

thanks.

Answer 1

hook_form_alter is your friend here.

In your theme's template.php file you can add prefixes and suffixes to forms, form elements etc.

Below is an example from a site I did recently.

function bhha_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'user_login') {      
    $form['#prefix'] = '<div class="loginForm">';
    $form['#suffix'] = '</div>';
    $form['name']['#title'] = Null; // Change text on form
    $form['name']['#description'] = Null; // Change text on form
    $form['name']['#attributes'] = array('placeholder' => t('username'));
    $form['name']['#size'] = '30';
    $form['pass']['#title'] = Null;
    $form['pass']['#description'] = Null; // Change text on form
    $form['pass']['#attributes'] = array('placeholder' => t('password'));
    $form['pass']['#size'] = '30';
    //$form['actions']['submit']['#value'] = t('password');
    $form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/Login.png');
    $form['links']['#markup'] = '<a class="user-password" href="'.url('user/password').'">' . t('Forgot your password?') . '</a>'; // Remove Request New Password from Block form
    $form['links']['#weight'] = 540;
  }
}

Inspect your code to get the form you want to theme's id. Replace underscores with hyphens and you should be able to use the example above to do what you want.

At it's most basic I guess an example would be:

function THEME_NAME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'FORM_ID') {      
        // Adds a wrapper div to the whole form
    $form['#prefix'] = '<div class="loginForm">';
    $form['#suffix'] = '</div>';

        // Adds a wrapper div to the element NAME
    $form['name']['#prefix'] = '<div class="formRow">';
    $form['name']['#suffix'] = '</div>';
  }
}

Answer 2

Several ways to do this. For example

1. If you are looking to overwrite the markup at field level, you could use field.tpl.php or template_preprocess_field().
2. If you want to change the enclosing markup of your form (although I'd wonder why as Drupal's standard markup is immensely style-able), you'd want to register theme functions and handle markup thusly. Here's a nice article that elaborates on this.