Logo
Menu
  • Blog
  • CMS
    • Drupal
  • Productividad
  • Sistemas
  • Sobre mí

Drupal

  • Crear una página dinámica en Drupal 7
  • Mejorar los formularios del backoffice de Drupal con un par de módulos
  • Utilizar o consumir Web Services en Drupal 7
  • Guardar una variable pasada por URL en webform
  • Instalar Drush mediante Composer

Productividad

  • Apps móviles de consulta para desarrollo
  • Mis podcast a seguir
  • Optimizar el tiempo con un gestor de contraseñas
  • Procesar el correo electrónico
  • Gestión del calendario con Google Calendar

Sistemas

  • Cómo recuperar una base de datos desde los archivos
  • Acceder a una máquina virtual en VirtualBox a través de NAT
  • Instalar Drush mediante Composer
  • Script rápido de copias de seguridad en Debian
  • Añadir un proxy reverso con certificado SSL
  • Drupal

Cambiar el diseño del formulario de registro en Drupal 7

  • 22/07/2016
  • No comments
  • CMS | Drupal

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:

PHP
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:

PHP
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:

PHP
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:

PHP
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:

PHP
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:

PHP
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:

PHP
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).

drupal 7 formulario Frontend log in
Prev post

Ajax con Webform

Next post

Clonación de contenidos en Drupal 7

No Replies to "Cambiar el diseño del formulario de registro en Drupal 7"


    Más populares

    • Acceder a una máquina virtual en VirtualBox a través de NAT
      07/12/2017
    • Añadir un proxy reverso con certificado SSL
      24/02/2017
    • Cómo recuperar una base de datos desde los archivos
      14/03/2019
    • Instalar un servicio FTP en Debian 8
      22/11/2016
    • Drupal
      Añadir comportamientos tras el envío de un Webform en Drupal 7
      08/12/2016
    2017 © Gestión de Reputación