Breaking Up Contact Form Vertically

[jeffcampagna]

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.

[joshuanhibbert]

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.

[jeffcampagna]

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.

[joshuanhibbert]

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.

[Kermet]

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.

[jeffcampagna]

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

[Kermet]

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.

[jeffcampagna]

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.

[jeffcampagna]

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!!!

[jeffcampagna]

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.

[joshuanhibbert]

Hmm, I’m getting a 404 again…

[jeffcampagna]

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.

[Kermet]

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.

[jeffcampagna]

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!

[joshuanhibbert]

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

[Author]

Posts