WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Resizing Text Box area so that its wider not longer (20 posts)

  1. rkinks35
    Member
    Posted 1 year ago #

    I am having issues figuring out how to Re size the text box wider.. Every time I put a new size in it just gets longer. It would look much better if the area was wider. Any hints would be appreciated. Thanks

    http://wordpress.org/extend/plugins/contact-form-7/

  2. ngoodfellow
    Member
    Posted 1 year ago #

    I would recommend doing this in the css:

    example:

    input[type="text"] {
    height: 30px;
    width: 300px;
    }

  3. rkinks35
    Member
    Posted 1 year ago #

    ngoodfellow.. Would I put it in this file? contact-form-7/modules/textarea.php What do I replace?

  4. ngoodfellow
    Member
    Posted 1 year ago #

    I would put the css at the end of your style.css file

    please include a link to your site and be more specific

  5. steveyoung
    Member
    Posted 1 year ago #

    Having the same issue. Just a simple out of the box form. I added the example above to the css, it does change the size of the text fields. Eg. Name, Email and Subject.

    For others with same issue our theme has a custom.css that overrides the style.css check your theme to see where would be best to add the edit.

    But not the "Your Message" area.

    Using the Generate tag option in the plugin, adding a new Your Message box, no mater the size selected the width of the box never changes, the height does.

  6. steveyoung
    Member
    Posted 1 year ago #

    Just further info, I cam make "textfields" any width with the generator.

    "Textarea" just does not go beyond 200 pixels or so.

  7. rkinks35
    Member
    Posted 1 year ago #

    Hi Steveyoung,

    Thats exactly my issue. I only want to change the "Your Message area" and make it wider. The Generate Tag only works for making it longer. Im not familiar with CSS, I have found the style sheets though.

  8. steveyoung
    Member
    Posted 1 year ago #

    I am continuing to work on it. I will post here if I figure it out. Make sure you put comments in your .css file so you remember what you did. Also if you are working in the source style .css make a backup because when you upgrade it will wipe out what you did.

    Also we have a few techs here that work on the projects. We keep a "Post" (that we never publish) of all the changes we make to any particular site with notes on why. A year later it is hard to remember what you did to "fix that problem" when an upgrade breaks it again.

  9. steveyoung
    Member
    Posted 1 year ago #

    Add the following to your .css file

    /*added to widen contact form 7 text field*/
    textarea {
       height: 30px;
       width: 500px;
    }

    Where "500" is how wide you want "Your Message" field to be.

    The comment is optional, that's the stuff between /* and */

  10. rkinks35
    Member
    Posted 1 year ago #

    Hi Steve, I'm not sure I am copying it into the right area. Is this correct: Apperance: Editor: Style Sheet (Style .CSS) Paste it into that page?

    That's what I did and nothing changed. What am I doing wrong?

  11. tuzlusu
    Member
    Posted 1 year ago #

    paste this to your theme's style.css

    textarea[class*="wpcf7-form-control wpcf7-textarea"] {
    height: 200px;
    width: 280px;
    }

    you can also change class area for
    name:
    [class*="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"]

    email:
    [class*="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"]

    subject:
    [class*="wpcf7-form-control wpcf7-text"]

  12. rkinks35
    Member
    Posted 1 year ago #

    I copied and pasted

    textarea[class*="wpcf7-form-control wpcf7-textarea"] {
    height: 200px;
    width: 280px;
    }

    at bottom of:
    COMMANDER THEME: Stylesheet (style.css)

    With no change, Am I missing something here?

  13. tuzlusu
    Member
    Posted 1 year ago #

    try this one ;)
    .wpcf7-form textarea { height: 200px; max-width: 280px; }

  14. tuzlusu
    Member
    Posted 1 year ago #

    lol, the common problem is: its too wide, how to reduce size of box? but yours. so you must set the sizes bigger.
    for example:
    height: 500px; max-width: 600px;

    note: if you write here your site url, we can check it for other problems.

  15. rkinks35
    Member
    Posted 1 year ago #

    Still no change, Here's my URL http://www.mystepmedia.com/contact-us/

  16. chrisnomad
    Member
    Posted 1 year ago #

    It works as suggested. Paste:
    /*added to widen contact form 7 text field*/
    textarea {
    height: 250px;
    width: 500px;
    }

    to your theme's style.css file

  17. mtraps
    Member
    Posted 1 year ago #

    Finally an answer. Thanks chrisnomad!

  18. kds2by2
    Member
    Posted 11 months ago #

    I am having the same issue as the above. I want to be able to widen all categories. I have tried all of the above suggestions to no avail. Unfortunately I am not that familiar with CSS. I know where to find the CSS Style Sheet by using the Editor under Appearance.

    I have been copying the above suggestions at the very bottom of the CSS Style Sheet. I am using iFeature Pro 5 as my theme and Contact Form 7. Here is the URL link to my Contact / Booking page: http://trials2triumph.org/blog/contact-booking/. Thank you for your assistance!

  19. buzztone
    Member
    Posted 11 months ago #

    @kds2by2 - As per the Forum Welcome, please post your own topic.

    Posting in an existing topic prevents being able to track issues by topic. Added to which, your problem - despite any similarity in symptoms - is likely to be completely different.

  20. MT
    Member
    Posted 10 months ago #

    steveyoung
    and chrisnomad
    thank you for answer to this as I was having same difficulty--wanted to widen just Text Area box

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic