Forums

  • # 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 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 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.

    # January 23, 2012 at 2:35 pm

    Interesting. Thanks Kermet.

    div.wpcf7 textarea {
    font-family:Helvetica Neue;
    font-size:14px;
    padding:2px;
    width:366px;
    @media (max-width:200px){ … };
    }

    That’s what I have and it doesn’t seem to be having any effect. Something small I am missing?

    Thanks again!

    # January 23, 2012 at 6:56 pm

    @jeffcampagna Media queries target the resolution of the document. Try increasing the max width to something like 960px.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag