Forums

[Plugin: Contact Form 7] How do I change width of fields? (10 posts)

  1. jhorac1
    Member
    Posted 3 years ago #

    How do I go about changing the width of the text fields on my page? Do I use CSS or some other code? They are much narrower than I would like. See the page I am concerned about by clicking here.

  2. whooami
    Member
    Posted 3 years ago #

    you use CSS.

    /wp-content/plugins/contact-form-7/stylesheet.css is the file youre concerned with.

  3. jhorac1
    Member
    Posted 3 years ago #

    Thanks for leading me to this file, but what code do I change/add in order to edit the width of my text fields?

  4. muymalestado
    Member
    Posted 3 years ago #

    Another user in the same boat.

    Can I add a query about the difference between Firefox and IE. They do not display the same.

    How does CSS treat these two browsers, and how does one make the required change?

    Thanks.

  5. yaili
    Member
    Posted 3 years ago #

    The text fields created by Contact Form 7 are input tags, so you need to add a new selector to your CSS file in order to edit their width.

    Try adding this line to your CSS:
    input { width: 100px; }

    For example. You can change the width to whatever size you see fit.

    I would also advise you to add a class to check boxes and radio buttons, because these are also input tags but don't require a long with.
    So say in Contact Form 7 you add a class of "checkbox" when using a check box or a radio button. In your style sheet add this selector:

    input.checkbox { width:auto; }

    This will revert the width to its original size: tiny.

    Hope this helps!

  6. rodrigojol
    Member
    Posted 3 years ago #

    hi,
    as you said, i made some modification to stylesheet and get wide input fields,
    input { width: 300px; }
    but what i want to change is the box where you enter the text, and that didn not change...
    why?
    i presume this is not an input tag or what
    can u help me?
    thanks

  7. xleggs
    Member
    Posted 3 years ago #

    I'm in the same boat as rodrigojol. I have mine as a widget, and the width of the widest text field forces my whole right column to be wider.

  8. tjn505
    Member
    Posted 3 years ago #

    go to Plugins -> Editor

    I wanted to change the size of the "body" field so I searched on "rows" and changed the dimensions of the textarea from 10 rows by 40 columns to 6 rows by 60 columns ... note: I had to change these values in two different locations so be sure you search the entire length of the code.

    also be very careful with any changes you make. I would suggest you comment out the copy of the original line.

    HTH,
    Tom

  9. cmburnett
    Member
    Posted 3 years ago #

    This may help some of you. Took it a step further than yaili's post.

    http://wordpress.org/support/topic/273738?replies=0#post-1083246

  10. jmkinzee
    Member
    Posted 2 years ago #

    hi just want to ask,, how can i set my contact info? i min, if someone send me an email den in my contact us page, how will i know if someone emailed me?? can you please help me?

Topic Closed

This topic has been closed to new replies.

About this Topic