WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Using TABLE, TR and TD Tags with Contact Form 7 (15 posts)

  1. spencerjw
    Member
    Posted 3 years ago #

    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 15x3]

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

    Suggestions on either of my issues?

  2. spencerjw
    Member
    Posted 3 years ago #

    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.

  3. spencerjw
    Member
    Posted 3 years ago #

    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.

  4. cdspeights
    Member
    Posted 3 years ago #

    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.

  5. spencerjw
    Member
    Posted 3 years ago #

    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>
  6. cdspeights
    Member
    Posted 3 years ago #

    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.

  7. spencerjw
    Member
    Posted 3 years ago #

    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).

  8. gillespieza
    Member
    Posted 3 years ago #

    @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]
    )

  9. cdspeights
    Member
    Posted 3 years ago #

    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

  10. thefrinck
    Member
    Posted 3 years ago #

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

  11. spencerjw
    Member
    Posted 3 years ago #

    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.

  12. thefrinck
    Member
    Posted 3 years ago #

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

  13. macadonwon
    Member
    Posted 3 years ago #

  14. afrodit
    Member
    Posted 3 years ago #

    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?

  15. spencerjw
    Member
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic