WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7 CSS on input and checkbox fields (18 posts)

  1. Gabriel
    Member
    Posted 2 years ago #

    I'm entering the width of my input fields using:

    #contact li .wpcf7-form-control-wrap input

    But this is also resizing the checkbox I'm using in this form in a bad way:

    greekstonestudios.com/contact

    How do I either set the width to my input fields without affecting the checkbox, or better yet, just correct the checkbox width?

    I'm not a CSS guru, so I've been wasting entirely too much time getting this form this far already, this is my last step, thanks!

  2. Takayuki Miyoshi
    Member
    Posted 2 years ago #

    input.wpcf7-text { width: 500px }

    like this?

  3. Gabriel
    Member
    Posted 2 years ago #

    No, doesn't do anything for me

  4. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    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.

  5. Gabriel
    Member
    Posted 2 years ago #

    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

  6. Gabriel
    Member
    Posted 2 years ago #

    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.

  7. Josh (WP Edit)
    Volunteer Moderator
    Posted 2 years ago #

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

  8. Gabriel
    Member
    Posted 2 years ago #

    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.

  9. Gabriel
    Member
    Posted 2 years ago #

    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.

  10. Josh (WP Edit)
    Volunteer Moderator
    Posted 2 years ago #

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

  11. Gabriel
    Member
    Posted 2 years ago #

    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.

  12. Gabriel
    Member
    Posted 2 years ago #

    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

  13. Gabriel
    Member
    Posted 2 years ago #

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

  14. Josh (WP Edit)
    Volunteer Moderator
    Posted 2 years ago #

    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.

  15. sheclimber
    Member
    Posted 2 years ago #

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

  16. Gabriel
    Member
    Posted 2 years ago #

    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

  17. bazish
    Member
    Posted 1 year ago #

    Well, not sure i should add comments here to the 7months old topic, but i just face the same issue while styling contactform7 to match wordpress theme style, i declare width for the input fields in my css to 350px, and i wanted my phone field to be 200px and i can't get it done, i just removed the css in my style file, and declare size and maxlength in Contactform's form generation field as read on contactform site, and it works smoothly as i wanted, still have my own style to the input fields and control the widths of the input fileds as i wanted.

  18. multicelldesign
    Member
    Posted 1 year ago #

    Hi,

    You might need to play around with getting the final specificity correct but another CSS selector you might try instead of extraneous markup etc would be input[type="checkbox"].

    http://www.quirksmode.org/css/selector_attributeAdvanced.html

    Hope this helps, Karl

Topic Closed

This topic has been closed to new replies.

About this Topic