contact form field

  • chrissiec


    Hi, I’m having problems trying to expand the message box in my form on my contact us page Have checked different methods but stays as default one line. Can you help please. Website is Thanks


    Kenneth John Odle

    Have checked different methods

    What are these methods? I don’t want to waste my time or yours suggesting something you’ve already tried.

    But first, have you checked the plugin documentation and support channels?



    When using the Firefox feature “Inspect Element” (right click) it changes the box size when editing the following height and width values:

    Element {
    width: 300px;
    height: 300px;

    So I’d say you could add this code to your child theme’s style.css file. Change the sizes to whatever you prefer.




    I’ve tried entering the below within the Contact form 7 plugin area in worpress

    <p>Your Message
    [textarea your-message 300x50] </p>

    and also adding the below to CSS

    .wpcf7 textarea  {
    height: 300px;
    width: 50px;

    but the row length changes but not the height so I only get a single line and would like multiple lines like a box area for people adding a message

    If you visit you can see what I mean



    Did you try the code I posted?



    Yes I entered the code below

    .wpcf7-textarea {
    width: 300px;
    height: 300px;

    but made no difference. The message box will drag out but I want it fixed as a multiple row box. Any help appreciated



    Hi there Chrissie,

    Try putting this into your child theme / custom CSS:

    textarea.wpcf7-form-control.wpcf7-textarea {
    height: 300px;
    width: 300px;}

    Obviously you can change the width / height elements to whatever you need them to be. Just a heads up that you can use Firebug extension for Firefox to isolate elements such as this. If you’re not familiar with how to use Firebug, Josh Lobe has some great tutorials.

    Part One is here, Part Two is here and Part Three is here.

    Hope that helps 🙂




    Kenneth John Odle



    Put code in between backtick (


    ) characters. It’s usually located above the Tab key on your keyboard. Or use the “code” button.

    Does the plugin have a setting for cols? Which plugin are you using, and again, have you checked the plugin documentation?

    Try switching to the default 2014 theme. If the problem still exists, this is a plugin issue, not a Graphene issue.



    I checked the 2014 theme and it was ok in that theme but not in graphene but I’ve changed to the code Sharon supplied and that seems to have done the trick, thanks for your help, really grateful


    Kenneth John Odle


    Marking thread as resolved. You can do this yourself as well.

Viewing 10 posts - 1 through 10 (of 10 total)

  • You must be logged in to reply to this topic.