Forums

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

<table>
<tr>
	 <td>Insert your name</td>
	 <td>[text* myname]</td>
</tr>
</table>

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?:


<div class="col1">
<p>Your Name (required)<br />
    [text* your-name] </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Subject<br />
    [text your-subject] </p></div>

<div class="col2">
<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p></div>

*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 www.CloudPressed.com and click Contact Us

Thanks again!!!

Senff

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;
	 }

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…

Senff

Also add this:

.wpcf7-form table tr {
	 border:0;
	 }

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.

Chadh

I know this thread is a bit old, but I can't find an open thread answering the question I have. I'm hoping someone here can help. We have a few two column contact forms (via CF7) on our site. They look good on the desktop, but it causes text areas to be off the screen on mobile devices. Is there anyway to fix this? The link @kermet provided is way out of my league.

www.creeksidebiblechurch.org

Chadh

Oops,

www.creeksidebiblechurch.org/serve

treehouse : what would you like to learn today?

Forums

Breaking Up Contact Form Vertically