Páginas de contacto en Bootstrap

En este artículo se estrena un nuevo apartado de plantillas (templates) en la sección de Bootstrap, es muy recomendable haber seguido todos los artículos anteriores publicados en la web sobre Bootstrap para poder realizar esta plantilla. En esta publicación en particular se van a empezar a ver y explicar las páginas de contacto (páginas de contacto simples), en esta primera plantilla se observa un diseño ágil e intuitivo para el usuario final. Estas páginas son utilizadas para que los usuarios puedan contactar con el proveedor de la página (persona responsable que gestione la atención al cliente).

A lo largo del artículo se pueden observar diferentes ejemplos y sus códigos desarrollados parte por parte. Adicionalmente para crear dicho contenido en la web, se crea un fichero de ejemplo con los elementos que se explican en el artículo y se crea otra web adicional (dentro del mismo ejemplo) con una página completa de ejemplo de contacto. Además como en anteriores posts, se facilita al final del mismo un fichero de ejemplo y también se incluye un enlace para probar los ejemplos sin necesidad de descargar el contenido.

 

CABECERA Y BREADCRUMB:

La página de contacto en Bootstrap debe tener un titular, muy recomendable que se introduzca entre tags h1 por tema del posicionamiento web, adicionalmente se puede introducir un subtítulo. Posteriormente se configura el breadcrumb, también es muy importante de cara al SEO de una página web configurar correctamente los breadcrumbs. En la siguiente captura se observa un ejemplo:

En la siguiente captura se adjunta el código desarrollado, se puede observar un div con class=”row”, en el interior de este div se crea otro, con el tamaño que se desea que ocupe el titular y el breadcrumb. A continuación se inserta el título con un tag h1 con class=”page-header”, si se desea insertar un subtítulo, se crea entre etiquetas <small>…</small>. Una vez se cierra la etiqueta del titular se crea el breadcrumb (con la estructura explicada en el artículo de los breadcrumbs en Bootstrap), adicionalmente en el breadcrumb se añaden los enlaces a las páginas correspondientes.

 

INSERTANDO EL MAPA

En el ejemplo de página de contacto se añade adicionalmente un mapa de la posición donde está situado el negocio o local donde se desarrolla la actividad empresarial (en el ejemplo se ha puesto un punto cualquiera), en la siguiente imagen se observa el mapa del ejemplo:

El código desarrollado es sencillo, se crea un div con class=”row”, se inserta dentro de este div otro con el ancho de la columna. En el interior se pega el código que se puede obtener directamente de Google maps.

Como conseguir el iframe del mapa de localización?

Paso 1: Ir a google maps e indicar el local o dirección del negocio que se desea localizar, pulsar sobre buscar y posteriormente pulsar sobre el botón de “Menú“, tal y como se observa en la siguiente captura:

Paso 2: Seleccionar la opción del menú “Compartir o insertar en el mapa“, seleccionar la opción “insertar mapa” y se copia el código donde indica iframe para posteriormente pegarlo en el código desarrollado.

 

DETALLES DEL CONTACTO:

A continuación y situado a su derecha se insertan los detalles del contacto del negocio. Se crea un titular, la dirección física, población y el código postal. En los siguientes párrafos se incluye el teléfono de contacto, email y horario laboral. Adicionalmente se han creado cuatro enlaces a las redes sociales más utilizadas (Facebook, Linkedin, Twitter y Google Plus). En la siguiente captura se observa un ejemplo:

En la siguiente imagen se observa el código que se ha desarrollado para los detalles del contacto. Para ello previamente se crea un div con class=”col-md-4″ para especificar el ancho de todos los elementos. A continuación se crea un tag con el titular (h3) y un párrafo para especificar la calle, población y código postal. La estructura es la siguiente: se crea el párrafo <p>, se añade <abbr title=”Phone”> para que la web muestre una ayuda con el nombre phone (cuando el usuario pasa el cursor por encima del campo) y no se cierra la etiqueta hasta el fin del cierre del span. Se añade un icono <span class=”glyphicon glyphicon-earphone”></span>, finalmente se añade el dato que se quiere mostrar.

Adicionalmente se crea una lista de elementos (iconos personalizados) para las redes sociales, a través de un tag ul con class=”list-unstyled list-inline list-social-icons” y dentro de este tag se crean los diferentes iconos con <i class=”editIcons icon-facebook-square editSizeIcons”></i>, que pueden tener un enlace o no a través de las etiquetas previas <a href=”#”>.

Los iconos de las redes sociales se han creado dentro del css personalizado, con las siguientes clases que se pueden apreciar en la siguiente captura:

Con la clase editIcons se especifica la posición, altura y forma en que irá el icono, con la clase editSizeIcons se modifica el tamaño de la fuente de los iconos y con las clases icon-facebook-square:before, icon-linkedin-square:before, icon-twitter-square:before e icon-google-plus-square:before se especifica el icono. Posteriormente a este paso se agrega las nuevas fuentes en el directorio correspondiente:

*Para los iconos de las redes sociales se han utilizado las fuentes de FONT AWESOME que se pueden encontrar en la siguiente dirección: FONT AWESOME.

 

FORMULARIO DEL CONTACTO:

Finalmente para terminar el artículo sobre la página de contacto simple, se crea el formulario que debe rellenar el usuario para enviar el contenido que desea transmitir al proveedor. El formulario debe ser simple e intuitivo para el usuario, para ello se crea un titular y normalmente entre 4 y 5 campos: nombre, teléfono, email, mensaje y adicionalmente para dar más seguridad a la web, se suele introducir un elemento de captcha para que el usuario demuestre que no es un robot. El apartado de captcha no está disponible en este artículo, ya que, se creará un futuro artículo para explicar como se debe dar de alta para poder introducir o crear estos elementos.

En la siguiente captura se puede observar el código desarrollado para el formulario:

Se crea un div principal con class=”row”, a continuación se crea otro div especificando el ancho del formulario, en el ejemplo se ha introducido un ancho de 8 columnas (se recuerda que en Bootstrap el límite es de 12 columnas). El siguiente elemento es un “titular” con las etiquetas h3 y posteriormente se crea un form que englobará todos los elementos del formulario. El formulario se dota de un name=”sentMessage” un id=”contactForm” y la propiedad novalidate, esta propiedad indica a los navegadores web que no se van a validar los campos que estén dentro del form, también es importante que a cualquier formulario se le asigne un id o una clase personalizada para posteriormente poder “trabajar con ella” con Javascript, JQuery o Ajax.

Una vez creado el form se introducen los diferentes elementos, que se pueden apreciar en la captura superior. La explicación de los grupos de formularios la tenéis en un anterior post que podéis leer en el siguiente enlace: fomularios Bootstrap

*Es importante que todos los inputs y el form tenga su id correspondiente (es muy recomendable realizar todas las variables en inglés ya que nunca se sabe quien va a utilizar o va a necesitar modificar el código creado en un futuro).

Es posible realizar una pequeña modificación en el código desarrollado en el ejemplo para que el formulario tenga validaciones en los campos que se indique la propiedad required. Para validar los campos simplemente se borrará la propiedad novalidate del form. En la siguiente captura se puede apreciar la modificación realizada:

Se puede observar en la siguiente captura el resultado que obtendrá el usuario si pulsa sobre el botón de “Enviar mensaje” y alguno de sus campos no está debidamente rellenado. En el ejemplo siguiente se ha indicado que todos los campos son obligatorios. Como costumbre (buena) se suele indicar con un símbolo (*) los campos que el usuario debe rellenar para realizar la acción solicitada.

 

EJEMPLO EN LÍNEA

Se crea el siguiente enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo. Se debe tener en cuenta que en el ejemplo muestra una página de inicio, donde se puede ver por partes el formulario de contacto y si se pulsa sobre el enlace de “Contacto” se observa el formulario completo.

VER EL EJEMPLO EN LÍNEA

 

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: plantillas de contacto simples. En próximos artículos se añadirán otras plantillas de contacto, plantillas de identificación de usuarios y password, entre otras.

 

Se recuerdan los artículos relacionados sobre Bootstrap:

 
Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *