Last month I wrote about how I wished when clients had a change request for their site, they would treat me like a six-year-old. The point was, those change requests are often far too vague which leads to confusion and ultimately wasted time. It would be more efficient if those change requests contained everything needed to make that change without confusion.
I thought this idea would make for a good demo of a web form with some advanced functionality.
Is this fo’ real?
The purpose here is really to show off some fancy form styling and advanced form functionality. Personally I would love it if I could make every single client of mine use this so I knew exactly what they wanted every time, but that’s probably not realistic.
What is “advanced” about this?
Several things:
- A jQuery plugin is used to help with the styling of the form elements. It completely replaces radio buttons and check boxes with custom graphics, and wraps textareas and text-based inputs in nice styling as well. This kind of styling just can’t be done with CSS alone.
- The form is fully functional, it submits to itself and sends actual email.
- The form is validated. Submission can only happen when the required fields are filled out properly.
- Submission is handled via AJAX, no page refresh needed.
- There is an option to save Name/Email, so frequent submitters are not stuck entering common information over and over. This is handled via COOKIES.
- The submission of all the form elements is SERIALIZED, via another jQuery plugin, so adding and changing form elements is easy.
Are you going to go over how it was built?
I plan to do the screencast this week on this form, and go over all that stuff. So if are interested, make sure you are subscribed to that. All of this could be written from scratch, but we are going to save ourselves time and sanity by leaning heavily on jQuery and three awesome plugins:
The actual mail-sending and cookie stuff will be dealt with by PHP.
Nice, very nice…
That’s pretty freaking sweet.
Wonderful, thank you Chris
Has some Chrome and Safari issues with the “Change on multiple pages?” button.
But overall, a nice form…
Should be fixed.
As of 12:30PST, it still has a Google Chrome and Safari bug in the Current Text/New Text textareas. The cursor starts in a weird place for both textareas. Otherwise, great job!
Ah yes, that was a different problem, which is also fixed. Feel free to suggest fixes for things you see that are weird folks, that’s always more helpful.
That’s a pretty neat form, indeed. Just one thing: I personally think that the labels should have text-align: right; instead of left.
Sometimes it’s hard for the eye to see the invisible line from the label text to the input/boxes/radio buttons.
nice form, but has problems on safari version 3.2.1
There is one bug in line 30 of index.php.
There is:
$message .= "CURRENT Content: " . $addURLS . "\n";
Supposed to be:
$message .= "CURRENT Content: " . $curText . "\n";
Fixed.
Nice tut Chris.
A question though:
I am new to PHP and I am writing a project with a sign up form. But instead of having the submit button only I have another one to support the previewing of the user input and I can’t get that to work.
Data gets lost between the going back and forth when previewing.
Appreciate your advice in advance.
Thanks,
M
Don’t use the back button. Use a post action to get back to the original form. I assume you’re using a post action to generate the preview. Post all of the fields into hidden input fields on the preview. To get back to original view, use an input button to post back to the original. Then inside all the original fields echo the appropriate post variable in the input fields. Example:
<input type="text" name="email" value="<?php echo $_POST['email']; ?>" />
Hope this helps.
Without seeing your code there isn’t much one could do here. But if the data is vanishing when switching back from ‘preview’ to the regular form to submit it- the likely culprit here is a lack of Session or Cookie variables to restore the entered data, or misnamed variables to restore the form entries.
Thanks man.
I will definately look at using a session/cookie and see what happens.
Thanks again.
This is a really neat idea actually. I love it!
I’ll experiment with it this week, and make my own along with your screencast. =]
Excellent. I shall build up a standerd content update form on my website for clients. I will get them using it by telling them that all email content requests will be automaticly marked as low priority, so anything other than low priority work had better be done on the form.
hehe. Hopefull it will work…
Very cool and useful. I had to made on of these at my last job, it was a huge headache just getting people to sign off on it!
Nice! Great work Chris, thanks.
The textareas are off in safari 4 (beta) — just a heads up.
Looks great! Love “Super Wicked Urgent” haha
Love everything but the urgency box. My own experience with clients is that, to them, everything is “OMGWTFBBQ” urgent… be it changing a typo or adding content or changing the shade of text by 1 degree.
For my work, I’m trying to get my boss to use self-mailing PDF files for this sort of thing. Too often I get e-mailed changed like “Change ‘that’ to ‘thats'”. No page… not even any indication of which of the clients many sites the change is for :(
Can’t wait for the screencast! Good work Chris. Thank you!!
Waiting on the screencast too. Looks slick.
Great! I’m using it already, just sent out an email to all my maintenance clients. Should save some back-and-forth.
Two requests, though, coming from clients. How hard would it be to plug in a file uploader? Sending attachments is very common for my clients (images, pdf’s, etc). Also it would be nice if the email I got had the name of the uploaded file in it, as well as be “from” the email address that the client puts in the field at the top.
Mike,
Here’s a nice little post (http://woork.blogspot.com/2009/02/file-uploaders-collection-for-web.html) which features free file uploaders that are ready to use in your web projects that may be what you’re looking for.
Would like to style type=”file” uploader. I can’t get it to work. Not sure what I should do
Very nice idea.
However, what if a client has more than one change and some of them with different urgent needs?
You can’t make them submit one form for every change, they’d be better off writing down an e-mail with those changes.
That might inconvenience the client; having to submit individual changes- but at the same time it provides a unique entry for each change, meaning that the client can (potentially) access a system showing when each is done, and the designer has a much easier to comprehend list of what work needs to be done rather than a long e-mail outlining 20+ changes, or god forbid a Word document with changes spanning several projects.
To me it’s a question of whether the inconvenience is worth the assurance that no changes will be made in the wrong area or completely omitted due to a cluttered e-mail / attachment.
All you say sounds pretty, but nonetheless, shows how lazy you can get.
Ok, so with that explanation let’s leave the inconvenience to the client, is his problem if he wants to submit 10 times the form for 10 errors, not ours.
Nice idea but the CSS is definitely off in Chrome!
Doesn’t work with JavaScript turned off, when submitting the form you get the “Your message has been sent.” page.
PHP should be validating the form as well.
So the message IS getting sent, so it “works”, but you are right the inputs are not validated then.
If you would like to write the PHP-side validation, I’d be happy to update the example.
The idea behind the form is great. The truth is, that only very little part of the clients would ever use this form if they need any changes. They’d rather bomb you with mails saying nothing specific about the changes they need :? :)
The dropdown menu doesn’t really work for me in IE7, the dropdown options comes behind URL of Page: Form. I uploaded a screen shot: http://bayimg.com/oaPhJAAbh . Is this just for me?
Nope, you’re not the only one. It’s the same for me on IE7. The dropdown needs somehow bringing to the front as it’s hidden behind the “URL of Page” form element and those below it.
Looks awesome Chris! Can’t wait to see the screen cast :D
Super Wicked Urgent… Chris, you are a genius. I’m ROTLMAO right now. Although, all my client’s work is earth-ending urgent, even small text changes. ;-)
Looks awesome, but there are two issues I think should be addressed: (1) The required fields aren’t indicated in advance–you don’t know they’re required until you submit the form with some of the values missing. (A pretty standard way to indicate this is to add an asterisk to the labels of required form elements.) (2) It doesn’t seem to be possible to operate the jQuery-fied drop-down menu using just the keyboard. I can tab into it, and then press Enter to drop down the menu, but I can’t change the selected item.
Definitely should have asterisks… I’ll try to get to that in the screencast. Also true about the dropdown, but I’m not sure if I have the skillz to deal with that one. That menu is totally replaced with that jQuery plugin, so it won’t exhibit the same behaviors unless that is rebuilt, which apparently isn’t the case.
about the values have a solution?
waiting for your videos for long!!
Nicely done Chris…
I have been planning on building an all-in-one (accounting, project management, hosting) solution to deal with the clientele at the web design company I work for. This may have been the extra little motivation I needed to dig in and start coding.
Thanks!
This is a great idea, actually. I used something similar when I worked at a University, where I created a form that allowed them to enter all the info and then linked the form data to our work order tracking system. It made for a simple way to make site change requests and then log in to the tracking system and see the status of those requests. For a dev house that is only doing web dev it should be fairly straightforward to build a tracking system linked to the form and would provide incentive for customers to then use it – as they would be able to track the status of their request online.
This is fantastic, just what I needed with all these mindless zombies walking around in my office. They assume that I’m a mind reader and thanks to Chris I don’t have to use my special powers anymore! :)
What was that you needed?…Sorry, I didn’t see a change of request form!
You wanted what done?…Nope, there wasn’t a change of request form in my inbox!
What was that, you don’t have any balls and would like to officially have a sex change?…Fill out the change of sex form!
Sorry about the last one, I got a little carried away!
Bwaahahaha…thanks again!
我來自台灣
It’s overseas thanks to you :D
This is really fantastic.
It’s a bit of a shame that the library replaces elements with tables, thus creating non-semantic markup (that seems valid because of the javascript replacement).
It indeed looks great tho!
looking forward to your screencast!
This is just what I needed, great post! :)
Looks very nice, but the google auto-fill yellow indicator (for me, on email field) is offset from the field input area (it looks bad, like yellow tape over the form).
Yet another thing to consider/test for. But nice work overall.
Oh, I love this.
The idea is wonderful and I could really use this for my clients.
One other feature of this form is that it makes said clients think twice before submitting. I mean, maybe sometimes, they’ll realize how silly their requests are.
Great post!
great form – but as you point out – most clients probably won’t use it – in a corporate environment maybe
Oh great form! I really love this form and I can’t wait to use it.
Thank you very much, it’s fantastic :)
We built our own change order system years ago for our web design company. Thanks for this article – you’ve provided some inspiration for some updates! We run into the same vague comments – most of the time I think due to the fact that they are always in their own website, and are assuming we know instantly what they are referring to – which can be tough when we host over 300 websites that we’ve developed.
Having struggled getting my form to work on safari, ff, ie on mac and pc platforms I really like the idea of this form, going to give it a try and see how it reacts in those browsers, radio button spacing is a nightmare at the moment. So thanks, food for thought.
jqTransform is licensed under the GPL, which makes it a non-starter for me. I’m not a licensing guru, but doesn’t that make/require your code to be GPL as well?
I really like how this form acts, pretty much has everything I want in a contact form. however, from a styling standpoint I found a few downers.
the hidden error messages show up on opposite sides of the inputs in IE & FF {do a toggle with IE tab if you have it}
also the input elements themselves are sized differently in IE & FF, don’t really know how to get around either of these issues, however they are the only things keeping me from using this in a few choice situations rightnow.
if someone is hiding the answers, shed some light and make my Saturday!
also failed to mention that the very very slick dropdown goes behind the ‘current text/content’ textarea.