Grow your CSS skills. Land your dream job.

Styling a contact form – not quite right.

  • cjk
    # January 27, 2010 at 7:40 pm

    Hi there.

    So, I finally got around to designing my wife’s website, it’s pretty simple and you can see it here http://www.dustydollar.com. She wanted a contact form for people to send email to, but doesn’t want all the spam that comes with an email address on the page. The contact page currently has a simple form but of course her email address can be spidered out of the source so we are looking at other solutions. Chris Coyier has posted a nice form in the downloads area of this site that sends to a "contactengine.php" file, validates using js and then redirects to a thank you page. I thought I would take a shot at reskinning it to suit our site style, and for the most part I have been successful. Yay! This form is here http://www.dustydollar.com/contact2.html. The only issue that I can’t figure out how to solve is an error label on the message textarea box. The label gets placed to the right and above of the form div. The error label pops up if you don’t type anything in the inputs or textareas and I believe the js controls that? But shouldn’t the styling control where that error class displays?

    Chris?

    Chris!
    Ps love your book btw!

    Anyone have an idea where I went wrong? Been scratching my head for two days.

    # January 28, 2010 at 3:03 am

    You can style it in the css with the "label.error" property.

    # January 28, 2010 at 12:38 pm

    IN NO WAY do I want to be discouraging, but I think for simple forms, rock out Wufoo http://wufoo.com — it’s spam free, the forms look great (and can be completely customized).

    cjk
    # January 29, 2010 at 8:12 pm

    Wufoo looks cool BUT I have this project done and it functions, there is just that one niggling thing… for the life of me I can’t figure out why that particular label is askew. I think the validate script creates it? I don’t know a thing about javascript…

    Thanks for taking a shot at it though.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".