Cleaning Up Drupal Form and/or Controls Theme HTML (eliminating useless wrappers)

I’m in the process of developing my personal site and have used Drupal 7. The only thing I have really had to do is create my own theme and clean-up the front-end HTML so that I can actually be proud of my site. The only place this seems to be proving difficult is the default login form and a custom contact form created using webform. The admin can maintain the default HTML trash but the front-end needs major work to be something that represents by skill level well. So if anyone else has tackled this issue I would be glad to have some pointers.

Thanks

It would likely be easier (relatively) to tweak the default contact form using functions in template.php than trying to alter Webform’s output. Ten minutes with that module was more than enough to put me off it when I had a very similar need to yours. You can also create a template (tpl.php file) for the contact form using this method, although I haven’t tried that. Functions in template.php would also be the best way to tidy the login form, too; though I’m not sure why you would need to show it to visitors unless, of course, you’re going to let Joe Public and his mates have accounts for your personal site.

I won’t lie to you: theme functions are pain in the backside, but most of what you are likely to want to change is doable. If you mention specifics, there is a small rat’s chance that I might have already found the very solution! Failing that, I’ll happily give any pointers that I can.

As Mat30 says, you can override the default login with template.php + a login template. I’ve done this a lot with D6 but I haven’t tried with D7 yet…

Here’s how I did it with D6

In template.php I added two functions to override the OEM login


<?php
/**
* Function to set up login preprocessor 
* so we can use our own login template and insert tailor made content.
*/
function my-theme-name_theme() {
  return array(
    'user_login' => array(
      'template' => 'user-login',
      'arguments' => array('form' => NULL),
    ),
    // other theme registration code...
  );
}

/**
* Function to preprocess Login and insert custom welcome text
*/
function my-theme-name_preprocess_user_login(&$variables) {

  $variables['form']['name']['#size'] = 35;
  $variables['form']['pass']['#size'] = 35;
  
  $variables['intro_text'] = t('Welcome to my super duper site. Please use the fields below to login.');
  $variables['rendered'] = drupal_render($variables['form']);
  $variables['password_retrieve'] = t('If you have misplaced your user name or password, click <a href="/user/password"><strong>here</strong></a> to retrieve them.');
}

Ok, so now in the first function, I’ve told Drupal to use a template called user-login.tpl.php

In the second function I’ve modified the login fields because I didn’t like the massive long fields Drupal makes and I’ve added some variables we can pulll out in user-login.tpl.php

  • I added a password retrieval link to the login form because I used CSS to hide it on this particular site.

Here’s my user-login.tpl.php


<p><?php print $intro_text; ?></p>
<p><?php print $password_retrieve; ?></p>
<div class="my-form-wrapper">
  <?php print $rendered; ?>
</div>

So as you can see I’ve rendered my intro text and password links and then wrapped the login form in my own div with a custom class so I can style it as I want to.

This is a D6 version but the same idea can be applied to D7. I’m not sure how much of the syntax will need to be adjusted to work with the D7 API… Maybe none.

Alright, thanks for advice I’ll have to do some trial and error here. Man… D7 is powerfully but to change mark-up is a damn pain in the @ss. If it wasn’t my own portfolio site I would just leave it be.

Yeah, I think I know what you mean about it being a pain to change markup especially compared to D6 but it is more granular in the ----.tpl.php department so you actually have more control that you used to.

It seems I always got to /modules/system, grab a copy of html.tpl.php and put it in my custom theme so I can modify it as needed. Usually just to force IE to the latest version:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />