Screencast 05: Build your own Ajax Contact form in less than 15 minutes
Today I felt the “mini” effect as the result of a second-hand digging from a website called miniajax (I thought about this intro sentence for all of about two minutes). Today that website was dugg. There is a link directly at the top of that page linking to my Ajax Contact Form I wrote near a year and a half ago of July ‘05. I thought to myself… “wow, that darn thing is still kickin.’” Then it occurred to me, that it would probably be a good idea just to show people how to make their own ajax contact form… surely it would only take about 15 minutes.
A challenge unto myself was born. Hence, this screencast. Now let me give you some facts straight up before you watch this. The form built in the video is not spam proof. The goal was to finish something quick and dry (and dirty) in less than 15 minutes. I also played a few sound tracks in the background just so I have a good idea of how much time I had left (probably only entertaining myself).
Nevertheless, a fully functioning, ajax driven, email form was built. Cheers. Hope you enjoy the ‘cast :)
Download the Quicktime Version (18 MB | 13 minutes 21 seconds)
If you cannot see the video below: get the DivX Web Player (available for both Win & Mac)
February 28th, 2007 at 1:27 am
Thanks for the humorous post Dustin. It’s 9am here and it was nice to wake up seeing you struggle with them darned double quotes ;)
February 28th, 2007 at 5:51 am
Loved that last song .. What about sending an attachment with the email? and spam control!
February 28th, 2007 at 6:25 am
Really loving the screencasts, Dustin. Glad to see you’re back in action with them. Just watched this out of curiosity instead of checking feeds before work and I’m glad it did — put me in a good mood to start working. Thanks again!
“let’s make a stupid form” was probably my favorite part
February 28th, 2007 at 8:09 am
Watching you code was fun, it’s like watching a performance with text. I never thought I would find humor in watching someone else code. Have you considered writing this without a library?
February 28th, 2007 at 8:26 am
@Harmen: Oh dear, attack of the single/double quotes in php. Arg. I can’t believe how much that was tripping me up… I kept listening to the music and psyching myself out that I wasn’t going to hit the mark in 15 minutes. That’s when it seemed easier just to start another line and concat the two strings.
@Conrad: Attachments wouldn’t be that much harder in PHP. Spam control could just as easily be implemented with JavaScript, but then your form because inaccessible. The idea was to have it fallback. If you wanted, we could have implemented a field that prompted the user to say something specific, then validate against that.
@Jon: That’s generally how all web developers probably feel about forms. Yay forms! gah.
@Marc: The first ajax contact form was done without a library if you take a look. This could just as easily have been the same. This was just more or less a race to beat the clock, so there are a few things that could have been written better. Overall I’m glad you found this humorous :)
February 28th, 2007 at 8:49 am
Here’s my form…can’t figure out where I went wrong.
http://jenjason.com/ajax-contact/form_ss.gif
Error I received:
Parse error: syntax error, unexpected $end in C:\Program Files\xampp\htdocs\ajax-contact\index.php on line 63
February 28th, 2007 at 10:15 am
//self fixed ;)
forgot to close the bracket after die();
good screencast…Wok
February 28th, 2007 at 2:30 pm
And thus we have the fourth blog entry on Dustin’s blog concerning an Ajax contact form… http://www.dustindiaz.com/?s=ajax+contact
I like Ajax too, but gall dang, do somthin’ different!
February 28th, 2007 at 4:46 pm
Thanks for the second one long long time not heard.
March 1st, 2007 at 3:33 am
Cool.
I liked the way you still give hat-tilt or two to the audience with temporary “AAAAGGHH” comments and such. Sweet.
I’ve fallen into the same double-quote / single-quote pattern with PHP myself, but I’m switching to use (s?)printf instead of string concatenation to cut-down the number of times I write ‘foo\n’ instead of “foo\n”.
Oh, and is that TextMate? I’m not familiar with it - but surely it has a keyboard shortcut so you can avoid typing loadContactFormThing twice? (i.e. type ‘loa’ and hit some keyboard command…?) That could help shave a minute or two off your typing time… ;-)
March 1st, 2007 at 12:27 pm
Shhh! = Don’t let my clients know that a form can be wacked together in 15 minutes .. I’ve worked hard to create a mystique around them .. “Oh, you need a form? - Very complicated .. will take hours .. will cost great money” .. Then I sit down for 30 minutes and do their form, 15 minutes of which is devoted to gnarly issues like double/single quotes .. forms, I love’em
March 1st, 2007 at 5:18 pm
As always, terrific. It is a pleasure watching and learning from you.
Ps. Coming to Dallas SAT / SUN for business meeting with clients. We’d be glad to buy you a few beers. Kickin’ it at the Wingate. Let me know if you’d like to meet the team.
March 2nd, 2007 at 10:18 am
Per usual - great stuff Dustin. Thanks for sharing - I was sweatin’ the clock with you!
If you’re up to taking requests, I’d love to see you play around with the new Yahoo history object — I’m totally excited about it, but intimidated, I need a little Dustin Diaz ninja demo screencast magic to take the edge off :)
March 3rd, 2007 at 7:40 pm
Fantastic screen cast! :)
More than anything I have learnt that you too, are also only human, and there is still hope for people such as I who make the same simple mistakes. Some great music. Perhaps you should start streaming your own Web radio station? I was sad that there was no Good Charlotte in your play list, but hey, you can’t listen to much in 15 minutes. Hehe.
I felt the adrenaline flowing also. A bit like when good guy has about 5 seconds left to defuse a bomb using nothing but a toothpick and a bit of fluff from the bottom of his pocket. Thanks for that, man. :D
March 5th, 2007 at 1:44 pm
[…] Inspired by Dustin Diaz’s AJAX screencast, I thought it was time I made a little more use of iShowU and show how easy, and quick it can be to pile on some AJAX calories to pretty much any form. […]
March 6th, 2007 at 12:25 pm
Yeah, great video. It was really fun to see how you code. Where is the next screen cast? I can’t wait to see it.
March 7th, 2007 at 8:33 am
Really enjoyed all your screen casts and found them incredibly helpful trying to get going with using YUI and YUI-Ext.
Is it possible to see the finished code separate to the screen cast so that when replaying & reviewing the screen casts you can see the whole code etc.. I think I’ve seen this mentioned before on the site but I can’t find it now.
Great. Many thanks
March 8th, 2007 at 11:11 am
Finally got to watching this Dustin, good stuff. I had a great laugh at the misplaced period and quote in that message variable (if only that silly keyboard would have put them in the correct order, exactly as you intended instead of doing it’s own thing) ;)
Looking forward to meeting up with you this weekend. :)
March 9th, 2007 at 4:47 pm
Nice! I like the CC option best - never seen it before while it is so ‘obvious’ - in the script I use, the email is automatically sent to both webmaster and visitor - in the visito’s email you can put all kind of additional info.
However, I get spammed now, have to find something else, looked into Captcha, can’t get it to work.
Any change you integrate it? Would make it the perfect script, I would think :-)
Thanks!
March 12th, 2007 at 8:49 pm
Apparently Kurt Cobain was a YUI implementer from way back
April 5th, 2007 at 9:28 am
Dustin,
There is bug in line 13.
Amusing screencast though ;)
Tim
April 11th, 2007 at 8:06 am
Beautiful screencast :)
Lordmarin
April 17th, 2007 at 3:41 pm
Great screencast! It always takes me a while to get around to watching them, but this was short and sweet, and I’m glad I ended up watching it.
best screnecast eva!!!1
May 2nd, 2007 at 10:57 am
Great screencast, thanks.
June 2nd, 2007 at 1:05 pm
Hi.. greetings form Mexico!
I was sent to your faboulus screen casts, as I’m so newbie, that’s pathetic… any way.. I was trying to see the casts on Vista, but they flash the whole movie, and after some minutes i keep seeing stars and pink elephants flying… The Divx site states it’s codec is no vista compatible… menawhile, I’ll download the cast so I can see with quicktime…. anyway… thanks a lot for support us faint of heart…
P.S. I propose there should be a category on the left column of developer.yahoo.com/yui for newbies… I took me 2 days to find your great page. It would be a good evangelisation option for yahoo!… Thanks a lot.
June 5th, 2007 at 3:07 pm
i don’t know how noone noticed but the last email you got to your gmail in the screencast is not the last email you sent on the form.
in the last try you had the message body was something like “c’mon man” and the email you actually recived was something like “hello there dude”.
sorry to be a downer about it… i bet you did get that email after you finished the recording the screencast.
July 21st, 2007 at 8:04 am
if you look closely he presses the submit button before he deletes the content of the form from the last message… he receives the same message twice. and as you say he probably received the last one after the screen cast ended…
Informative … i like it …