Popup en Webform con Drupal 7

Ahora se ha puesto muy de moda poner las cláusulas legales en popups dentro de los formularios Webs. Esto tiene dos razones fundamentales: una es estética, ya que se evita mostrar una cantidad ingente de texto que no es precisamente bonito, y otra práctica, ya que si evitamos que el usuario se tenga que leer todas las condiciones es mucho mejor, porque cuanto menos vea menos se va a asustar… ojos que no ven, corazón que no siente.

La idea es que mediante un enlace podamos acceder a una parte no visible del formulario en un popup, y que todo lo que cambiemos en ese popup se mantenga, se guarde y se envíe cuando enviemos el formulario. Por mi parte lo he hecho de dos formas. La primera aprovechando las bondades del theme bootstrap, ya que viene con la funcionalidad incorporada. La segunda es el caso contrario, por lo que se necesita la instalación de algunos módulos adicionales.

 

Aprovechar bootstrap

Bootstrap es un framework de trabajo para HTML, CSS y JS. Viene con muchas funcionalidades predefinidas para la interfaz de usuario y para conseguir cierto comportamiento solo es necesario que la salida que generemos en HTML coincida con lo que bootstrap nos dice que debe coincidir. Por ejemplo, en el caso de un popup necesitamos algo parecido a esto: http://getbootstrap.com/javascript/#modals

Para que esto funcione nuestro theme debe estar basado en el theme Bootstrap de Drupal. Si no lo es tendremos que optar por la otra opción de este tutorial.

Así que lo que debemos hacer es crear un conjunto de campos (fieldset) en nuestro Webform y meter todo que queramos que se muestre en el popup dentro: campos, select options, markups, etc… Una vez tenemos esto tenemos que crear un módulo que nos permita meter en un envoltorio a ese conjunto de campos. Lo hacemos con hook_form_alter:

 

Cómo podemos observar vamos a modificar el elemento ‘proteccion_de_datos’ que es el conjunto de campos del que hemos hablado. Le ponemos un prefijo que no es más que un código que se va a mostrar antes del fieldset y un sufijo, que es lo mismo pero al final. Uno mete los códigos de apertura de las capas y el otro las cierra, consiguiendo de este modo el envoltorio. Con la línea final conseguimos modificar el elemento en el que estará el enlace que abrirá el popup.

Lo bueno de esta opción es que no tenemos que añadir ningún módulo más, y además lo que está en el envoltorio que acabamos de añadir se oculta de forma automática hasta que el usuario hace click en el enlace correspondiente, cosa que no ocurre con la segunda opción.

 

Utilizar el módulo colorbox

El módulo Colorbox sirve para crear ventanas emergentes o popups. Si nuestro theme no es un subtheme de bootstrap, es la mejor opción. Después de instalarlo y bajarnos el plugin, lo colocamos en /sites/all/libraries/colorbox, de modo que dentro de esa carpeta encontremos el archivo jquery.colorbox-min.js. Es importante tener instaladas las dependencias, que es concretamente el módulo Libraries API. Ahora vamos a ver el informe de estado de Drupal (/admin/reports/status) para asegurarnos de que el colorbox plugin está funcionando correctamente.

Ahora vamos a la configuración del módulo (/admin/config/media/colorbox) y activamos la opción llamada ‘Enable Colorbox inline’, y le damos a guardar. Esta opción nos va a permitir meter contenidos de la página en popups. Ahora, al igual que en el caso de bootstrap, necesitamos crear un módulo que modifique el formulario con hook_form_alter, en el que habrá un conjunto de campos que contendrá todo el contenido que irá en el popup:

 

Como en el caso anterior hemos tenido que crear un envoltorio para el conjunto de campos que queríamos que se metieran en el popup, además de añadir el enlace en el lugar que queramos que el usuario haga click para que aparezca. Pero aunque funciona, tenemos un problema añadido: se ve el contenido que debería estar oculto hasta que aparezca el popup. Esto lo vamos a arreglar con CSS:

#identificador {
display: none;
}
#cboxLoadedContent #identificador {
display: block;
}

Este código oculta el conjunto de campos, pero lo muestra cuando este aparece dentro del popup.

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

No Replies to "Popup en Webform con Drupal 7"