Using TABLE, TR and TD Tags with Contact Form 7

Ok, please disregard the whole alignment issue, it was my theme overwriting my code, that is now fixed.

However, I am still having the issues with the textarea row/column definitions being ignored. Can that be theme driven too? I can’t imagine it would be.

Ok, please completely disregard this entire thread. My theme CSS was overwriting all my settings for Contact Form 7, all is good with the world once again.

Hey Spencerjw,

I have a question that I am betting you can answer…

I want to have my “label” on the left side and my text field on the right. How can I accomplish this in Contact Form 7?

By default, it looks like:

Name:
Text Field

Phone Number:
Text Field

I want it to look like

Name: Text Field
Phone: Text Field

At the bottom of this, I would have a text area field. So it would be:

Name: Text Field
Phone: Text Field
Comment:
Text Area Spanning with
of the above table

Can this be done? I am sorry of my verbiage/explanation seem simplistic…I know nothing about this stuff. I have researched the <td><tr> stuff…I tried to implement it, but it just spanned across the whole page…I think maybe I should have had
in there somewhere…but I am not sure.

I just used simple table tags for organization via tr’s and td’s.

<table>
	<tr>
		<td width="250" align="right">First Name:</td>
		<td>[text* first-name]</td>
	</tr>
	<tr>
		<td align="right">Last Name:</td>
		<td>[text* last-name]</td>
	</tr>
	<tr>
		<td align="right">Nickname:</td>
		<td>[text* nickname]</td>
	</tr>
	<tr>
		<td align="right">Email address:</td>
		<td>[email* email-address]</td>
	</tr>
	<tr>
		<td align="right">Phone number:</td>
		<td>[text* phone-number]</td>
	</tr>
	<tr>
		<td valign="top" align="right">Nights available:</td>
		<td>[textarea* nights-avail 40x5]</td>
	</tr>
	<tr>
		<td align="right">Age</td>
		<td>[radio age "21+" "Under 21"]</td>
	</tr>
	<tr>
		<td align="right">Do you have a digital camera?</td>
		<td>[radio dig-camera "Yes" "No"]</td>
	</tr>
	<tr>
		<td align="right">Do you have high-speed Internet?</td>
		<td>[radio highspeed-internet "Yes" "No"]</td>
	</tr>
	<tr>
		<td align="right">How did you hear about us?</td>
		<td>[text* hear-about-us]</td>
	</tr>
	<tr>
		<td align="right">Please list two employment references (name, contact info, what you did for them):</td>
		<td>[textarea* references 40x5]</td>
	</tr>
	<tr>
		<td align="right">Tell us about the funniest thing you've seen or heard this week:</td>
		<td>[textarea* funny-this-week 40x5]</td>
	</tr>
	<tr>
		<td align="right">Random Code:</td>
		<td>[captchac captcha_MC size:m]</td>
	</tr>
	<tr>
		<td align="right">Enter Random Code:</td>
		<td>[captchar captcha_MC 8/4]</td>
	<tr>
		<td colspan="2">[submit "Send"]</td>
	</tr>
</table>

Can you give me the site you have this contact form on? I copied and pasted just to see what it looked like. It seems very cramped on my page when I copied and pasted. This could simply be because of the place I am putting it in, but wanted to see how it looked on your site.

Thanks for the response.

Sure thing but the site is not yet live so email me at spencerjw at gmail dot com and I’d be more than happy to send you the URL (just don’t want it plastered all over the WP forums).

@cdspeights: Have you removed the <p> tags from the default form layout?

This works just fine:
Your Email* [email* your-email]
Your Name* [text* your-name]

(instead of:

<p>Your Name</p>
[text* your-name]

)

You know, odly enough, I didn’t even think to try that…I will give it a shot as soon as I get home.

Thanks for the reply!

Chris

@spencerjw – i think i’m having the same issue you did with your theme overwriting the size of your text area. i can’t get mine to change either. can you let me know how you resolved the CSS issue?

It’s been quite a while since I was working on this so I’m not entirely sure what I did to fix it. But, using the Firefox plugin called Firebug you should be able to find out exactly what CSS class is causing your issue and from there you should be able to edit the right part.

If I remember correctly I think my issue was the theme had default styles for the TD tag but since the theme didn’t use a TD anywhere it was running over into my custom tables for the Contact Form. I found those CSS parts for the TD and edited them directly and that fixed it.

@spencerjw. got it. found the conflict. you the man! thanks

How do i get contact form 7 to look like this?

I copied and pasted but it still doesn’t work. Can someone please help me?

thanks

Hi,

I’ve done the same as you did. I’ve added <tr> and <td> tags to the form, but in email it shows [email* your-email] instead of the value of it!!!

thoughts?

Be sure you’re using the right code for thr email part because the * means it’s a required field in the form and shouldn’t be used in the email part. Watch the code generator part and be sure to use the code provided for the email specifically. Also, do not use the table code in the email part as I’m sure most of that would get stripped out.