WordPress.org

Forums

Contact Form 7
[resolved] Contact Form 7 text area overlapping text (3 posts)

  1. dgsloves
    Member
    Posted 1 year ago #

    When a user types in the "Your Message" area, the text is cut off at the top and then starts overlapping. How do I set the line height for contact within the text area? Or what else might be the problem?

    Thank you!!

    http://www.baxterbell.com/connect/

    https://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 1 year ago #

    This is due to CSS styling applied to standard HTML form elements within your current WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    In your case the problem is in http://www.baxterbell.com/wp-content/themes/clean-retina-child/style.css

    input[type="text"], input[type="password"], textarea {
        border: 1px solid #CCCCCC;
        line-height: 5px; /* causing the problem */
        margin: 0 0 5px;
        padding: 3px;
        width: 200px;
    }

    ​​​​
    Change this to ​

    input[type="text"], input[type="password"], textarea {
        border: 1px solid #CCCCCC;
    /*    line-height: 5px;   */
        margin: 0 0 5px;
        padding: 3px;
        width: 200px;
    }
  3. dgsloves
    Member
    Posted 1 year ago #

    Worked- (Though I know you meant change to line-height: 20px; or so). Thank you buzztone!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic