Letzten Monat habe ich darüber geschrieben, wie ich mir wünschen würde, dass Kunden, die eine Änderungsanfrage für ihre Website haben, mich wie ein Sechsjähriger behandeln würden. Der Punkt war, dass diese Änderungsanfragen oft viel zu vage sind, was zu Verwirrung und letztendlich zu Zeitverschwendung führt. Es wäre effizienter, wenn diese Änderungsanfragen alles enthalten würden, was benötigt wird, um diese Änderung ohne Verwirrung vorzunehmen.
Ich dachte, diese Idee würde sich gut für ein Demo eines Webformulars mit einigen fortgeschrittenen Funktionen eignen.
Demo ansehen Dateien herunterladen
Ist das ernst gemeint?
Der Zweck ist hier wirklich, einige schicke Formularstile und fortgeschrittene Formularfunktionalität zu zeigen. Persönlich würde ich es lieben, wenn ich jeden meiner Kunden dazu bringen könnte, dies zu verwenden, damit ich genau wüsste, was sie jedes Mal wollten, aber das ist wahrscheinlich nicht realistisch.
Was ist daran „fortgeschritten“?
Einiges
- Ein jQuery-Plugin wird verwendet, um die Gestaltung der Formularelemente zu unterstützen. Es ersetzt komplett Radio-Buttons und Checkboxen durch benutzerdefinierte Grafiken und umhüllt Textareas und textbasierte Eingaben ebenfalls mit schöner Gestaltung. Diese Art von Gestaltung kann mit CSS allein nicht erreicht werden.
- Das Formular ist voll funktionsfähig, es sendet an sich selbst und verschickt tatsächliche E-Mails.
- Das Formular ist validiert. Die Übermittlung kann nur erfolgen, wenn die erforderlichen Felder ordnungsgemäß ausgefüllt sind.
- Die Übermittlung erfolgt über AJAX, keine Seitenaktualisierung erforderlich.
- Es gibt eine Option zum Speichern von Name/E-Mail, sodass häufige Absender nicht ständig wiederkehrende Informationen eingeben müssen. Dies wird über COOKIES gehandhabt.
- Die Übermittlung aller Formularelemente wird über ein weiteres jQuery-Plugin SERIALISIERT, sodass das Hinzufügen und Ändern von Formularelementen einfach ist.
Wirst du erklären, wie es erstellt wurde?
Ich plane, diese Woche den Screencast zu diesem Formular zu machen und all diese Dinge zu besprechen. Wenn Sie also interessiert sind, stellen Sie sicher, dass Sie diesen abonniert haben. All dies könnte von Grund auf neu geschrieben werden, aber wir werden uns Zeit und Verstand sparen, indem wir uns stark auf jQuery und drei großartige Plugins verlassen
Der eigentliche E-Mail-Versand und die Cookie-Logik werden von PHP übernommen.
Schön, sehr schön…
Das ist ziemlich verdammt süß.
Wunderbar, danke Chris
Hat einige Probleme in Chrome und Safari mit dem Button „Auf mehreren Seiten ändern?“.
Aber insgesamt ein schönes Formular…
Sollte behoben sein.
Stand 12:30 PST, es gibt immer noch einen Bug in Google Chrome und Safari in den Textareas „Aktueller Text/Neuer Text“. Der Cursor beginnt an einer seltsamen Stelle für beide Textareas. Ansonsten gute Arbeit!
Ah ja, das war ein anderes Problem, das jetzt auch behoben ist. Fühlen Sie sich frei, Fixes für Dinge vorzuschlagen, die Sie als seltsam empfinden, Leute, das ist immer hilfreicher.
Das ist in der Tat ein ziemlich schickes Formular. Nur eine Sache: Ich persönlich finde, dass die Labels text-align: right; haben sollten statt left.
Manchmal ist es für das Auge schwer, die unsichtbare Linie vom Labeltext zum Eingabefeld/Boxen/Radio-Buttons zu sehen.
Schönes Formular, hat aber Probleme mit Safari Version 3.2.1
Es gibt einen Bug in Zeile 30 von index.php.
Dort steht:
$message .= "CURRENT Content: " . $addURLS . "\n";Sollte sein:
$message .= "CURRENT Content: " . $curText . "\n";Behoben.
Schönes Tutorial Chris.
Eine Frage aber
Ich bin neu in PHP und schreibe ein Projekt mit einem Anmeldeformular. Aber anstatt nur des Sende-Buttons habe ich einen weiteren, um die Vorschau der Benutzereingaben zu unterstützen, und ich bekomme das nicht hin.
Daten gehen verloren beim Hin- und Herwechseln bei der Vorschau.
Ich schätze Ihren Rat im Voraus.
Vielen Dank,
M
Benutzen Sie nicht die Zurück-Taste. Verwenden Sie eine POST-Anfrage, um zum ursprünglichen Formular zurückzukehren. Ich gehe davon aus, dass Sie eine POST-Anfrage verwenden, um die Vorschau zu generieren. POSTen Sie alle Felder in versteckte Eingabefelder auf der Vorschauseite. Um zur ursprünglichen Ansicht zurückzukehren, verwenden Sie eine Eingabeschaltfläche, um zurück zum Original zu POSTen. Geben Sie dann in allen ursprünglichen Feldern die entsprechende POST-Variable in den Eingabefeldern aus. Beispiel:
<input type="text" name="email" value="<?php echo $_POST['email']; ?>" />Ich hoffe, das hilft.
Ohne Ihren Code zu sehen, kann man hier nicht viel tun. Aber wenn die Daten beim Wechseln von der „Vorschau“ zum regulären Formular zum Absenden verschwinden – der wahrscheinlichste Schuldige ist hier ein Mangel an Session- oder Cookie-Variablen, um die eingegebenen Daten wiederherzustellen, oder falsch benannte Variablen, um die Formulareinträge wiederherzustellen.
Danke Mann.
Ich werde mich definitiv darum kümmern, eine Session/ein Cookie zu verwenden und sehen, was passiert.
Nochmals vielen Dank.
Das ist tatsächlich eine wirklich nette Idee. Ich liebe es!
Ich werde diese Woche damit experimentieren und mein eigenes zusammen mit deinem Screencast erstellen. =]
Ausgezeichnet. Ich werde ein Standard-Content-Update-Formular auf meiner Website für Kunden erstellen. Ich werde sie dazu bringen, es zu benutzen, indem ich ihnen sage, dass alle E-Mail-Anfragen automatisch als niedrig priorisiert eingestuft werden, sodass alles andere als niedrig priorisierte Arbeit besser auf dem Formular erledigt werden sollte.
hehe. Hoffentlich funktioniert es…
Sehr cool und nützlich. Ich musste bei meinem letzten Job so etwas machen, es war ein riesiger Aufwand, nur um Leute dazu zu bringen, es zu unterschreiben!
Schön! Tolle Arbeit Chris, danke.
Die Textareas sind in Safari 4 (Beta) falsch – nur als Hinweis.
Sieht toll aus! Liebe „Super Wicked Urgent“ haha
Ich liebe alles außer der Dringlichkeitsbox. Meine eigene Erfahrung mit Kunden ist, dass für sie alles „OMGWTFBBQ“ dringend ist… sei es die Änderung eines Tippfehlers oder das Hinzufügen von Inhalten oder das Ändern des Textschattens um 1 Grad.
Für meine Arbeit versuche ich, meinen Chef dazu zu bringen, selbstversendende PDF-Dateien für diese Art von Dingen zu verwenden. Zu oft bekomme ich per E-Mail Änderungen wie „Ändere ‚that‘ zu ‚thats‘“. Keine Seite… nicht einmal irgendeine Angabe, für welche der vielen Websites des Kunden die Änderung bestimmt ist :(
Ich kann den Screencast kaum erwarten! Gute Arbeit Chris. Danke!!
Ich warte auch auf den Screencast. Sieht schick aus.
Großartig! Ich benutze es schon, habe gerade eine E-Mail an alle meine Wartungskunden geschickt. Sollte einige Hin- und Her-Gespräche sparen.
Zwei Anfragen, die von Kunden kommen: Wie schwer wäre es, einen Dateiuploader einzubauen? Das Senden von Anhängen ist für meine Kunden sehr üblich (Bilder, PDF usw.). Außerdem wäre es schön, wenn die E-Mail, die ich bekomme, den Namen der hochgeladenen Datei enthalten würde und „von“ der E-Mail-Adresse käme, die der Kunde oben eingibt.
Mike,
Hier ist ein schöner kleiner Beitrag (http://woork.blogspot.com/2009/02/file-uploaders-collection-for-web.html), der kostenlose Dateiuploader enthält, die für Ihre Webprojekte bereit sind und das sein könnten, wonach Sie suchen.
Ich würde gerne type=”file” Uploader gestalten. Ich bekomme es nicht zum Laufen. Ich weiß nicht, was ich tun soll
Sehr schöne Idee.
Was aber, wenn ein Kunde mehr als eine Änderung hat und einige davon mit unterschiedlichen dringenden Bedürfnissen?
Sie können sie nicht veranlassen, ein Formular für jede Änderung einzureichen, sie könnten besser eine E-Mail mit diesen Änderungen schreiben.
Das mag für den Kunden unannehmlich sein, einzelne Änderungen einreichen zu müssen – aber gleichzeitig bietet es einen einzigartigen Eintrag für jede Änderung, was bedeutet, dass der Kunde (potenziell) auf ein System zugreifen kann, das zeigt, wann jede Änderung abgeschlossen ist, und der Designer hat eine viel leichter verständliche Liste, was zu tun ist, anstatt einer langen E-Mail mit über 20 Änderungen oder, Gott bewahre, einem Word-Dokument mit Änderungen, die sich über mehrere Projekte erstrecken.
Für mich ist es eine Frage, ob die Unannehmlichkeit die Gewissheit wert ist, dass keine Änderungen im falschen Bereich vorgenommen oder aufgrund einer unübersichtlichen E-Mail/Anhangs komplett weggelassen werden.
Alles, was du sagst, klingt gut, aber dennoch zeigt es, wie faul man werden kann.
Ok, mit dieser Erklärung lassen wir die Unannehmlichkeiten beim Kunden, es ist sein Problem, wenn er das Formular 10 Mal für 10 Fehler einreichen will, nicht unser.
Gute Idee, aber das CSS ist definitiv in Chrome falsch!
Funktioniert nicht mit ausgeschaltetem JavaScript, beim Absenden des Formulars erhalten Sie die Seite „Ihre Nachricht wurde gesendet.“.
PHP sollte das Formular auch validieren.
Die Nachricht wird also tatsächlich gesendet, also „funktioniert“ es, aber Sie haben Recht, die Eingaben werden dann nicht validiert.
Wenn Sie die serverseitige Validierung in PHP schreiben möchten, würde ich das Beispiel gerne aktualisieren.
Die Idee hinter dem Formular ist großartig. Die Wahrheit ist, dass nur ein sehr kleiner Teil der Kunden dieses Formular jemals benutzen würde, wenn sie Änderungen benötigen. Sie würden es eher vorziehen, Sie mit E-Mails zu bombardieren, in denen nichts Spezifisches über die benötigten Änderungen steht :? :)
Das Dropdown-Menü funktioniert bei mir in IE7 nicht wirklich, die Dropdown-Optionen kommen hinter der URL der Seite: Formular. Ich habe einen Screenshot hochgeladen: http://bayimg.com/oaPhJAAbh . Ist das nur bei mir so?
Nein, du bist nicht der Einzige. Bei mir in IE7 ist es dasselbe. Das Dropdown muss irgendwie nach vorne gebracht werden, da es hinter dem Formularelement „URL der Seite“ und den darunter liegenden Elementen verborgen ist.
Sieht fantastisch aus Chris! Kann den Screencast kaum erwarten :D
Super Wicked Urgent… Chris, du bist ein Genie. Ich rolle mich gerade vor Lachen. Obwohl, all die Arbeit meiner Kunden ist erdbebenartig dringend, selbst kleine Textänderungen. ;-)
Sieht fantastisch aus, aber es gibt zwei Probleme, die meiner Meinung nach angegangen werden sollten: (1) Die Pflichtfelder werden nicht im Voraus angezeigt – man weiß nicht, dass sie erforderlich sind, bis man das Formular mit fehlenden Werten absendet. (Eine ziemlich übliche Methode, dies anzuzeigen, ist, den Labels von Pflichtfeldern einen Stern hinzuzufügen.) (2) Es scheint nicht möglich zu sein, das jQuery-gestylte Dropdown-Menü nur mit der Tastatur zu bedienen. Ich kann mit Tab hineinspringen und dann Enter drücken, um das Menü zu öffnen, aber ich kann das ausgewählte Element nicht ändern.
Auf jeden Fall sollten Sterne da sein… Ich werde versuchen, das im Screencast zu behandeln. Auch wahr bezüglich des Dropdowns, aber ich bin nicht sicher, ob ich die Fähigkeit dazu habe. Dieses Menü wird komplett durch dieses jQuery-Plugin ersetzt, sodass es nicht die gleichen Verhaltensweisen zeigt, es sei denn, es wird neu geschrieben, was offensichtlich nicht der Fall ist.
Gibt es eine Lösung für die Werte?
Ich warte schon lange auf deine Videos!!
Gut gemacht, Chris…
Ich habe geplant, eine All-in-One-Lösung (Buchhaltung, Projektmanagement, Hosting) zu entwickeln, um die Kundschaft der Webdesign-Firma, für die ich arbeite, zu betreuen. Dies könnte die zusätzliche Motivation gewesen sein, die ich brauchte, um mich damit zu beschäftigen und mit dem Coden zu beginnen.
Danke!
Das ist eigentlich eine tolle Idee. Ich habe etwas Ähnliches benutzt, als ich an einer Universität gearbeitet habe, wo ich ein Formular erstellt habe, das es ihnen erlaubte, alle Informationen einzugeben, und dann die Formulardaten mit unserem Auftragsverfolgungssystem verknüpft habe. Es war eine einfache Möglichkeit, Website-Änderungsanfragen zu stellen und sich dann im Verfolgungssystem anzumelden und den Status dieser Anfragen zu sehen. Für ein Entwicklerhaus, das nur Webentwicklung betreibt, sollte es ziemlich einfach sein, ein Verfolgungssystem zu erstellen, das mit dem Formular verknüpft ist, und es würde Kunden Anreize geben, es zu nutzen – da sie den Status ihrer Anfrage online verfolgen könnten.
Das ist fantastisch, genau das, was ich brauchte, mit all diesen geistlosen Zombies, die in meinem Büro herumlaufen. Sie gehen davon aus, dass ich ein Gedankenleser bin und dank Chris muss ich meine besonderen Kräfte nicht mehr einsetzen! :)
Was brauchtest du?… Entschuldigung, ich habe kein Änderungsantragsformular gesehen!
Du wolltest was erledigt haben?… Nein, da war kein Änderungsantragsformular in meinem Posteingang!
Was war das, du hast keine Eier und möchtest offiziell eine Geschlechtsumwandlung?… Fülle das Geschlechtsumwandlungsformular aus!
Entschuldigung für das Letzte, ich bin ein bisschen über die Stränge geschlagen!
Bwaahahaha… nochmals danke!
我來自台灣
Dank dir ist es Übersee :D
Das ist wirklich fantastisch.
Es ist ein bisschen schade, dass die Bibliothek Elemente durch Tabellen ersetzt und somit nicht-semantisches Markup erzeugt (das wegen der JavaScript-Ersetzung gültig erscheint).
Es sieht aber tatsächlich großartig aus!
Ich freue mich auf deinen Screencast!
Das ist genau das, was ich brauchte, toller Beitrag! :)
Sieht sehr gut aus, aber die gelbe Google Auto-Fill-Anzeige (bei mir, im E-Mail-Feld) ist vom Feld-Inputbereich versetzt (es sieht schlecht aus, wie gelbes Klebeband über dem Formular).
Noch eine Sache zu bedenken/testen. Aber insgesamt gute Arbeit.
Oh, das liebe ich.
Die Idee ist wunderbar und ich könnte das wirklich für meine Kunden gebrauchen.
Eine weitere Funktion dieses Formulars ist, dass es die genannten Kunden zweimal überlegen lässt, bevor sie es absenden. Ich meine, vielleicht erkennen sie manchmal, wie albern ihre Anfragen sind.
Toller Beitrag!
Tolles Formular – aber wie du sagst – die meisten Kunden werden es wahrscheinlich nicht benutzen – vielleicht in einem Unternehmensumfeld
Oh, tolles Formular! Ich liebe dieses Formular wirklich und kann es kaum erwarten, es zu benutzen.
Vielen Dank, es ist fantastisch :)
Wir haben vor Jahren ein eigenes Änderungsauftragssystem für unser Webdesign-Unternehmen gebaut. Danke für diesen Artikel – du hast einige Anregungen für Updates geliefert! Wir haben die gleichen vagen Kommentare – meistens glaube ich, weil sie immer auf ihrer eigenen Website sind und davon ausgehen, dass wir sofort wissen, worauf sie sich beziehen – was schwierig sein kann, wenn wir über 300 von uns entwickelte Websites hosten.
Nachdem ich Schwierigkeiten hatte, mein Formular auf Safari, FF, IE auf Mac- und PC-Plattformen zum Laufen zu bringen, gefällt mir die Idee dieses Formulars wirklich gut. Ich werde es ausprobieren und sehen, wie es in diesen Browsern reagiert. Die Abstände bei den Radio-Buttons sind im Moment ein Albtraum. Also danke, Stoff zum Nachdenken.
jqTransform ist unter der GPL lizenziert, was es für mich zu einem No-Go macht. Ich bin kein Lizenzexperte, aber macht das deinen Code nicht auch zu GPL?
Ich mag sehr, wie dieses Formular funktioniert, es hat so ziemlich alles, was ich in einem Kontaktformular möchte. Aus Styling-Sicht habe ich jedoch ein paar Enttäuschungen festgestellt.
Die ausgeblendeten Fehlermeldungen erscheinen in IE & FF auf gegenüberliegenden Seiten der Eingabefelder {machen Sie einen Toggle mit IE-Tab, falls Sie ihn haben}
Auch die Eingabeelemente selbst sind in IE & FF unterschiedlich groß, ich weiß wirklich nicht, wie ich diese Probleme umgehen soll, aber sie sind die einzigen Dinge, die mich davon abhalten, dies in einigen ausgewählten Situationen einzusetzen.
Wenn jemand die Antworten versteckt, gibt es bitte Aufschluss und macht meinen Samstag!
Ich habe auch vergessen zu erwähnen, dass das sehr, sehr coole Dropdown-Menü hinter dem Textarea „Aktueller Text/Inhalt“ verschwindet.