La forma más rápida (y mejor) de crear formularios Wufoo

Wufoo es una aplicación web que pretende simplificar los formularios. Las formas generalmente pueden ser tediosas para trabajar. Tendría que escribir el XHTML / CSS para los elementos del formulario, configurar el código de fondo para capturar todos los datos y luego trabajar en la generación de informes utilizables para él. Wufoo simplifica todo este proceso desde la creación de formularios hasta su integración en su sitio a través de un amplio soporte de temas para producir informes bonitos y útiles para que pueda analizar sus datos..

Incluso hace un montón de cosas avanzadas, incluyendo enlaces web y una API adecuada para acceder a los datos recopilados. Hoy, veremos cómo crear un formulario simple con Wufoo y luego usaremos la API para acceder y modificar los datos recopilados mediante programación..


Creando tu primer formulario

En primer lugar, tendremos que configurar un formulario para poder jugar con él. Regístrese para obtener una nueva cuenta en Wufoo y será llevado a uno de los estados de aplicación en blanco más cómicos de todos los tiempos:

Haga clic en el botón para comenzar a crear un nuevo formulario y será llevado a la aplicación del creador de formularios. La interfaz es muy intuitiva, con un panel sensible al contexto a la izquierda y la sección principal del formulario a la derecha. Agregar elementos es tan simple como hacer clic en él o arrastrarlo a la sección principal.

Al hacer clic en el elemento creado le permite editar todos los detalles relevantes.

Como nos gustaría que sea lo más simple posible, solo un campo de texto que tome una dirección de correo electrónico servirá. Haga clic en Guardar formulario y hemos terminado. Hemos creado nuestro primer formulario con código cero y nos llevó 60 segundos..


Integrándolo con tu sitio

Integrar el formulario creado en nuestro sitio es increíblemente fácil. Vaya a la página de formularios y haga clic en código enlace de la nueva forma creada.

Wufoo ofrece varias formas de enviar el formulario a sus visitantes, incluida una versión de JavaScript que funciona dentro de un iframe, código XHTML para una página completa que contiene los formularios o simplemente un enlace que puede compartir con sus amigos..


La API de Wufoo

La API de Wufoo le permite recuperar, enviar y modificar los datos pertinentes a su cuenta mediante programación con muy poco problema. El conjunto de API consiste esencialmente en dos API fijas estables y una más en pruebas beta. Veremos las partes estables hoy..

Tenga en cuenta que solo podrá recuperar y enviar datos a formularios ya existentes. Si está buscando crear formularios sobre la marcha y luego enviar datos o simplemente crear nuevos campos a través de la API, está fuera de lugar. La versión actual de la API no permite esta funcionalidad, pero búsquela en un futuro próximo junto con un montón de otras funcionalidades..

Pero primero, necesitarás una clave API. Puede obtenerlo desde el enlace de información de la API en la página donde obtiene los fragmentos de código..

Tome nota de su clave de API y la ID del campo al que desea acceder y / o modificar. Lo usaremos en breve..


Obtención de sus datos - La API de consulta

La API de consulta le permite recuperar la información que ha recopilado a través de sus formularios sin pasar por el sitio web de Wufoo. Si está buscando obtener todos los datos sin procesar y luego crear un informe personalizado, este es el camino a seguir..

Lo primero que debe tener en cuenta es la URL que deberá solicitar para obtener los datos correctos. La URL se ve así:

 http://username.wufoo.com/api/query/ 

Reemplazar nombre de usuario Con tu nombre de usuario y listo. los consulta las partes les permiten a los servidores de Wufoo saber que está buscando recuperar información de los servidores.

Enviando una solicitud al servidor

cURL es la forma más fácil de enviar datos al servidor. Si eres un poco nuevo en CURL y te sientes perdido, te recomiendo que leas este artículo de CURL aquí mismo en Nettuts.+.

  

Vamos a repasar el código parte por parte. Primero necesitamos la clave API de la que hicimos una nota antes. También necesitamos el nombre del formulario del que desea recuperar los datos. Estos dos junto con la versión de la API que estamos utilizando, dos en nuestro caso, son los parámetros mínimos que necesitamos para realizar una solicitud exitosa.

Concatenamos todos los elementos requeridos como pares clave / valor y los almacenamos para su uso posterior.

A continuación, pasamos la URL correcta como se indicó anteriormente junto con la cadena de solicitud que creamos anteriormente. También almacenamos la respuesta a una variable para que podamos usarla..

$ resp Tiene la respuesta a nuestra petición. De forma predeterminada, la API de Wufoo devuelve datos en un formato JSON. En el caso de que XML sea su carga útil preferida, deberá agregar un parámetro adicional a la cadena de solicitud. El parámetro adicional toma el formato de w_format = formato donde el formato puede ser XML o JSON.

La respuesta de JSON

La carga útil de JSON devuelta es en realidad bastante grande y contiene numerosos datos. Las partes relevantes se muestran a continuación:

La parte principal es el resultado de la solicitud junto con la información sobre el formulario solicitado, incluido el nombre del formulario, su título, URL, descripción y un montón de otra información..

El segundo punto de interés son los campos, que contiene el formulario. Dado que nuestro formulario era muy simple con un solo campo, nuestros datos devueltos son bastante cortos. De cualquier manera, contiene información sobre el ID del campo, su título y otra información, incluso si se requiere o no, una descripción del campo, etc..

El último punto de interés es la porción que contiene las entradas en sí. Cada entrada para el formulario seleccionado se devuelve al llamante que contiene una gran cantidad de información, incluida la identificación de la entrada, el valor de los campos, la IP del usuario, la fecha en que se creó, etc..

A partir de este punto, lo que haga con los datos depende completamente de usted. Puede analizar los datos para crear un buen informe personalizado, buscar en la información datos específicos o simplemente ingresarlos en una hoja de cálculo o base de datos. Tu imaginación es el limite.


Enviar con estilo - La API de envío

La API de envío le permite enviar datos directamente a los servidores de Wufoo. Esta API es especialmente útil si necesita usar su propio XHTML / CSS sin dejar de aprovechar todas las capacidades de back-end que proporciona Wufoo. De esta manera, obtienes lo mejor de ambos mundos: puedes usar tu propia apariencia personalizada, pero conservas todo el poder de Wufoo.

El extremo delantero no requiere diferencia significativa. A modo de ejemplo, aquí está el marcado, que usé para probar la API de envío.

 

handler.php parece que sí.

  

Hay un par de cosas a tener en cuenta aquí. Al igual que con la API de consulta, guardamos apikey y formid para poder usarlo más adelante. También capturamos el valor del cuadro de texto PUBLICADO para que podamos enviarlo a Wufoo nosotros mismos.

Tenga en cuenta que también hemos creado una variable llamada Fieldid. Esto corresponde directamente a la ID de API presente en la página de clave de API.

Después de esto, todo es igual que antes. Concatenamos la cadena y luego usamos cURL para pasar los datos al servidor. El servidor devuelve una respuesta JSON que se ve a continuación:

Eso es. Sin molestias, no sin sentido. Publicar en Wufoo a través de nuestro código personalizado es tan simple como eso.


Bonus: Integración Con Servicios De Terceros

Como una característica adicional, Wufoo ahora le permite publicar en otros servicios cuando una nueva entrada se registra en el sistema. Puedes hacer muchas cosas ingeniosas con esta nueva e impresionante característica, pero me limitaré a seguir usando esta característica..

Para acceder a la página de notificaciones, haga clic en el enlace de notificaciones en la página de formularios.

Esta página le permite elegir recibir notificaciones a través de una serie de opciones que incluyen correo electrónico y SMS o publicar en servicios como Highrise, Twitter y muchas más cuando se publique una nueva entrada. Pero esos no son los que vamos a ver hoy. Lo que veremos es los enlaces web: una tecnología ingeniosa que permite a los desarrolladores recibir devoluciones de llamadas HTTP cuando se envía una entrada a Wufoo. Piense en ello como una devolución de llamada a los esteroides.

Por el lado de Wufoo, todo lo que necesita hacer es ingresar una URL a la que Wufoo POSTARÁ datos cada vez. Todo lo que necesita, de su lado, para configurar una página que capture los datos PUBLICADOS. Para propósitos de prueba, puede configurar una cuenta en PostBin que le ahorra la molestia. Ingrese esta URL en Wufoo y estará listo. Un ejemplo de los datos publicados por Wufoo en nuestra URL de destino..

Muy ingenioso, si puedo decirlo yo mismo..


Conclusión

¡Y hemos terminado! Observamos cómo crear un formulario simple con Wufoo y luego cómo manipular y recuperar mediante programación la información que hemos recopilado a través de la API fácil de usar de Wufoo. Con suerte, esto te ha sido útil y te ha parecido interesante. Estaré observando de cerca la sección de comentarios; así que toca allí si tienes alguna duda.

Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificacion!


Escribe un Tutorial Plus

¿Sabía que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros?? Estamos buscando tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tiene la habilidad, contacte a Jeffrey en [email protected].

Tenga en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.

  • Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..