Share
Wufoo ist eine Webanwendung, die Formulare vereinfachen soll. Formulare können im Allgemeinen mühsam sein. Sie müssen XHTML / CSS für die Formularelemente schreiben, den Back-End-Code einrichten, um alle Daten zu erfassen, und anschließend daran arbeiten, brauchbare Berichte dafür zu erstellen. Wufoo vereinfacht diesen gesamten Prozess von der Formularerstellung über die Integration in Ihre Website, die umfassende Unterstützung von Themen bis hin zur Erstellung hübscher, verwendbarer Berichte, mit denen Sie Ihre Daten analysieren können.
Es führt sogar eine Menge fortgeschrittener Dinge aus, einschließlich Web-Hooks und einer geeigneten API für den Zugriff auf die gesammelten Daten. Heute schauen wir uns an, wie Sie mit Wufoo ein einfaches Formular erstellen und dann die API verwenden, um auf die gesammelten Daten programmgesteuert zuzugreifen und diese zu ändern.
Zuerst müssen wir ein Formular einrichten, damit wir damit herumspielen können. Registrieren Sie sich für ein neues Konto bei Wufoo und Sie werden zu einem der humorvollsten leeren Bewerbungsstatus aller Zeiten geführt:
Klicken Sie auf die Schaltfläche, um ein neues Formular zu erstellen, und Sie werden zur Anwendung des Formularerstellers weitergeleitet. Die Benutzeroberfläche ist sehr intuitiv mit einem kontextsensitiven Bedienfeld auf der linken Seite und dem Hauptformularbereich auf der rechten Seite. Das Hinzufügen von Elementen ist so einfach wie das Anklicken oder Ziehen in den Hauptabschnitt.
Durch Klicken auf das erstellte Element können Sie alle relevanten Details bearbeiten.
Da wir es so einfach wie möglich halten möchten, reicht ein einziges Textfeld für eine E-Mail-Adresse aus. Klicken Sie auf "Formular speichern" und wir sind fertig. Wir haben unser erstes Formular mit Null-Code erstellt und es dauerte 60 Sekunden.
Die Integration des erstellten Formulars in unsere Website ist denkbar einfach. Gehen Sie zur Formularseite und klicken Sie auf die Code Link des neu erstellten Formulars.
Wufoo bietet Ihnen eine Reihe von Möglichkeiten, um das Formular Ihren Besuchern zur Verfügung zu stellen, einschließlich einer JavaScript-Version, die in einem Iframe funktioniert, XHTML-Code für eine vollständige Seite mit den Formularen oder nur einen Link, den Sie mit Ihren Freunden teilen können.
Mit der Wufoo-API können Sie Daten, die für Ihr Konto relevant sind, mit wenigen Handgriffen programmgesteuert abrufen, übermitteln und ändern. Das API-Set besteht im Wesentlichen aus zwei stabilen, festen APIs und einem weiteren Beta-Test. Wir werden uns heute die stabilen Teile anschauen.
Beachten Sie, dass Sie nur Daten abrufen und in bereits vorhandene Formulare übermitteln können. Wenn Sie Formulare im Handumdrehen erstellen und dann Daten an sie übergeben oder einfach nur neue Felder über die API erstellen möchten, haben Sie kein Glück. Die aktuelle Version der API lässt diese Funktionalität nicht zu, sucht aber in naher Zukunft zusammen mit einer Reihe anderer Funktionen danach.
Zunächst benötigen Sie jedoch einen API-Schlüssel. Sie können es über den API-Informationslink auf der Seite erhalten, auf der Sie Ihre Code-Snippets erhalten.
Notieren Sie sich Ihren API-Schlüssel und die ID des Feldes, auf das Sie zugreifen und / oder ändern möchten. Wir werden es in Kürze verwenden.
Mit der Abfrage-API können Sie Informationen abrufen, die Sie über Ihre Formulare gesammelt haben, und die Wufoo-Website umgehen. Wenn Sie alle Rohdaten abrufen und daraus einen benutzerdefinierten Bericht erstellen möchten, ist dies der richtige Weg.
Als erstes müssen Sie die URL angeben, die Sie anfordern müssen, um zu den richtigen Daten zu gelangen. Die URL sieht so aus:
http://username.wufoo.com/api/query/
Ersetzen Nutzername mit deinem Benutzernamen und du kannst loslegen. Das Abfrage Teile informieren die Wufoo-Server darüber, dass Sie Informationen von den Servern abrufen möchten.
cURL ist der einfachste Weg, um Daten an den Server zu senden. Wenn Sie ein wenig neu in cURL sind und sich verloren fühlen, empfehle ich Ihnen dringend, diesen cURL-Artikel hier bei Nettuts durchzugehen+.
Gehen wir den Code Schritt für Schritt durch. Wir brauchen zuerst den API-Schlüssel, den wir zuvor notiert haben. Wir benötigen auch den Namen des Formulars, von dem Sie die Daten abrufen möchten. Diese beiden zusammen mit der Version der API, die wir verwenden, zwei sind in unserem Fall die Mindestparameter, die wir für eine erfolgreiche Anforderung benötigen.
Wir verketten alle erforderlichen Elemente als Schlüssel / Wert-Paare und speichern sie zur späteren Verwendung.
Als nächstes übergeben wir die korrekte URL wie oben angegeben zusammen mit der oben erstellten Anforderungszeichenfolge. Wir speichern die Antwort auch auf eine Variable, damit wir sie verwenden können.
$ resp hält die Antwort auf unsere Anfrage. Standardmäßig gibt die Wufoo-API Daten in einem JSON-Format zurück. Falls XML zufällig Ihre bevorzugte Nutzlast ist, müssen Sie der Anforderungszeichenfolge einen zusätzlichen Parameter hinzufügen. Der zusätzliche Parameter hat das Format von w_format = format Dabei kann das Format entweder XML oder JSON sein.
Die zurückgegebene JSON-Nutzlast ist tatsächlich ziemlich groß und enthält zahlreiche Informationen. Die relevanten Teile sind unten gezeigt:
Der Hauptteil ist das Ergebnis der Anfrage zusammen mit Informationen zum angeforderten Formular, einschließlich Name des Formulars, Titel, URL, Beschreibung und vielen anderen Informationen.
Der zweite interessante Punkt sind die Felder, die das Formular enthält. Da unser Formular mit einem einzigen Feld sehr einfach war, sind unsere zurückgegebenen Daten ziemlich kurz. In jedem Fall werden Informationen über die ID des Felds, dessen Titel und verschiedene andere Informationen übermittelt, einschließlich Angaben dazu, ob es erforderlich ist oder nicht, eine Beschreibung des Felds usw..
Der letzte Punkt von Interesse ist der Teil, der die Einträge selbst enthält. Jeder Eintrag für das ausgewählte Formular wird an den Anrufer zurückgegeben, der eine Vielzahl von Informationen enthält, darunter die ID des Eintrags, den Wert der Felder, die IP-Adresse des Benutzers, das Erstellungsdatum usw..
Was Sie mit den Daten tun, liegt ganz bei Ihnen. Sie können die Daten analysieren, um einen schönen benutzerdefinierten Bericht zu erstellen, die Informationen nach bestimmten Daten durchsuchen oder sie alle in eine Kalkulationstabelle oder Datenbank eingeben. Ihre Vorstellungskraft ist die Grenze.
Mit der Sende-API können Sie Daten direkt an die Wufoo-Server senden. Diese API ist besonders nützlich, wenn Sie unbedingt Ihr eigenes XHTML / CSS verwenden müssen und trotzdem alle Back-End-Funktionen von Wufoo nutzen. Auf diese Weise erhalten Sie das Beste aus beiden Welten: Sie können Ihren eigenen, individuellen Look verwenden, aber die ganze Kraft von Wufoo behalten.
Das Frontend erfordert keinen signifikanten Unterschied. Hier ist das Markup, das ich zum Testen der Sende-API verwendet habe.
handler.php sieht so aus.
Hier gibt es ein paar Dinge zu beachten. Wie bei der Abfrage-API speichern wir das apikey und das formid, damit wir es später verwenden können. Wir erfassen auch den Wert des POST-Textfelds, damit wir es selbst an Wufoo senden können.
Beachten Sie, dass wir auch eine Variable erstellt haben Feldid. Dies entspricht direkt der auf der API-Schlüsselseite vorhandenen API-ID.
Danach ist alles so wie zuvor. Wir verketten die Zeichenfolge und verwenden dann cURL, um die Daten an den Server zu übergeben. Der Server gibt eine JSON-Antwort zurück, die wie folgt aussieht:
Das ist es. Kein Ärger, kein Unsinn. So einfach ist das Posten bei Wufoo durch unseren benutzerdefinierten Code.
Als zusätzliche Bonusfunktion können Sie in Wufoo jetzt Beiträge an andere Dienste senden, wenn ein neuer Eintrag im System angemeldet ist. Mit dieser fantastischen neuen Funktion können Sie viele nette Dinge erledigen, aber ich werde mich nur mit der Verwendung dieser Funktion beschäftigen.
Um zur Benachrichtigungsseite zu gelangen, klicken Sie auf der Formularseite auf den Benachrichtigungslink.
Auf dieser Seite können Sie sich über eine Reihe von Optionen, darunter E-Mail und SMS, benachrichtigen lassen oder an Dienste wie Highrise, Twitter und vieles mehr senden, wenn ein neuer Eintrag gepostet wird. Aber das sind nicht die, die wir heute betrachten werden. Wir werden uns Web-Hooks anschauen - eine clevere Technologie, mit der Entwickler HTTP-Callbacks empfangen können, wenn ein Eintrag an Wufoo gesendet wird. Betrachten Sie es als Rückruf bei Steroiden.
Auf der Seite von Wufoo müssen Sie lediglich eine URL eingeben, an die Wufoo jedes Mal Daten POST sendet. Alles, was Sie auf Ihrer Seite brauchen, um eine Seite einzurichten, die die POST-Daten erfasst. Zu Testzwecken können Sie bei PostBin ein Konto einrichten, das Ihnen den Ärger erspart. Geben Sie diese URL in Wufoo ein und Sie sind fertig. Ein Beispiel für die von Wufoo in unserer Ziel-URL geposteten Daten.
Sehr geschickt, wenn ich es selbst sagen darf.
Und wir sind fertig! Wir haben uns mit dem Erstellen eines einfachen Formulars mit Wufoo befasst. Anschließend haben wir uns mit dem Programm befasst, die Daten, die wir mithilfe der einfach zu bedienenden API von Wufoo gesammelt haben, programmgesteuert zu bearbeiten und abzurufen. Hoffentlich war das für Sie nützlich und Sie fanden es interessant. Ich werde mir den Kommentarbereich genau ansehen. Also klingeln Sie dort, wenn Sie Fragen haben.
Fragen? Schöne Dinge zu sagen? Kritikpunkte Schlagen Sie den Kommentarbereich an und hinterlassen Sie einen Kommentar. Glückliche Kodierung!
Wussten Sie, dass Sie bis zu 600 US-Dollar verdienen können, wenn Sie ein PLUS-Tutorial und / oder einen Screencast für uns schreiben? Wir suchen ausführliche und gut geschriebene Tutorials zu HTML, CSS, PHP und JavaScript. Wenn Sie die Möglichkeit haben, wenden Sie sich bitte an Jeffrey unter [email protected].
Bitte beachten Sie, dass die tatsächliche Kompensation von der Qualität des abschließenden Tutorials und des Screencasts abhängt.
Accentsconagua