How to enlarge the message area?

  • Resolved jonathgreen

    (@jonathgreen)


    7 years, 5 months ago

    Hi!

    I’d like to know how to enlarge the message area?
    It’s currently only a 1 line zone

    I tried several things and read on the website but didn’t find how to do it only for that area (not the other one).

    Thanks a lot

    Best regards.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Neil Murray

    (@buzztone)

    7 years, 5 months ago

    This is likely due to styling included in your current WP theme or one of the plugins you are using.

    See Styling Contact Form – there is a link to an article I wrote at the bottom of that page (which is recommended by the CF7 plugin author, though I’m not allowed to link directly to it here), that covers this topic in detail.

    Abbreviated Version

    1. You need basic HTML & CSS skills
    2. You need to know how to use Chrome Dev Tools or equivalent
    3. Use Dev Tools to examine the CSS styling applied to your form in detail
    4. Determine what CSS changes you need to make
    5. Add custom CSS via WP Customizer > Custom CSS, custom CSS plugin or child theme.
    mwarbinek

    (@mwarbinek)

    7 years, 5 months ago

    Message area is also called “textarea”, which is the name of the HTML tag and is important to know for the info below.

    Before adding any Custom CSS, check your plugins that have any impact to a Contact form “textarea”. Deactivate any suspected plugin (that is other than Contact Form 7) and test the page. If the textarea height changes, that was the other plugin affecting it. If a plugin, maybe it offers settings for the textarea.

    No plugin causing this? – Check the theme settings in the Customizer and see of the theme also provides an “Options” feature which is usually under “Appearance” in the Admin menu. It may have settings that impact a “textarea” for a contact form.

    No settings in the theme? – now…

    Go to Appearances > Customizer > Custom CSS (or Additional CSS) and add the following Custom CSS,

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

    Click Publish.

    Reload the page and check the result. If the CSS above had no affect, add “!important” to it as follows,

    height: 240px !important;

    (Note: change the px height value to what you want).

    • This reply was modified 7 years, 5 months ago by mwarbinek. Reason: added info
    Thread Starter jonathgreen

    (@jonathgreen)

    7 years, 5 months ago

    Thanks a lot for your answers!
    I directly added the code in the Custom CSS section on WP. And at last the message area has the size i wanted.

    Thanks again for your time and help!:)

    mwarbinek

    (@mwarbinek)

    7 years, 5 months ago

    Your welcome 🙂

    Just remember, Custom CSS is basically the last step to take, only if the theme or plugin or both, fail to provide any options that affect the contact form styling, or do not show (by their own options) what has affected the contact form.

    I say this because later on, when trying to change options/settings for the theme or plugin and find things are not working they way they should, then the Custom CSS would likely be the cause.

    Essentially, do not use Custom CSS for any styling (size, color, width, height, positioning, etc) that the theme and/or plugin options already provide.

    • This reply was modified 7 years, 5 months ago by mwarbinek. Reason: added info
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to enlarge the message area?’ is closed to new replies.