Grow your CSS skills. Land your dream job.

How To: Creating Tumblr Contact Form Using Contact Form 7 for WordPress?

  • # March 11, 2013 at 10:58 am

    I would like to create a contact form that mimics Tumblr’s contact form. For a preview of Tumblr’s contact form, click here.

    So, I know I need an image to create the “piece of mail” effect around the edges with some border-radius added for good measure. Then I need fields for a title, email, name, subject, and details. What I do not know how to do is create the evenly spaced lines while containing all of the information. I suspect it comes down to CSS and line height, but that is just my personal guess. Then I need a scroll bar for the “details” area, a “send” and “nevermind” button, and finally, a button that allows my visitors to attach a file.

    Any suggestions will be greatly appreciated. Thank you in advance!

    # March 11, 2013 at 2:27 pm

    It looks like a pretty standard form on a background, not really seeing what’s so difficult here? Try looking with the Chrome web inspector (right click, inspect element) to see how they’ve done it.

    # March 11, 2013 at 9:57 pm

    Stripes – http://css-tricks.com/uniqlo-stripe-hovers/
    Contact Form – http://contactform7.com/docs/

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

You must be logged in to reply to this topic.

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