Photoshop y Tutoriales

La página de contactos es de caracter obligatoria en todos los sitios web, es la página destinada a contener la dirección, el teléfono, el email y otros datos que el cliente considere relevante y todo diseño de páginas web debe contemplar la página web de contactos.

La mayoría de las páginas de contactos incluyen un formulario de contactos, en otras versiones (y esto depende en gran medida del gusto del cliente) la página de contactos es únicamente el formulario ó simplemente la información de contacto con un enlace directo a su Email.

Algo que me ha dado muy buen resultado en las páginas web de mis clientes es ofrecerles además la inclusión de Google Maps en su página de contactos, la verdad es muy sencillo y lo unico que necesitas es tener las coordenadas de la ubicación, eso lo vimos en este otro tutorial, te recomiendo leerlo antes de continuar.

Atención: Para crear este mapa vamos a utilizar una página creada en HTML5, al final incluyo el código de la pagina del mapa.

A estas alturas supongo que ya sabes como crear un formulario de contactos básico, si aún no sabes como hacerlo te recomiendo este tutorial en el cual también incluyo ejemplos de páginas de contactos (pero sin Mapa).

El código a utilizar para el Mapa de Google es:

Pero esto es solo para generarlo, ahora falta crearle el espacio en la página web que utilizaremos como página de contactos, eso lo hacemos en otro documento escrito en HTML4. En teoría lo que haremos será utilizar un Iframe para mandar a llamar el mapa, no le crearemos bordes y ocultareos el scrolling para que de la sensación de estar en la misma página web.

Y este es el resultado del tutorial (haz clic en la imagen para ampliar):

Puedes descargar los archivos directamente desde aqui, o bien ver el ejemplo en vivo.

Con el objetivo que tengas más ideas creativas de inspiración para armar tu página de contactos a continuación te muestro 8 ejemplos de páginas de contactos que incluyen su ubicación utilizando Google Maps.

Estoy seguro que encontrarás inspiración y nuevas ideas en estos ejemplos de paginas de contactos. Empieza a utilizar Google Maps y verás un gran impacto en la reacción de tu cliente, pués tendrá una página web que va de la mano con la tecnología.

Si el tutorial para incluir Google Maps en tu página web de contacto ó si has encontrado de utilidad los ejemplos de páginas de contactos con Google Maps, deja un comentario o compártelo con tus amigos en Facebook y Twitter, puedes utilizar los botones de abajo.

Si te gusta la información de este blog de diseño danos un voto en G+ (a la derecha).

Tags: como validar formularios, creatividad, diseño, formulario, google maps, incluir mapa a pagina de contacto, inspiracion, páginas eb