Статьи

Самый быстрый (и лучший) способ создания форм: Wufoo

Wufoo — это веб-приложение, предназначенное для упрощения форм. Формы, как правило, могут быть утомительными для работы. Вам нужно написать XHTML / CSS для элементов формы, настроить внутренний код для сбора всех данных, а затем поработать над созданием пригодных для него отчетов. Wufoo упрощает весь этот процесс, начиная с создания формы и заканчивая интеграцией ее с вашим сайтом, благодаря обширной поддержке тем и созданию привлекательных и удобных отчетов для анализа ваших данных.

Он даже делает много продвинутых вещей, включая веб-хуки и надлежащий API для доступа к собранным данным. Сегодня мы рассмотрим, как создать простую форму с помощью Wufoo, а затем использовать API для программного доступа и изменения собранных данных.


Прежде всего, нам нужно настроить форму, чтобы мы могли поиграть с ней. Зарегистрируйте новый аккаунт в Wufoo, и вы попадете в одно из самых смешных пустых состояний приложений за все время:

Учебное изображение

Нажмите на кнопку, чтобы начать создание новой формы, и вы попадете в приложение для создания форм. Интерфейс очень интуитивно понятен с контекстно-зависимой панелью слева и основным разделом формы справа. Добавить элементы так же просто, как щелкнуть по ним или перетащить в основной раздел.

Учебное изображение

Нажав на созданный элемент, вы сможете редактировать все необходимые детали.

Учебное изображение

Поскольку мы хотим сделать его максимально простым, подойдет только одно текстовое поле, в котором будет указан адрес электронной почты. Нажмите сохранить форму, и мы сделали. Мы создали нашу первую форму с нулевым кодом, и это заняло все 60 секунд.


Интеграция созданной формы с нашим сайтом невероятно проста. Перейдите на страницу форм и нажмите на ссылку кода новой формы.

Учебное изображение

Wufoo предоставляет вам несколько способов получить форму для ваших посетителей, включая версию JavaScript, которая работает внутри iframe, код XHTML для полной страницы, содержащей формы, или просто ссылку, которой вы можете поделиться со своими друзьями.

Учебное изображение

API Wufoo позволяет вам программно получать, отправлять и изменять данные, относящиеся к вашей учетной записи, без особых усилий. Набор API по существу состоит из двух стабильных, фиксированных API и еще одного, находящегося на стадии бета-тестирования. Мы посмотрим на стабильные части сегодня.

Обратите внимание, что вы сможете получать и отправлять данные только в уже существующие формы. Если вы хотите создавать формы на лету, а затем отправлять в них данные или просто создавать новые поля через API, вам не повезло. Текущая версия API не позволяет эту функциональность, но искать ее в ближайшем будущем вместе с кучей других функций.

Но сначала вам понадобится ключ API. Вы можете получить его по ссылке информации об API на странице, где вы получаете фрагменты кода.

Учебное изображение

Запишите свой ключ API и идентификатор поля, к которому вы хотите получить доступ и / или изменить. Мы будем использовать это в ближайшее время.

Учебное изображение

API запросов позволяет получать информацию, которую вы собрали с помощью форм, минуя веб-сайт Wufoo. В случае, если вы хотите получить все необработанные данные, а затем создать собственный отчет из этого, это путь.

Первое, что вам нужно отметить, — это URL, который вам нужно запросить, чтобы получить нужные данные. URL выглядит так:

Замените имя пользователя вашим именем пользователя, и все готово. Части запроса сообщают им на серверах Wufoo, что вы хотите получать информацию с серверов.

cURL — это самый простой способ отправить данные на сервер. Если вы немного новичок в cURL и чувствуете себя потерянным, я настоятельно рекомендую вам прочитать эту статью о cURL прямо здесь, на Nettuts +.

Давайте рассмотрим код по частям. Сначала нам нужен ключ API, о котором мы уже писали ранее. Нам также нужно имя формы, из которой вы хотите получить данные. Эти два вместе с версией используемого нами API, в нашем случае два, являются минимальными параметрами, необходимыми для успешного запроса.

Мы объединяем все необходимые элементы в виде пар ключ / значение и сохраняем их для последующего использования.

Далее мы передаем правильный URL, как отмечено выше, вместе со строкой запроса, которую мы создали выше. Мы также храним ответ на переменную, чтобы мы могли его использовать.

$ resp содержит ответ на наш запрос. По умолчанию API Wufoo возвращает данные в формате JSON. В случае, если XML окажется вашей полезной нагрузкой, вам нужно добавить дополнительный параметр в строку запроса. Дополнительный параметр принимает формат w_format = format, где форматом может быть либо XML, либо JSON.

Возвращенная полезная нагрузка JSON на самом деле довольно большая и содержит много информации. Соответствующие части показаны ниже:

Основная часть является результатом запроса вместе с информацией о запрашиваемой форме, включая название формы, ее заголовок, URL, описание и много другой информации.

Учебное изображение

Вторая точка интереса — поля, форма содержит. Поскольку наша форма была очень простой с одним полем, наши возвращаемые данные довольно короткие. В любом случае, он несет информацию об идентификаторе поля, его названии и другой различной информации, включая информацию о том, требуется ли она или нет, описание поля и так далее.

Учебное изображение

Последний интересный момент — это часть, содержащая сами записи. Каждая запись для выбранной формы возвращается вызывающей стороне, содержащей множество информации, включая идентификатор записи, значение полей, IP-адрес пользователя, дату создания и т. Д.

Учебное изображение

С этого момента, что вы делаете с данными, полностью зависит от вас. Вы можете проанализировать данные, чтобы создать хороший пользовательский отчет, выполнить поиск информации по конкретным данным или просто ввести их все в электронную таблицу или базу данных. Ваше воображение это предел.


API отправки позволяет отправлять данные непосредственно на серверы Wufoo. Этот API особенно полезен, если вам абсолютно необходимо использовать свой собственный XHTML / CSS, в то же время используя все внутренние возможности, предоставляемые Wufoo. Таким образом, вы получаете лучшее из обоих миров: вы можете использовать свой собственный внешний вид, но сохраняете всю мощь Wufoo.

Передняя часть не требует значительной разницы. В качестве примера вот разметка, которую я использовал для тестирования API отправки.

handler.php выглядит так.

Здесь есть пара вещей, на которые стоит обратить внимание. Как и в API запросов, мы сохраняем apikey и formid, чтобы использовать его позже. Мы также фиксируем значение текстового поля POST, чтобы мы могли отправить его в Wufoo самостоятельно.

Обратите внимание, что мы также создали переменную с именем fieldid . Это напрямую соответствует идентификатору API, представленному на ключевой странице API.

Учебное изображение

После этого все так же, как и раньше. Мы объединяем строку и затем используем cURL для передачи данных на сервер. Сервер возвращает JSON-ответ, который выглядит следующим образом:

Учебное изображение

Вот и все. Нет хлопот, нет бессмысленности. Публикация в Wufoo через наш пользовательский код очень проста.


В качестве дополнительной бонусной функции Wufoo теперь позволяет вам публиковать сообщения в других сервисах, когда в систему входит новая запись. С этой удивительной новой функцией вы можете сделать много изящных вещей, но я просто остановлюсь на том, как использовать эту функцию.

Чтобы перейти на страницу уведомлений, нажмите на ссылку уведомлений на странице форм.

Учебное изображение

На этой странице вы можете получать уведомления с помощью ряда опций, включая электронную почту и SMS, или отправлять сообщения в такие службы, как Highrise, Twitter и многие другие, когда публикуется новая запись. Но это не те, на которые мы собираемся взглянуть сегодня. Мы рассмотрим веб-хуки — изящную технологию, которая позволяет разработчикам получать обратные вызовы HTTP при отправке записи в Wufoo. Думайте об этом как обратный вызов на стероидах.

На стороне Wufoo все, что вам нужно сделать, это ввести URL-адрес, по которому Wufoo будет отправлять данные POST каждый раз. Все, что вам нужно, это настроить страницу, на которой будут записаны данные POST. В целях тестирования вы можете настроить учетную запись в PostBin, что избавит вас от хлопот. Введите этот URL в Wufoo, и все готово. Пример данных, опубликованных Wufoo на наш целевой URL.

Учебное изображение

Очень изящно, если можно так выразиться.


И мы сделали! Мы посмотрели на создание простой формы с помощью Wufoo, а затем на то, как программно манипулировать и извлекать данные, которые мы собрали с помощью простого в использовании API Wufoo. Надеюсь, это было полезно для вас, и вы нашли это интересным. Я буду внимательно следить за разделом комментариев; так что перезвоните, если у вас есть какие-либо вопросы.

Вопросов? Хорошие вещи, чтобы сказать? Критицизмы? Нажмите на раздел комментариев и оставьте мне комментарий. Удачного кодирования!


Знаете ли вы, что вы можете заработать до 600 долларов за написание учебника PLUS и / или скринкаст для нас? Мы ищем подробные и хорошо написанные учебники по HTML, CSS, PHP и JavaScript. Если у вас есть такая возможность, пожалуйста, свяжитесь с Джеффри по адресу [email protected].

Обратите внимание, что фактическая компенсация будет зависеть от качества окончательного урока и скринкаста.

Написать ПЛЮС учебник
  • Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.