Posted by hokuspokus on November 11, 2012 at 9:53pm
Hello all
Delving into customizing my user's registration interface and I am running into trouble. I would like to use the HTML5 Placeholder attribute to move field descriptive text inside the form fields instead of below them to clean up the interface. I'm using the LoginTobboggan module to give me more control over user registration and to unify the Login/Registration page and blocks.
This is the base theming override for the unified login/register page for LoginTobboggan:
/**
*
* THEME FUNCTIONS!
*
* You may override and change any of these custom HTML output functions
* by copy/pasting them into your template.php file, at which point you can
* customize anything, provided you are using the default phptemplate engine.
*
* For more info on overriding theme functions, see http://drupal.org/node/55126
*/
/**
* Theme the username title of the user login form
* and the user login block.
*/
function theme_lt_username_title($variables) {
switch ($variables['form_id']) {
case 'user_login':
// Label text for the username field on the /user/login page.
return t('Username or e-mail address');
break;
case 'user_login_block':
// Label text for the username field when shown in a block.
return t('Username or e-mail');
break;
}
}
/**
* Theme the username description of the user login form
* and the user login block.
*/
function theme_lt_username_description($variables) {
switch ($variables['form_id']) {
case 'user_login':
// The username field's description when shown on the /user/login page.
return t('You may login with either your assigned username or your e-mail address.');
break;
case 'user_login_block':
return '';
break;
}
}
/**
* Theme the password title of the user login form
* and the user login block.
*/
function theme_lt_password_title($variables) {
// Label text for the password field.
return t('Password');
}
/**
* Theme the password description of the user login form
* and the user login block.
*/
function theme_lt_password_description($variables) {
switch ($variables['form_id']) {
case 'user_login':
// The password field's description on the /user/login page.
return t('The password field is case sensitive.');
break;
case 'user_login_block':
// If showing the login form in a block, don't print any descriptive text.
return '';
break;
}
}
/**
* Theme the Access Denied message.
*/
function theme_lt_access_denied($variables) {
return t('You are not authorized to access this page.');
}
/**
* Theme the loggedinblock that shows for logged-in users.
*/
function theme_lt_loggedinblock($variables){
return theme('username', array('account' => $variables['account'])) .' | ' . l(t('Log out'), 'user/logout');
}
/**
* Custom theme function for the login/register link.
*/
function theme_lt_login_link($variables) {
// Only display register text if registration is allowed.
if (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL)) {
return t('Log in/Register');
}
else {
return t('Log in');
}
}
/**
* Theme the login successful message.
*
* @param $account
* A user object representing the user being logged in.
*/
function theme_lt_login_successful_message($variables) {
return t('Log in successful for %name.', array('%name' => format_username($variables['account'])));
}
/**
* Theme function for unified login page.
*
* @ingroup themable
*/
function theme_lt_unified_login_page($variables) {
$login_form = $variables['login_form'];
$register_form = $variables['register_form'];
$active_form = $variables['active_form'];
$output = '';
$output .= '<div class="toboggan-unified ' . $active_form . '">';
// Create the initial message and links that people can click on.
$output .= '<div id="login-message">' . t('You are not logged in.') . '</div>';
$output .= '<div id="login-links">';
$output .= l(t('I have an account'), 'user/login', array('attributes' => array('class' => array('login-link'), 'id' => 'login-link')));
$output .= ' ';
$output .= l(t('I want to create an account'), 'user/register', array('attributes' => array('class' => array('login-link'), 'id' => 'register-link')));
$output .= '</div>';
// Add the login and registration forms in.
$output .= '<div id="login-form">' . $login_form . '</div>';
$output .= '<div id="register-form">' . $register_form . '</div>';
$output .= '</div>';
return $output;
}I was able to figure out how to add placeholder text for the login fields by modifying the template.php file thusly:
function mythemename_form_alter( &$form, &$form_state, $form_id )
{
if ( TRUE === in_array( $form_id, array( 'user_login', 'user_login_block' ) ) )
{
$form['name']['#attributes']['placeholder'] = t( 'Username or E-Mail' );
$form['pass']['#attributes']['placeholder'] = t( 'Password' );
}
}but I haven't been able to get this to work with the registration fields. What is the proper function and out put for the registration fields? I tried to use the instructions Using Theme Override Functions to do the dirty print out of the output, but the instructions
How to Find which Theme Function to Override
If you can't find what you're looking for in the Drupal API or don't know where to begin, here's a last resort method of figuring out what theme function you need to override.
WARNING: This trick requires hacking Drupal core, which should never happen on a production site! You should employ this trick only when absolutely necessary -- and even then, only on a development site.
Open /includes/theme.inc. Look for the theme() function on line 161. Find line 170. It should look like this:
<?php
return call_user_func_array($functions[$function], $args);
?>
Add this line directly above it (and comment out the original line):
<?php
return '<!-- begin ' . $functions[$function] . ' -->' . call_user_func_array($functions[$function], $args) . '<!-- end ' . $functions[$function] . ' -->';
// return call_user_func_array($functions[$function], $args);
?>
This will output code like this in your HTML source:
<!-- begin theme_athemefunction -->[OUTPUT]<!-- end theme_athemefunction -->don't seem correct for D7. I didn't see the described code in theme.inc at line 160-170.
I tried this in the template.php file but it didn't work.
function mythemename_form_alter( &$form, &$form_state, $form_id )
{
if ( TRUE === in_array( $form_id, array( 'user_register_form') ) )
{
$form['name']['#attributes']['placeholder'] = t( 'Desired Username' );
$form['mail']['#attributes']['placeholder'] = t( 'E-mail' );
$form['conf_mail']['#attributes']['placeholder'] = t( 'Confirm E-mail' );
}
}I want to avoid module based solutions and just go with the templates.
Thanks for any info in advance!
Comments
A would try a javascript
A would try a javascript solution, with compact forms you can use the labels as placeholders by default, here's a possible solution using the module.
You may want to
You may want to
var_dump($form);to find out the hierarchy, maybe you want$form['account']...before any name, mail and conf_mail, not tested. You'd better check from the dump, anyway.love, light n laughter
You were close
This code will insert placeholder text for user name and e-mail on the registration form, if you put it in your template.php:
function MYTHEMENAME_form_alter( &$form, &$form_state, $form_id ) {if ( TRUE === in_array( $form_id, array( 'user_register_form') ) ) {
$form['account']['name']['#attributes']['placeholder'] = t( 'Desired Username' );
$form['account']['mail']['#attributes']['placeholder'] = t( 'E-mail' );
$form['account']['conf_mail']['#attributes']['placeholder'] = t( 'Confirm E-mail' );
}
}
And this will insert the text "Search" in the placeholder attribute of the search box:
function YTHEMENAME_form_alter( &$form, &$form_state, $form_id ) {// debug($form_id, ''); // find forms on page
// debug($form['search_block_form'], '');
if ( TRUE === in_array( $form_id, array( 'search_block_form') ) ) {
$form['search_block_form']['#attributes']['placeholder'] = t( 'Search' );
}
}
Help me
I have such code of inputs:
<input type="text" id="edit-address-phone" name="address[phone]" value="" size="32" maxlength="128" class="form-text required"><input type="text" id="edit-address-last-name" name="address[last_name]" value="" size="32" maxlength="128" class="form-text required">
(This is uc_addresses module)
I can't insert placeholder to them Help me! Anyone on russian forum can't help me.
This is my code:
function bartik_form_alter( &$form, &$form_state, $form_id ){
if ( TRUE === in_array( $form_id, array( 'user_register_form') ) ) {
$form['account']['mail']['#attributes']['placeholder'] = t( 'E-mail' );
$form['account']['address[phone]']['#attributes']['placeholder'] = t( 'phone' );
}
}