webform

Diana tiro con arco olimpico representado el remarketing de Google
El remarketing de Google es una herramienta muy poderosa para mostrar anuncios de AdWords a visitantes de nuestro sitio web en función de una serie de reglas que podemos personalizar. El módulo webform de drupal es uno de los más utilizados, especialmente para crear formularios de contacto, solicitud de información, inscripciones, etc.. En este artículo vamos a explicar cómo hacer un módulo que nos permita hacer remarketing a los usuarios que han enviado un formulario con un valor concreto seleccionado, para ello crearemos un callback en nuestro módulo encargado de hacer que la url de confirmación de envío del webform incluya un parámetro único indicador del producto, servicio o tema sobre el que queremos hacer remarketing, vamos a utilizar como ejemplo un webform que tenga un componente selector de productos en el que hay 3 opciones: 1 | Premium 2 | Avanzado 3 | Básico El objetivo es que la página de confirmación del envío del webform incluya el código de la selección sobre el que el usuario ha solicitado información de modo que podamos configurar nuestros AdWords sabiendo sobre qué producto está interesado el usuario. Para ello estableceremos una página de confirmación con una parte fija y una segunda parte dinámica que incluirá el producto seleccionado en el webform, de modo que las URL’s posibles en nuestro ejemplo serían: /envio-realizado/1 /envio-realizado/2 /envio-realizado/3 Adicionalmente debemos configurar el webform para que utilice como página de confirmación la URL personalizada que vamos a crear y le pase como parámetro el valor que el usuario ha seleccionado en el selector del formulario. Lo primero que debemos hacer es crear el módulo que, mediante el hook_menu de drupal, va a proporcionar la URL personalizada y el callback que gestionará esas peticiones, en el ejemplo que vamos a seguir lo llamaremos “webform_remarketing”: /** * Implements hook_menu(). */ function webform_remarketing _menu() { $items = array(); $items['envio-realizado/%'] = array( 'title' => 'Submission received', 'description' => 'Confirmation page for webform', 'page callback' => 'webform_remarketing _confirmation_page', 'page arguments' => array(1), 'access arguments' => array('access content'), ); return $items; } Una vez que tenemos creada la opción de menú, debemos agregar la función definida en el page callback que será la que proporcione el contenido que se mostrará en pantalla: /** * Confirmation page menu callback. */ function webform_remarketing _confirmation_page ($producto) { return . t('Submission received') . ; } Esta función es un ejemplo con fines didácticos, por lo que simplemente muestra un mensaje sencillo, lógicamente lo habitual es querer mostrar más contenido, para ello es conveniente recordar que todo el contenido que se muestra al usuario debe utilizar una función de theming para que pueda ser fácilmente modificable por el desarrollador del sitio. El siguiente paso que necesitamos dar es modificar la configuración del webform para que utilice la página de confirmación que hemos creado en nuestro módulo y le pase el valor seleccionado por el usuario, para ello, editaremos las opciones del webform en la pestaña “Ajustes de formulario”; entre otras opciones, hay un apartado llamado “Dirección de redirección” que nos presenta 3 opciones, debemos seleccionar “URL personalizada” e introducir la URL que hemos definido en nuestro módulo y hacer que el propio webform pase en la segunda parte de la URL el valor marcado por el usuario en el componente del selector de productos, para ello utilizamos el token correspondiente, que en este caso sería [submission:values:?] donde “?” hay que sustituirlo por el form_key del componente, suponiendo que dicho valor fuera “producto”, lo que debemos escribir en el campo sería: envio-realizado/[submission:values:producto] Y con esto hemos conseguido nuestro objetivo, cuando un usuario rellena el formulario y solicita información sobre un producto, la URL de confirmación incluye el código de dicho producto, por lo que ya podemos configurar las opciones de remarketing utilizando esas URL’s en AdWords y configurar nuestras campañas.
Placeholder text form
Con la llegada de HTML5 hace unos años ha aparecido la posibilidad de añadir marcadores de posición o placeholders. El placeholder es el texto que aparece dentro de un campo de texto en un formulario antes de que el usuario lo complete, sirviéndonos de gran ayuda para clarificar qué tipo de información hay que introducir en dicho campo. Por ejemplo, el siguiente código HTML: <form> <label for="search">Suscribete al newsletter</label> <input id="news" type="text" placeholder="Introduce tu email" name="seach"> <button id="subscribebutton" type="submit">Enviar</button> </form> Muestra algo como esto: Añadir placeholders a los formularios es una buena práctica que mejora de la usabilidad y por supuesto la experiencia de usuario. El W3C recomienda usar el placeholder siempre junto con la etiqueta Label, ya que supuestamente son complementarias, pero en Wild Wild Web a menudo usamos solo una de las dos, ya que nos resulta redundante usar ambas. El soporte para placeholder solo será visible en los navegadores web más modernos pero se suele implementar un fallback jquery para conseguir la misma funcionalidad en los navegadores antiguos. Existen varias formas de añadir el placeholder a un campo de un formulario en Drupal 7. A continuación destacamos 4 de ellas que consideramos las más útiles. Módulo Form Placeholder https://www.drupal.org/project/form_placeholder Este módulo nos permite añadir placeholders a cualquier formulario del sitio desde la administración Drupal. Módulo Webform Hints https://www.drupal.org/project/webform_hints Este módulo permite incorporar placeholders automáticos a cualquier textfield, testarea, select list y email field de formularios creado con el módulo Webform (https://www.drupal.org/project/webform) Además, este módulo viene con soporte para navegadores antiguos que no soportan el attributo placeholder e implementa el fallback mediante jQuery. Módulo Field placeholder https://www.drupal.org/project/field_placeholder Permite añadir el atributo placeholder a cualquier campo de una entity drupal, como campos de un tipo de contenido, de términos de taxonomía, de usuarios, etc. Al activarlo aparece una nueva opción para introducir los placeholder al editar o crear un campo. Función en el template.php Por último el método más técnico un pelín más avanzado porque implica toda código pero resulta el más potente de todos. Consiste en añadir la siguiente función al archivo template.php de nuestro theme. function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id ) { if (in_array( $form_id, array( 'user_login', 'user_login_block'))) { $form['name']['#attributes']['placeholder'] = t( 'Username' ); $form['pass']['#attributes']['placeholder'] = t( 'Password' ); } } Este caso introduce un placeholder para el login form. Recuerda cambiar en el nombre de la función YOURTHEMENAME por el nombre de vuestro theme, y también cambiar el id del formulario y el nombre del campo sobre el que queremos realizar el cambio. Más información sobre cómo obtener el id de un formulario.