Forum Contest: Design a Contact Form

Which browsers should participants support (or is that being too specific)?

I am gonna win this. Hahaha

http://codepen.io/sekharchittela/pen/nqJio

Here's my entry: Fullscreen & Code.

My entry: http://codepen.io/mintautas/pen/pcivA

This is my entry. First Contact Form ever, took me a lot of hours but i also learned a lot while doing this!. Full Screen and Code

Hello, this is my first post :)

Here's my entry Full Screen & Code

Hello, never had so much fun making a web form. Inspired from TeamTreehouse's colors, here it is. Full: http://cdpn.io/gqKiL Pen: http://codepen.io/AlexKvazos/pen/gqKiL/

Hello, Can I Create A Contact Form Just In Html And CSS.?

This is my entry Fullscreen and Code.

It's my first entry to a forum contest!

Here's a the pen and the Fullscreen : )

Thanks for the fun challenge!

Hey guys, cool challenge.

Here's my fullscreen form

Looking forward to see the winner!

Nice challenge, thanks Treehouse. Here is my entry, it's working (colors are changing) co try it out :) Code: http://cdpn.io/kmgBF Fullscreen: http://codepen.io/d3v3r0/full/kmgBF/

This is my first contest ever! So excited! Here are my Fullscreen and Code :)

I opted for a simple contact form. Here is my entry fullscreen and code

This is my first contest also, media queries included http://codepen.io/dsashun/pen/tEmaK/

Finally my first project! Here's the fullscreen. Tried some media queries also!

This was a fun little project. Here’s my entry: full screen and the code

This was fun, I was just coding my future website and cut out the contact section. Am I glad I decided to do this site in interchangeable, responsive code-blocks:

http://dropixels.eu/treehouse/cform/

here's mine :) :: Full Page and the code

My first ever forum contest..Here is my Fullscreen and Code

error

here is mine :) http://cdpn.io/uzKwJ

Updated entry added a little more styling but I am not design, just floating the concept of the hints at the top. Not even uses full validations here

ok so after fixing my heading here is my fullsize page contact form :) http://codepen.io/justpete/full/JzcdF

My first form: Fullscreen Pen

For some reason, my input fonts aren't right. (Pen newbie here)

ok....hands at work!!

My PEN. I'm going to clean up the code. I know I'm not gonna win I just want criticism lol.

Nick saying "purely design-based" made me neglect anything like accessibility or fear of divitis. I would love to see a forum challenge demanding some kind of accessible rich web app sometime!

However, here you are:

• Full
• Pen Beware of Comments in CSS

People say I have an odd sense of humor. Oh, well, maybe someone else will get a giggle.

Pen & Full Screen

Hope you enjoy the Full Screen & PEN! "She's got them blue jeans!" (Country song going through my head when I saw this contest).....decided to just go with it.

I just signed up for CodePen and wasn't sure how to use it so I just put all my CSS files on top of each other.

Fullscreen: http://codepen.io/ashlynnpai/full/hiLBK

Code: http://codepen.io/ashlynnpai/pen/hiLBK

IP attributions are on the CodePen Details & Comments.

Edited: image seems to be showing properly now

Here's mine! I used Chalker's email validation plugin and Font Awesome to spice it up. Full screen and code

This is mine, hope you like it :) full screen and pen

Yet another entry. Simple one: full screen and some lines

Here's my first-ever contest entry!
My design in full screen. And my work.

I hope my design isn't too "blingy" for this contest. I wanted to make a contact form anyways for the kayaking company that I work for, so this contest is perfect motivation to get a start on it. Healthy criticism wanted-- thanks :)

My entry: Fullscreen & Code

Heres my entry: Code Fullscreen

I had some trouble getting the icons to show before the placeholders. It worked in chrome with the

::-webkit-input-placeholder{padding:20px}

and it succesfully moved the placeholder text over 20px for the icons to fit nicely. The corresponding

::-moz-placeholder{padding: 20px}

did nothing and I went crazy trying to fix it. Ended up settling for just moving the icons to the end of the placeholders.

Any insights on that would be appreciated.

I couldn't figure it out... You could however add a few spaces before your placeholder

placeholder="    Name"

That's all I could come up with

Edit: Was meant to be a reply to Shiraj Ganguly

My entry :D Fullscreen: http://cdpn.io/IlEFr Code: http://codepen.io/jpanter/pen/IlEFr

whoops, delete this

Updated my entry hope you guys like it http://dreamcpu.com/ContactForm.html

Here is my code and this is the full page. I use a small bit of jquery to make the message field interactive

My go at it. Hope ya'll like.

http://codepen.io/NoodlePuter/full/yKiEx

Love how when you watch the videos it seems relatively easy, and when you have a go at it, you wanna split your hairs. None the less great practice. Thanks Treehouse for doing these contest!

nvm

Nice work! This is my first contest to. I created an under-the-ocean form, made some fish in Adobe illustrator and did the validation with jQuery...

fullscreen and the pen

And this is mine ;) C'mon people!!! Enlist!!!! :P Fullscreen and by the way the Pen

Hi, here is my contest entry: Codepen

Hey everybody. So I really wanted to have some fun with this contest since there's already a ton of great developers doing cool contact forms, so probably not much of a chance of me winning. So I created a contact form for my favorite Marvel Superhero's; The X-MEN!!! FYI: Days of Future Past looks soo sick! Definitly did learn a bunch while doing this. Enjoy it. And here's the link to Days of Future Past: https://www.youtube.com/watch?v=gsjtg7m1MMM

http://codepen.io/Petarg/pen/vILhJ

Here's my contribution :-) Wanted to get some kind of Tim Burton vibe to it! Enjoy! And have an awesome day! :-)

Full: http://codepen.io/EmilWallgren/full/hoqbC Code: http://codepen.io/EmilWallgren/pen/hoqbC

I decided to go with the classic form look. Few nice features though: mobile-ready, minimalistic design, and validation. Try submitting it! Full screen and Code.

Hi everybody, Here is my contact form. Hope you love it!

A few minor changes. This isn(n't even) my final form: fullscreen

This form is... nice, nice, baby...

Pen: http://codepen.io/BFrederickson11/pen/mDvGI Fullscreen: http://codepen.io/BFrederickson11/full/mDvGI

Hi Friends, Here is my entry for my first ever contest.Tried to keep it simple.Hope its a good one :-) Full Screen: http://codepen.io/syanshammi/full/uKIye and Code: http://codepen.io/syanshammi/pen/uKIye

Updated my entry hope you guys like it http://dreamcpu.com/ContactForm.html

After a lot of blood sweat and tears ... mostly tears, here's the Fullscreen and Code ... It's a little bit messy but at least its responsive :) *The fonts only work in Chrome for some reason

Lots of fun, learned a lot. Fullscreen and Code

First thing i ever coded all by myself. I know it doesn't stand a chance to all the other fancy designs i've seen, but here it is. :) http://codepen.io/anon/pen/Hjcdf/?editors=110

Its a really simple form.

Full page: http://cdpn.io/uFCzI code: http://codepen.io/elledavid/pen/uFCzI/

I've been busy and don't have time to do this, but one of the cooler site contact form's I've done lately is this one... http://previewhq.com/jeanie/#section-four

Redid mine. Well after long hour's, and many cups of iced tea, I got it to work(with pure css). Fullscreen and the pen. courtesy of the :valid pseudo element. This is my first contest. I realize it would probably be better to make it a visible one but this... this got mo' swag.

I'm a little late to the party but here is my submission Fullscreen and Pen.

I've always seen forms as a bit of a chore and not much of a design challenge so wanted to give something different a try. I've attempted to pull together everything I have learned here, hope you guys enjoy it!

Don't forget to submit a valid form if you need to use the district line ;) please mind the gap!

love it, the background is great!

Here's mine.

My entry http://codepen.io/kyngsteev/full/abyek. Thanks for the opportunity.

Full Page and Code. I made myself chuckle with this one. For some reason firefox won't use the embedded fonts.

http://codepen.io/codepippen/pen/buoEL

My Entry: Full Page and Code. I hope you like it.

Such contact. So form. Very design WOWWW

Here's my go, I like pop-up stuff, so press the button.

full: http://codepen.io/robdoesweb/full/xbueq code: http://codepen.io/robdoesweb/pen/xbueq

Hey there, here's my entry: Pen, Full Page. This is my first time ever :)

Another entry this time with a little design here

Simple and responsive with a couple subtle homages to Treehouse. Code | Fullscreen

This will be my first forum contest entry ever Fullscreen- http://codepen.io/beowulf/full/nACKo Hope you guys like it any constructive feedback will be appreciated thank you.

My fist forum contest. Went with a minimalist flat UI. Lmk what yall think. http://codepen.io/colinbarrettdesign/full/ElpdB/

Hi guys!

This is my first forum contest! :D Here's my entry: Full: http://codepen.io/DenkSchuldt/full/vasDq Code: http://codepen.io/DenkSchuldt/pen/vasDq

Regards! D.

Here is mine,

It is not responsive because I am not up to that bit of the track yet.

http://codepen.io/tomlawrenceuk/full/fpBIy

http://cdpn.io/fpBIy

Hope you like.

Fun contest! Here is my Full Page and Code entry. Cheers!

Love the contest!

Here is my Full Page and Code!

Thanks!

Here's mine: Fullscreen - Code

My first entry to a forum contest! There are a lot of things I want to do with it still, but I wanted to prove to myself that I can actually code something and start using what I've learned on treehouse so far :-) fullscreen and code

Any feedback is more than welcomed!

Hey you guys, I joined Treehouse last week and been enjoying it so far.

Here's my Fullscreen and Code

Here is my entry. Fullscreen and pen.

Hello everyone ! Thanks TreeHouse for that neat little contest, very enjoyable. It's not perfect yet, but I spent way more time than I expected aleady, so here it is: FullScreen / Code

It should be compatible with most modern browsers and screen sizes.

Here is my entry! FullScreen / Code

My entry: Fullscreen and Code

This was a lot of fun. Here are links to the Fullscreen and the Code.

It was also frustratingly challenging for such a "simple" task. If anyone want an education in what they know and what they don't, you still have a few hours.

Here the final product, goes through from research, reference, modifying and design. No matter win or lose, I have learned a lot of things through this forum contest. & appreciate all other participant's design, once you had paid so much effort on your project, you're already is a winner =)! This is the Fullscreen and the code

Here is my entry in Code and Full Page

Thanks Chwan :)

heres the full and heres the code. Its no where near as good as half of the forms on here. But i may as well give it a go :D

Ok here's my shot. Damn form elements are hard to wrangle! full and code

Hey guys. That was a nice project, I'm happy with results. Good luck to everyone.

Here is my entry Code

Hello!

This is the first Forum Contest I've taken part in. What a fun challenge - there are some really incredible entries!

I decided to test out my brand-new adobe illustrator/media query skills on this one too. Here's the code and the fullscreen version.

Here's mine. Spent a few days writing out the php before I realized it was purely a design challenge -__-. Lot's of fun, regardless!

Here's my submission.

My submission

[http://codepen.io/med/pen/IgCHu]

I really have huge doubts about what I built here, there is definitely a room for a lot of improvements...but, how will I improve without participating in such contests, right? here is my participation: http://codepen.io/anon/pen/vHIuc/

Here you go: fullscreen and code

This is actually my first time coding anything original since starting Treehouse. I had a late start on this and it was a bit difficult at first since my original idea required me to know Javascript (which I haven't gone through yet) but I have to say I'm happy with the way it turned out :)

Here's mine. And here's the full page preview. Hope y'all like it. ^^

Here's my go at it. Hope ya like (:

Code & full page view

Wow! I cannot believe how many entries this contest received. You all did an amazing job putting together these great entries. :)

This week's winner is Geert-Jan Hendriks! His contact form is very easy to scan and understand, makes good use of contrast and complementary colors, and has some great illustrations. The animations are also really nice.

This is mostly meant to be a design contest, but I also appreciate that Geert-Jan used the label element for each form field. This is a pretty important feature for accessibility and a lot of forms on the web these days are neglecting to use label elements in favor of the placeholder attribute. The W3C explicitly says "The placeholder attribute should not be used as a replacement for a label."

Congrats to Geert-Jan! Great stuff.

Here's the link to the next forum contest.

Congrats Geert-Jan, love those error octopus!

Congratulations !

Very well done

Congratulations! Your form was amazing!

Congratulations, well designed and executed :)

That was my favorite too!

Thanks everybody! I never expected to win, there where so many great creative contact forms! This is awesome :)

Congrats! ^.^/ Loved your animation and illustrations!

Congratulations!

Nice job, Geert-Jan!

Congratulations! Great form! :-)

Congrates :)