WordPress.org

Support

Support » Plugins and Hacks » Contact Form 7 » [Resolved] Using TABLE, TR and TD Tags with Contact Form 7

[Resolved] Using TABLE, TR and TD Tags with Contact Form 7

  • So in order to get the EXACT layout I want for my form I am using Tables. Dont flame me, I’m an old-school coder and I prefer the exact abilities of tables in some cases.

    Regardless, I am totally stumpped as to why a <td align=”top”> will not actually align the text to the top of that cell. The cell in question has a textarea so by default Contact Form 7 sets the test to align bottom, for some reason I can not overwrite this. Is it possible it’s my theme that’s forcing this?

    Additionally and more importantly defining the size of my textareas seems to be completly ignored.

    [textarea references 15×3]

    The above does NOT make my box 15×3, it keeps the default size which looks to be something more like 30×12 or so.

    Suggestions on either of my issues?

Viewing 14 replies - 1 through 14 (of 14 total)
  • 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

    thefrinck

    @thefrinck

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

    spencerjw

    @spencerjw

    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.

    thefrinck

    @thefrinck

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

    macadonwon

    @macadonwon

    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.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] Using TABLE, TR and TD Tags with Contact Form 7’ is closed to new replies.
Skip to toolbar