Cambiar el diseño del formulario de registro en Drupal 7
En algún que otro proyecto me ha tocado tener que cambiar el diseño de los formularios de registro, login y solicitar nueva contraseña. Drupal 7 es un gran aliado en muchísimas cosas, pero hay otras muy sencillas que no se pueden hacer si no das un rodeo de los gordos. Es el caso de la personalización de estos formularios.
¿Cómo lo hacemos?
Lo vamos a hacer desde nuestro theme (imaginemos que se llama ‘mitema’). Vamos a ir al archivo template.php (y si no lo tenemos, lo vamos a crear) ya vamos a añadir unas cuantas funciones que explicaré a continuación:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function mitema_theme(&$existing, $type, $theme, $path) { $hooks['user_login'] = array( 'template' => 'templates/user_login', 'render element' => 'form', ); $hooks['user_register_form'] = array( 'render element' => 'form', 'path' => drupal_get_path('theme', 'mitema') . '/templates', 'template' => 'user-register-form', 'preprocess functions' => array( 'mitema_preprocess_user_register_form' ), ); $hooks['user_pass'] = array( 'render element' => 'form', 'path' => drupal_get_path('theme', 'mitema') . '/templates', 'template' => 'user-pass', 'preprocess functions' => array( 'mitema_preprocess_user_pass' ), ); return $hooks; } |
Con esta función básicamente estamos diciéndole a Drupal que debe interpretar las plantillas que vamos a meter en la carpeta ‘templates’ de nuestro theme llamado ‘mitema’ para generar la salida de los tres formularios. Así que lo siguiente es crear esas plantillas, que tendrán un código tan corto como sorprendente. Voy a mostrarlo uno por uno y de distintas formas posibles, aunque cualquiera de las tres es válida.
Formulario de login
Añadimos el archivo user_login.tpl.php a la carpeta templates de nuestro theme con el siguiente contenido:
|
1 |
<?php print $rendered; ?> |
No nos dice mucho, la verdad. Básicamente está renderizando el formulario, y por eso necesitamos meter en el template.php de nuestro theme la siguiente función de preproceso, porque si no no tenemos ningún control sobre el formulario:
|
1 2 3 4 5 6 7 8 9 |
function mitema_preprocess_user_login(&$variables) { $variables['form']['name']['#prefix'] = '<table><tr><td>'; $variables['form']['name']['#suffix'] = '</td>'; $variables['form']['pass']['#prefix'] = '<td>'; $variables['form']['actions']['submit']['#suffix'] = '</td></tr></table>'; $variables['form']['name']['#attributes'] = array('placeholder' => array('Escriba su nombre de usuario en el portal.')); $variables['form']['pass']['#attributes'] = array('placeholder' => array('Escriba la contraseña asignada a su nombre de usuario.')); $variables['rendered'] = drupal_render_children($variables['form']); } |
Modificamos los elementos del formulario. En este caso los hemos metido en una tabla para que el nombre y la contraseña queden en la misma fila pero en distintas columnas, y los botones queden dentro de la columna derecha. Por eso cerramos la tabla justo después de los mismos. También vemos como hemos cambiado el texto por defecto que aparece en los campos de usuario y contraseña. Para terminar, renderizamos el formulario y lo metemos en la variable $rendered que utilizará posteriormente la plantilla.
Formulario de registro
Añadimos el archivo user-register-form.tpl.php a la carpeta templates de nuestro theme con el siguiente contenido:
|
1 |
<?php print drupal_render_children($form) ?> |
Es muy parecida a la anterior, con la diferencia de que el renderizado del formulario lo estamos haciendo en la propia plantilla. Lo normal es no usar funciones en las plantillas, porque no queda tan limpio, aunque el resultado final es el mismo. La función de preproceso es la siguiente:
|
1 2 3 4 5 6 7 |
function mitema_preprocess_user_register_form(&$variables) { $variables['form']['account']['name']['#prefix'] = '<table><tr><td>'; $variables['form']['account']['pass']['#suffix'] = '</td><td>'; $variables['form']['actions']['submit']['#suffix'] = '</td></tr></table>'; $variables['form']['account']['name']['#attributes'] = array('placeholder' => array('Escriba su nombre de usuario en el portal.')); $variables['form']['account']['mail']['#attributes'] = array('placeholder' => array('Escriba su correo electrónico de contacto.')); } |
En este caso no nos aporta nada nuevo, excepto la ausencia de la función de renderizado que sí está en la plantilla.
Formulario de recuperación de contraseña
Añadimos el archivo user-pass.tpl.php a la carpeta templates de nuestro theme con el siguiente contenido:
|
1 2 3 4 |
<p><?php print render($intro_text); ?></p> <div class="yourtheme-user-login-form-wrapper"> <?php print drupal_render_children($form) ?> </div> |
En este caso ya vemos algo más en la plantilla. Lo que hemos hecho es renderizar por separado un texto y meter en un envoltorio con una clase el renderizado del formulario. Veamos la función de preproceso:
|
1 2 3 4 5 6 |
function mitema_preprocess_user_pass(&$variables) { $variables['intro_text'] = t('This is my super awesome request new password form'); $variables['form']['name']['#prefix'] = '<table><tr><td>'; $variables['form']['actions']['submit']['#suffix'] = '</td></tr></table>'; $variables['form']['name']['#attributes'] = array('placeholder' => array('Escriba su nombre de usuario en el portal o su correo de registro.')); } |
Como novedad, vemos cómo hemos añadido la variable de texto que será renderizada en la plantilla. El hecho de que esté en una función t() permite que la podamos traducir a través de la interfaz de Drupal.
Jorge Puente
Experto en la Gestión de Proyectos Web basados en Drupal con más de 8 años de experiencia. Desarrollo Full Stack (Front-end, Back-end, Site-Builder).