Radio buttons in Contact form messed up

Hello there,

Sorry for another rookie question, but I can’t quite seem how to get my radio buttons aligned on this contact form: Contact | ActiveState Designs

How might I go abotu doing that? I have pulled in some of the cforms CSS into my style.css so I don’t have to worry when I update cforms plugin.

Thanks,
Lorne

I can’t connect to that site. The connection times out. :frowning:

yup times out

Really?

Can you try it now, cuz it worked at work and now works from home?

Thanks,
Lorne

not only is <label> used improperly I am not seeing a closing </label>

next the input tag isn’t closed properly it should conatin a / just before the ">

<input id=“cf2_field_6-2” class=“cf-box-b” type=“radio” value=" " name=“cf2_field_6 /”>

is the label tag necasary ?whats wrong with

<form>
<input type=“radio” name=“sex” value=“male” /> Male<br />
<input type=“radio” name=“sex” value=“female” /> Female
</form>

My honest opinion:

use

<input type=“radio” name=“valid” value=“value”>Text</input> would be proper

I appreciate your advice an input, but the problem is I didn’t write that code. It’s a plugin from wordpress; cformsII. I am just trying to use what tools I have then correct the css.

Make sense?

Thanks,
Lorne

My choice is contact form 7.

I am not saying your plugin is good or bad, for all I know it could be another plugin or your theme or I could be wrong altogether. But what I am saying is that I tried everything I could and with the form elements not being written correctly I don’t see a way to fix it.

Nested tags are nested tags and they need to be nested properly (see below), I have never seen a form written the way yours is. There are so many classes, that plugin is very poor design, xhtml (what wordpress is) works better with ID’s and element tags.

properly nested tag sample
<form>
<label>
<input>
</input>
</label>
</form>

see the pattern?

If a label is used it still usually closes before the input tag

IE:

<label “all your label stuff”></label>
<input “all your input details”></input>

or

<label “all your stuff” />
<input “all your stuff” />

or
<label “all your label stuff”>
<input “all your input details”></input>
</label>

or even

<label “all your stuff”>
<input “all your stuff” />
</label>

but with the way your code is written I have no idea how to make it display properly, or if it is possible to display correctly.

No, not valid at all. You don’t use a closing </input>. Something like this is better:

<input type="radio" name="email" id="email" value="Email">
<label for="email">Email</label>

@lorne17: The problem with the page is that you have so many classes etc. applying to each input type that it’s hard to target just the radio buttons with those. Basically you want to float them both, remove any spans in them etc. But I’m not sure how the plugin affects that. This is why I hate plugins. In the end, it’s easier to write this stuff cleanly yourself than try to sort out all the mess that automated tools create. :frowning:

Cyber, I appreciate the feedback. I’ll look into the plugin and see what it’s doing. My theme has some CSS elements in the stylesheet that call in cforms stuff. Maybe that’s causing an issue. cforms came built into my themes code, so changing it from that may cause issues. When I find time I’ll fix it in the future. Right now the important part is getting my products up so I can begin marketing.

Ralph, good point, I agree about the plugins, there’s a lot out there that are so messed up. I just didn’t have the time to write out my own theme this time around. Plus I’m not experienced enough to write an ecommerce theme from scratch. I’ll look into not using cforms.

Thanks all,
Lorne

PS-at least now I know it’s not my lack of CSS skills, I just couldn’t figure it out cuz they can’t be fixed at the moment!