Grow your CSS skills. Land your dream job.

Breaking Up Contact Form Vertically

  • # January 21, 2012 at 10:23 pm

    Hey Folks. Had such a great experience on these forums a little while ago, I thought I would come back with another CSS issue that has me stumped.

    I am using Contact Form 7 on a WP site and I want the contact form to have a two columned appearance.

    IE:
    Normal:
    Name
    Email
    Subject
    Message
    Submit

    I want:
    Name Message Text Area
    Email Message Text Area
    Subject Message Text Area
    Submit

    Check out http://www.CloudPressed.com and click the Contact Us link and you’ll see what I mean.

    Thanks in advance for anyone’s help.

    # January 21, 2012 at 10:42 pm

    I’m getting a 404 error when attempting to view the site mate.

    From memory, Contact Form 7 allows you to go into the settings and insert custom markup. So you would just need to wrap the inputs in two divs and then style them into columns using CSS.

    # January 21, 2012 at 11:31 pm

    404’s eh? that’s strange. the URL is working for me. hmmm… I will play around with you idea, though it may be somewhat over my head. the CSS side of the plugin makes total sense to me, but the PHP side is a bit messy.

    # January 22, 2012 at 1:37 am

    Link is working for me now.

    You shouldn’t have to touch the PHP side of it at all. In the WordPress admin, go to the contact form’s settings, remove the default line breaks that are present, and then make sure to override the 100% width of the inputs in your CSS.

    With all that being said, forms following your current setup are actually better for readability. Our eyes can naturally scroll down the form without having to also scan left and right.

    # January 22, 2012 at 9:04 am

    That’s a common request from our clients on WP via CF7.
    I usually embed everything into this kind of structrure:






    Insert your name [text* myname]

    Not the best looking solution, but it works.

    # January 22, 2012 at 9:22 am

    Ahh. I see what you mean, Josh. Add the divs right in the CF7 admin panel code. Makes sense. Something like this?:



    Your Name (required)

    [text* your-name]



    Your Email (required)

    [email* your-email]



    Subject

    [text your-subject]




    Your Message

    [textarea your-message]



    [submit "Send"]

    *and I totally agree with you about reading downwards and not across. But on smaller screens (like my 13″ mac book pro) the top of the contact form gets cut off in the popup.

    Thanks again for the help

    # January 22, 2012 at 9:24 am

    I can’t see the whole code you posted, you should be embedding it into code tags.
    Anyway that’s the idea, you put the table tags directly into CF7 textarea defining your form.
    You can put there ids and classes aswell, for styling.

    # January 22, 2012 at 9:30 am

    Thanks Kermet. Yeah, I just fixed the code tags a few seconds ago. Sorry about that. Your table structure might be the way to go. I’ll try it out a see if I need some CSS guidance.

    # January 22, 2012 at 1:17 pm

    Hey Kermet, Hey Joshua
    So, I have made great progress. It’s very close. However, there are two outstanding things that are bothering me.

    1. the elusive 1px border around my whole form
    2. the extra padding above the 1st column (name, email etc…)

    Any chance you two have any advice? I tried isolating some stuff with Firebug, but to avail.

    Again, just go to http://www.CloudPressed.com and click Contact Us

    Thanks again!!!

    # January 22, 2012 at 2:59 pm

    Not a fan of using tables for this, but right, if it works for you, then great. :)

    The border around is because you have this in your code:

    table {
    border: 1px solid #CCC;
    border-width: 1px;
    line-height: 18px;
    margin: 0 0 22px 0;
    text-align: left;
    padding: 0 5px;
    }

    Make sure the border is set to 0 and it should disappear (if you want to keep borders around other tables, add this to your CSS:

    .wpcf7-form table {
    border:0;
    }

    Then to get rid of the top padding in the left column, also add this:

    .wpcf7-form table td {
    vertical-align: top;
    }
    # January 22, 2012 at 3:30 pm

    WOW. Senff, you’re brilliant.

    What would rookies do without all you amazing coders. That did the trick 99%. I am still getting a border on the bottom of my form it looks like though.

    No biggie, but if you have any ideas, I’m all ears.

    # January 22, 2012 at 7:28 pm

    Hmm, I’m getting a 404 again…

    # January 22, 2012 at 7:52 pm

    Also add this:

    .wpcf7-form table tr {
    border:0;
    }
    # January 23, 2012 at 9:43 am

    Amazing. Thank you so much!
    Is there any way to add specific tablet code to CSS? When I view the contact form on my iPad, the Message text area is too wide and gets cut off on the right side.

    # January 23, 2012 at 10:42 am

    Media queries allows you to do that directly into the CSS

    http://www.w3.org/TR/css3-mediaqueries/

    Short answer: you can with something like @media (max-width:500px) { … }, adjust the pixel width for your needs.
    This doesn’t target exactly the iPad, but it targets screens resolutions.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

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