PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

textarea column size

  1. edmire

    Is there anyway to change the default col size of <textarea>? It would appear that it's always set to 50.

    Posted 12 years ago on Wednesday April 6, 2011 | Permalink
  2. You can use CSS and target textareas on the form (or a specific field) and set the size to whatever you want using CSS.

    Documentation with examples on how to target and style specific form elements can be found here:

    An example of targeting a textarea and styling it would be:

    body .gform_wrapper .gform_body .gform_fields .gfield textarea {width: 150px; height: 150px;}

    That would set the height and width of textareas to 150x150. Note when using CSS you don't use col sizes, you give it a set height and width.

    You would add custom CSS to your themes stylesheet to target and style the selected form element.

    Posted 12 years ago on Wednesday April 6, 2011 | Permalink
  3. Mark R

    The code worked for me, but I would like for it to affect only one form, not all. Multiple attempts at getting the syntax correct resulted only in epic failure on my part. Can you suggest the correct code to limit this width change to the form with ID=2?

    What I found elsewhere did not work for me....including the CSS Targeting Samples link....


    Posted 12 years ago on Friday June 3, 2011 | Permalink
  4. [css]
    body #gform_wrapper_2 .gform_body .gform_fields .gfield textarea {
    width: 150px;
    height: 150px

    That should work for form ID #2

    Posted 12 years ago on Friday June 3, 2011 | Permalink
  5. Mark R

    Didn't work for me, Kevin. Dropped a form into an oldschool sidebar (non-widgeted). But as you can see, the sidebar bleeds off the page. What am I missing? URL=

    Update: this worked for me:

    #sidebar .gform_wrapper .gform_body .gform_fields .gfield textarea {
    width: 230px;
    height: 80px;

    Posted 12 years ago on Thursday June 9, 2011 | Permalink
  6. You may have to use the !important declaration. This worked fine in my test.

    body #gform_wrapper_2 .gform_body .gform_fields .gfield textarea {
        background-color: green;
        color: #fff;
        width: 150px!important;
        height: 150px!important;


    Also, since you've added a form in the sidebar outside of the WordPress "Loop" I see the default form styles aren't being loaded so you'll need to manually enqueue those.

    When embedding a form via a function call you must also manually include the necessary Gravity Forms related Javascript and CSS via the built in WordPress enqueue capabilities. Gravity Forms does not include these by default when calling a form via a function call and they are necessary for forms that contain conditional logic or the date picker field.

    We strongly recommend you enqueue the scripts rather than including them as hard-coded calls in your theme. Implementing it this way will insure that Gravity Forms does not include them on the page if they are already present. It is also a good practice to only load these scripts on the front end.

    Gravity Forms 1.5 introduced the gravity_form_enqueue_scripts function which allows you to easily enqueue the necessary Gravity Forms' scripts and styles when manually embedding a form. This is also useful if you are using a GF widget and do not wish for the styles and scripts to be loaded inline.

    You will need to manually enqueue the scripts and CSS by placing a short script block in your theme's functions.php file.

    <?php gravity_form_enqueue_scripts(); ?>

    You can find more information at the URLs below

    Posted 12 years ago on Thursday June 9, 2011 | Permalink