Wufoo-Formularfelder automatisch ausfüllen & andere Tricks

Es ist schon eine Weile her, seit ich meine Liebe zu Wufoo erklärt habe. Oh, süßes Wufoo. Deine köstliche Benutzeroberfläche macht das Erstellen von Formularen einfach, nein, zum Vergnügen. Okay, ein Dichter bin ich nicht. Ein Problemlöser bin ich.

Bei der Erstellung eines Formulars mit Wufoo erhalten Sie eine spezielle URL auf Wufoo.com, auf der sich Ihr Formular befindet. Sie können Personen dorthin schicken, um es auszufüllen, aber viel häufiger betten Sie die Formulare direkt auf Ihrer Website ein. Sie haben über den Theme-Manager eine ziemlich gute Designkontrolle oder über benutzerdefiniertes CSS die vollständige Kontrolle. Aber diese eingebetteten Formulare kommen über einen iframe oder über bereitgestellten JavaScript-Code, der letztendlich auch zu einem iframe wird. Daher haben Sie keine Kontrolle über das Markup. (Obwohl sie, wenn Sie das HTML für Ihre eigene Verarbeitung wünschen, Vorlagen haben). Das ist ziemlich gut. Es bedeutet, dass Ihre Formulare ordnungsgemäß an Wufoo übermittelt werden, ohne dass Sie die Möglichkeit haben, etwas zu vermasseln, und ermöglicht es Wufoo, sie ordnungsgemäß zu verarbeiten und Ihnen Zugriff auf all die anderen erstaunlichen Dinge zu geben, die Wufoo tut.

Nehmen wir nun an, wir möchten einige Felder im Formular automatisch ausfüllen. Wir haben keine Markup-Kontrolle, also können wir nicht anpassenWerte. Und da sich das Formular in einem iframe befindet, können wir diese Felder nicht einmal mit JavaScript aufrufen. Glücklicherweise bietet Wufoo eine Lösung. Wenn Sie die JavaScript-Einbettungsmethode verwenden (sehr empfohlen), können Sie einendefaultValuesParameter übergeben, um Felder automatisch vorab auszufüllen!

<script type="text/javascript">
                var x7x2q5 = new WufooForm();
                x7x2q5.initialize({
                'userName':'Wufoo-User-Name', 
                'formHash':'abc1234', 
                'autoResize':true,

                /* Autofill Magic! */
                'defaultValues':'field8=PREFILL-VALUE-HERE',
                
                'height':'562', 
                'ssl':true});
                x7x2q5.display();
 </script>

Beachten Sie denfield8Namen? Jedes Feld hat einen solchen nummerierten Namen. Sie können diese Werte herausfinden, indem Sie im Bereich „Code“ des Formulars auf die Schaltfläche „API-Informationen“ klicken.

Um in diesem Beispiel die E-Mail-Adresse zusätzlich vorab auszufüllen, würden Sie verwenden: „[email protected]“. Sie können mehrere Felder vorab ausfüllen, indem Sie sie mit „&“ trennen: „[email protected]&field6=name“.

Anwendungsfälle

Mehrere ähnliche Einreichungen

Für das neue Buch „Digging Into WordPress“ haben wir ein Formular zum Einreichen von Errata. Das Formular fragt nach der Seitenzahl, den Errata, dem Namen und der E-Mail-Adresse. Wir hatten einige Leute, die sehr großzügig sehr viele kleine Korrekturen eingereicht haben. Jedes Mal, wenn sie das Formular absenden, müssen sie ihren Namen und ihre E-Mail-Adresse eingeben, was **sehr lästig/repetitiv** sein könnte.

In diesem Fall müssen wir das Formular vorab ausfüllen, *mit Werten aus der vorherigen Einreichung*. Das führt zu einem weiteren kleinen Problem... **Wie erhalten wir Zugriff auf die gerade eingereichten Daten**, um sie zum Vorabfüllen zu verwenden? Wufoo hat eine vollständige API, aber das ist mehr, als wir im Moment brauchen. Während wir unser Formular bearbeiten (unter „Formulareinstellungen“) können wir wählen, ob wir Text anzeigen oder zu einer Website weiterleiten wollen. Normalerweise ist das Anzeigen von Text eine gute Möglichkeit, eine Bestätigung anzuzeigen, aber wir werden hier die Weiterleitung verwenden. Die Weiterleitungs-URL *unterstützt Templating*, was bedeutet, dass wir spezielle Codes einfügen können, um Daten zurück an unsere eigene Website zu übergeben.

Im Fall des Errata-Formulars möchten wir, dass ihr Name und ihre E-Mail-Adresse automatisch ausgefüllt werden, um eine zusätzliche Einreichung zu erleichtern. Nachdem wir die Feld-IDs für diese Elemente nachgeschlagen haben, wird unsere Weiterleitungs-URL so aussehen:

http://digwp.com/book/errata/?field3={entry:Field3}&field4={entry:Field4}&field5={entry:Field5}

Was nach der Einreichung zu Folgendem führt:

http://digwp.com/book/errata/?field3=Chris&field4=Coyier&[email protected]

Nun werden wir auf der Errata-Seite unserer eigenen Website versuchen, diese Werte beim Laden der Seite aus der URL abzurufen:

<?php

    function clean($value) {

       // If magic quotes not turned on add slashes.
       if(!get_magic_quotes_gpc())

       // Adds the slashes.
       { $value = addslashes($value); }

       // Strip any tags from the value.
       $value = strip_tags($value);

       // Return the value out of the function.
       return $value;

    }

    $firstName = clean($_GET["field3"]);
    $lastName = clean($_GET["field4"]);
    $email = clean($_GET["field5"]);

?>

Die Bereinigungsfunktion dient nur dazu, bösartige Eingaben in die URL zu verhindern.

Jetzt werden wir in unserer JavaScript-Einbettung diese PHP-Variablen ausgeben, um vorab auszufüllen:

'defaultValues':'field3=<?php echo $firstName; ?>&field4=<?php echo $lastName; ?>&field5=<?php echo $email; ?>',

Das sollte es tun! Natürlich möchten Sie eine Art Feedback geben, dass das Formular erfolgreich gesendet wurde. Überprüfen Sie also einfach die Anwesenheit einer der Variablen und geben Sie eine Meldung aus:

<?php if ($firstName) { ?>
            
   <div style="background: #d7ffd6; border: 5px solid #39c235; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding: 20px; margin: 0 0 25px 0; color: black; text-align: center; font: 18px Georgia, Serif;">
                 
      Thank you! We'll take a look and get 'er fixed for the next update.
                 
   </div>
            
<?php } ?>

(Versteckte) Informationen weitergeben

Auf „Are My Sites Up“ haben wir ein Wufoo-Formular für Supportanfragen. Es ist für uns viel einfacher, Informationen über die Konten von Personen zu finden, wenn wir deren Kontonummer kennen. Aber die Leute kennen ihre Kontonummer nicht. Das ist nicht wichtig. Wir haben auch eine bestimmte Einstellung, die bei Supportanfragen wichtig ist. Wenn wir dieses Formular in Wufoo erstellen, erstellen wir zwei Felder für diese Daten, aber indem wir einfach ein *CSS-Layout-Schlagwort* verwenden, können wir diese Felder für den Benutzer ausblenden.

Aber nur weil sie versteckt sind, heißt das nicht, dass ihre Werte nicht übermittelt werden! Wir können sie immer noch automatisch ausfüllen. AMSU ist eine Ruby on Rails-App, und in dieser bestimmten Ansicht kann ich auf diese Benutzerdaten zugreifen, also gebe ich sie einfach im defaultValues-Parameter aus, wenn ich das Formular einbetten:

'defaultValues':'field6=<%= current_user.id %>&field8=<%= current_user.timeouts_enabled %>',

Ein wenig Verhaltensspionage

Wufoo selbst hat diese Technik für sein Support-Formular verwendet. Sie wollten wissen, auf welcher Seite sich die Benutzer befanden, als sie das Kontaktformular öffneten (es muss sich damals in einem Popup befunden haben). Sie verwendeten PHP, um die URL zu überprüfen und sie in ein verstecktes Feld im Formular einzufügen. Der Zweck war zu sehen, ob die Benutzer aus dem Hilfe-Bereich kamen (was beweist, dass sie versucht haben, das Problem selbst zu suchen) oder nicht.

Wenn Sie lernen möchten, woher Benutzer kamen, als sie zu Ihrem Formular gelangten, könnte ein verstecktes Feld, in das Sie HTTP_REFERER vorab ausfüllen, cool sein.

$_SERVER['HTTP_REFERER']

Es ist sehr leicht zu fälschen und im Allgemeinen nicht zuverlässig, aber für ein kleines Formular wie dieses wird es wahrscheinlich immer noch einige nützliche Informationen sammeln.