Recuerdo muy bien cuando empezaba a programar el primer sitio web de mi iglesia, además de lidiar con el Html (si no tienes ni idea de que hablo este articulo es para ti), me encontre con que los formularios de contacto no solo se diseñaban si no que requerían cierta programacion y algunas veces hasta conexión con bases de datos.
Si en ese tiempo hubieran existido las herramientas que ahora se encuentran disponibles me hubiera ahorrado muchos dolores de cabeza.
Aqui te mostramos algunas opciones que podrán ayudarte a crear formularios de contacto y de otros tipos (inscripciones para eventos, solicitudes etc).
Algunas de paga y otras gratuitas, aqui la lista:
Wufoo Form Builder
Uno de los mejores constructores de formatos, este generador de formatos es muy fácil de usar, interfaz de arrastrar y soltar, incluso una persona sin ningun conocimiento de programación puede utilizarlo sin ningún problema. Wufoo tiene opciones gratuita y de paga con algunas características muy buenas. Conoce wufoo aquí
Otra opción excelente y además gratuita es usar Google Docs que además de ser gratuita es excelente. Aquí te ponemos un tutorial provisto por Oloman de oloblogger. Recuerda que necesitas tener una cuenta de Gmail para poder hacer uso de esta herramienta.
Espero que esta información te sea util! Bendiciones!
Como hacer un formulario en Google Docs
Con este servicio podrás hacer no sólo apartados para que contacten contigo, sino también todo tipo de formularios que podrás usar por ejemplo para que te hagan un pedido o realizar una encuesta.
Lo mejor a mi parecer es la fácil composición y actualización automática, así como el control de datos mediante una hoja de cálculo que incluye estadísticas gráficas.
Tutorial
Accedemos a la página de Google Docs y como la mayoría tenemos cuenta Google, obviaremos lo del registro, cosa que sería necesaria en caso contrario.
Si con el inglés no os encontráis cómodos, en el icono de la rueda dentada que aparece a la derecha tenemos la configuración para cambiar el idioma (Settings).
Tras eso, lo primero es pinchar en Crear y luego en Formulario.
Se nos abre una nueva ventana dónde comenzaremos a maquetar el formulario. En este mismo orden, nos encontramos un espacio para rellenar el título del formulario, un cuadro por si deseamos poner un texto genérico sobre la finalidad del formulario (o lo que queramos) y por último, un par de campos (respuestas) a modo de ejemplo.
Estas respuestas son las que realmente conforman el formulario como tal. Pinchando sobre cualquiera de ellas estaremos en modo edición. Se desplegarán las opciones y veremos tres iconos a la derecha que nos sirven para editar cada campo, duplicarlo o eliminarlo.
Los textos que se nos solicitan son autoexplicativos: el título que llevara el campo, un texto adicional aclaratorio que opcionalmente podemos incluir bajo el título y luego el tipo de pregunta. Esta última nos permite insertar campos del tipo:
- Texto: espacio para texto pequeño
- Párrafo: espacio para texto grande
- Tipo test: botones redondos excluyentes (sólo se puede seleccionar uno)
- Casillas de verificación: botones cuadrados que permiten selección múltiple
- Elegir de una lista: genera un menú desplegable de respuestas fijas que tendremos que teclear nosotros
- Escala: botones radio excluyentes para valorar algo mediante una escala numérica. Sería algo así como poner nota
- Cuadrícula: cuadro complejo con filas y columnas de selección múltiple
En cada campo podemos seleccionar mediante una última casilla de verificación, si tiene que ser de cumplimentación obligatoria o no. En caso de que la marquemos, el usuario no podrá enviar el formulario hasta que no cubra ese campo.
El formulario tiene un formato básico, pero si queréis algo más elaborado, arriba a la izquierda hay un botón que inicialmente lleva el texto del tema plano y que nos llevará a una galería de temas prefabricados de entre los que podemos seleccionar el que prefiramos.
¿Ya tenemos todo listo? Pues le damos a Guardar y ya sólo nos queda insertarlo en nuestro sitio. Esa opción está en el botón Más acciones, sub-opción Insertar. Una ventana emergente nos facilita el código en forma de iframe para sólo tener que copiar y pegar.
En el mismo menú encontramos otra opción que nos permite cambiar el mensaje de confirmación que le saldrá al usuario tras enviar el formulario. En esa parte hay una casilla de verificación que en caso de ser seleccionada mostrará también las respuestas grabadas hasta el momento. Esto NO debería marcarse mas que en el caso de encuestas que se quieran hacer públicas.
El código lo podemos poner en cualquier entrada o incluso en la barra lateral, pero si se trata de un formulario para contacto, quizás el mejor lugar es en una página estática.
Dependiendo de dónde lo pongamos será necesario ajustar el width y el height del iframe para que el formulario se vea completo y no nos salgan las barras de scroll. En general podéis dejar el ancho automático poniendo el valor 100%, pero para la altura ya tendréis que ajustar a ojo hasta averiguar los px que necesitáis.
Una buena cosa es que para modificar el formulario, no tendremos que ir más a la página(s) dónde esté insertado. Lo haremos en cualquier caso desde Google Docs y ya se actualiza automáticamente.
Y si salimos a la página principal de Google Docs, ahora viene lo mejor ¡nuestro formulario ya no está! En su lugar encontramos una hoja de cálculo. No problema.
Esa hoja de cálculo es la que va a ir guardando todos los envíos que nos realicen y desde dónde podremos obtener incluso gráficos con los datos introducidos.
Destacar las siguientes funciones:
- Editar ► Eliminar fila X: Nos sirve para borrar datos no válidos. Útil para trolls rellenadores compulsivos de formularios.
- Herramientas ► Reglas de notificación: Para saber al instante cuándo alguien ha rellenado y enviado el formulario. Podemos elegir muchas opciones, pero las más comunes serían marcar Un usuario envía un formulario y cualquiera de las dos últimas (resumen diario o notificación inmediata).
- Formulario:
► Modificar el formulario, desde aquí podremos acceder de nuevo a él
► Insertar en página web, para volver a obtener el código
► Mostrar el resumen de respuestas, con los los gráficos que os decía al principio.
