Contact Form 7 CSS on input and checkbox fields

input.wpcf7-text { width: 500px }

like this?

No, doesn’t do anything for me

Contact Form 7 has a default CSS file. Mod it, or also mod it and add that to your theme’s default CSS file and remove the call to the stylesheet in the theme files. There is also a form builder in CF7 where you can call CSS classes if desired…review the plugin author’s FAQ.

Thank you for the well thought out reply, but I’ve already done that to ensure my CSS doesn’t get overwritten when updating. I’m also not having difficulty with CF7 short codes, only the CSS.

If you just take a quick look at my form in Firebug, you should be able to easily see where i may have gone wrong.

GreekStoneStudios.com/contact

Thank you again

And to reiterate, if you look at the check box, you’ll see it’s inheriting the 500 pixel width i set for the input boxes. When i remove the width property, then the checkbox looks fine, but then the rest of the form naturally doesn’t line up.

Did you add this to the form yourself? Or is it included by default?

It’s CSS that i added. And I’ve been trying to correct the checkbox width at the end of my style sheet, but it’s not taking a new width. My lack if CSS keeps me from coming up with a solution, and countless google searches aren’t helping.

So either a new way to set the input box width that doesn’t include the checkboxes, or a method of resizing the checkbox after the fact.

I know the smart thing to do is study CSS, but this is for a holiday ad, and i just don’t have enough time.

You know what, i should have just posted all the CSS i added here. I’m not at my computer tonight, so I’ll post it tomorrow, if you guys would care to check back. Much appreciated.

Okay. In your coding, somewhere along the way, you entered all this:

<span class="check"><span class="wpcf7-form-control-wrap checkbox-73"><span class="wpcf7-checkbox"><span class="wpcf7-list-item"><br> <input type="checkbox" value="Send 25 cards to my address? (add $26.75 + S&H)" name="checkbox-73[]">?<span class="wpcf7-list-item-label">Send 25 cards to my address? (add $26.75 + S&H)</span></span></span></span></span>

You need to change that ENTIRE part, to this:

<span class="check"><input type="checkbox" value="Send 25 cards to my address? (add $26.75 + S&H)" name="checkbox-73[]">?Send 25 cards to my address? (add $26.75 + S&H)</span>

You currently have WAY too many span tags in there. Have you coded this checkbox on the other end so it does it’s job? The name of your checkbox seems rather unusual…

I only added one span class, via the CF7 form editor:

<li><span class="check">[checkbox checkbox-73 "Send 25 cards to my address? (add $26.75 + S&H)"]</span> </li>

Any other span tags are coming from either CF7, or my Weaver theme itself. So I’m not going to edit those two professionally done packages just to eliminate what appears to be, and I’ll agree with you, too many span tags.

So here’s the CSS I added:

#contact{
list-style:none;
}
#contact li .text,#contact li .ta-label{
width:487px;
background: #4b4b4b;
padding:0 10px 0;

position:absolute;
z-index:100;

border-top-right-radius: 5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
#contact li .ta-label{
position:relative;
padding:0 10px 3px;
}
#contact li .plain{
padding:0;
position:absolute;
z-index:100;
}

#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
width: 500px;
z-index:100;
margin:0 0 1px;

border-bottom-right-radius: 5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
}

#contact li .wpcf7-form-control-wrap textarea{
line-height:26px;
height:100px;

border-top-right-radius: 5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}

input.wpcf7-text { width: 10px; }
#contact li .captcha{
max-width:75px;

border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Minus the Submit button styles.
The only thing I’m trying to fix here is the checkbox, which is inheriting my input boxes 500px width, at:

GreekStoneStudios.com/contact

This should be a simple CSS issue, surely someone knows?

You will need to edit the actual code of the plugin, rather than creating a new field.

When you create a new field with CF7, it’s applying the same class to both text boxes AND anything else you add.

Since all inputs in the editor are using the same span class… changing one changes them all.

The only way around it is adding the code to the plugin. You won’t be able to do it from within the CF7 form editor.

Just posting to subscribe in case other brilliant solutions arrive. Running into the same issue.

I can’t be the first person ever to use an input field and a checkbox in the same form using CF7, and changing the size of them independently using CSS. This is such a basic thing, there must be a simple solution