The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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 –
    Contact Form –

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed