Search code examples
htmlcsscontact-form-7

Contact Form 7 Textarea styling


community,

I already searched for a solution to this but I can't find anything that helps me with this issue.

The textarea on my WordPress-Page is always a couple of pixels longer than my other two fields and all I want is for them to be properly aligned.

I attached a screenshot and here is a link - it's the form in the footer area

http://relaunch.lieblingsbilder.net/

Can someone help me? Why is only the textarea not sizing properly?

Contact Form 7 - Textarea

Thank you for your help!

Edit: CF7 Code:

    <label for="" class="">[text* your-name placeholder "Dein Name*"]</label>        <br />
    <br />
    <label for="" class="">[email* your-email placeholder "E-Mail-Adresse*"]</label>        <br />
    <br />
    <label for="your-message" class="">[textarea your-message x4 placeholder "Deine Nachricht"]</label><br />

    <center>[submit "Senden"]</center>
    <div class="indicates-required"><span class="asterisk">*</span> Pflichtfeld</div>

Solution

  • The issue is your cols="40" in your textarea. To override this just put the below css code in your custom css file.

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="password"],
    .wpcf7 textarea {
      width: 100%
    }
    

    I hope this will work