WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Text and Textarea: max. width and height in percent? (7 posts)

  1. der-mali
    Member
    Posted 1 year ago #

    Hello there,

    is there a possibility to define the maximum height and especially the maximum width for the fields, let's say in percent?

    My contact form looks fine in the desktop version of my page but the textarea field is too wide for the mobile version.
    Of course I cna limit the width in an absolute number like 40 or 60 but it goes over the right edge of my page.

    Example:
    [textarea your-message 90%x10 "your message here ..."]

    Any ideas?

    Thanks,
    Thomas

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

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    The (cols)x(rows) option only affects the cols= and rows= attribute values of the textarea element. It doesn't mean the width and height length. To specify the width and height length of the textarea, just add a style in the CSS stylesheet in your theme like this:

    .wpcf7 textarea {
        width: 90%;
        height: 10em;
    }
  3. der-mali
    Member
    Posted 1 year ago #

    Hello Takayuki,

    thank you for your answer.
    It works for the "textarea" field but not for "email" and "text":
    text and email still go outside the border on the right side.

    [text* your-name]
    Your Name (required)

    [email* your-email]
    Your Email (required)

    [text* your-phone]
    Your Phone Number (required)

    [text* your-subject]
    Subject (required)

    Your Message (required)
    [textarea* your-message x12]

    [captchac captcha size:l]
    CAPTCHA: Please type the letters above in the box below
    [captchar captcha]

    <p>[submit "Send"]</p>

    .wpcf7 textarea {
    width: 90%;
    height: 20em;
    }

    .wpcf7 text {
    width: 90%;
    height: 1em;
    }

    .wpcf7 email {
    width: 90%;
    height: 1em;
    }

  4. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    The text and email tags of Contact Form 7 are represented as input element of HTML. Correct style is:

    .wpcf7 input[type="text"] {
        width: 90%;
        height: 1em;
    }

    or

    .wpcf7 input.wpcf7-text {
        width: 90%;
        height: 1em;
    }
  5. dakado
    Member
    Posted 1 year ago #

    hi, is there a way to lengthen the [text* your-name] Your Name (required)

    I tried the method above, but will not work on this area, works fine on the textarea part?

  6. RGOnline
    Member
    Posted 7 months ago #

    #LEGENDS!

  7. der-mali
    Member
    Posted 7 months ago #

    #LEGENDS!

    What does it mean?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic