Okay
  Public Ticket #1283038
Contact Form Textarea Size
Closed

Comments

  •  2
    Candice started the conversation

    Hi, I cannot seem to resize the "Message Body" text area box, right now it is the same size as all the other form fields, I'd like this one larger. Below is the code I am using, and attached is a screenshot of the MAIL setup. I've even tried setting up a new form as well working with other Form plugins, but get the same issue with this particular box. 

    Is there a way to remove the underline that appears when you begin typing, or at the very least, how do I get this form to look like yours: http://clapat.ro/themes/california-wordpress/contact/

    Form Code: 

    <div id="contact-formular">

        <span class="wpcf7-form-control-wrap your-name"><textarea placeholder="Full Name" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-name"></textarea><label class="input_label slow"></label></span>

        <span class="wpcf7-form-control-wrap your-email"><textarea placeholder="Your Email" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-email"></textarea><label class="input_label slow"></label></span>

        <span class="wpcf7-form-control-wrap your-subject"><textarea placeholder="Your Subject" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-message"></textarea><label class="input_label slow"></label></span>

        <span class="wpcf7-form-control-wrap your-message"><textarea placeholder="Your Message" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-message"></textarea><label class="input_label slow"></label></span>

                                       

        [submit "Submit"]
    </div>

  •  1,823
    Support replied

    Send us wp admin access in a private comment if possible to inspect the contact form.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Candice replied privately
  •  1,823
    Support replied

    Hello Candice, the odd contact form styles come from a wp-content/uploads/js_composer/custom.css which belongs to visual composer but I don't know how it got there in the first place

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  2
    Candice replied

    Thank you for reseting the form, I also did this last night and it's still not what I'm going for. It does not match your form show here: http://clapat.ro/themes/california-wordpress/contact/

    I would either like the exact form you have on your site -OR- at the very least I would like the "Your Message" text field to have a larger height. 

    As I mentioned in my previous message, I cannot seem to edit the "Your Message" text field anywhere, not with a new Contact 7 form or with any other plugin. I still do not know why this is happening.


  •  2
    Candice replied

    I solved this problem myself, posting to share: 

    Altered the name by adding a "2" inside the contact form on the specific form field I wanted to change:

    .wpcf7-textarea2

    Below is the additional edits I did to get a center look, without those rollovers. 

    FORM FIELDS:

    <span class="wpcf7-form-control-wrap your-name"><textarea placeholder="Full Name" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-name"></textarea><label class="input_label slow"></label></span>

        <span class="wpcf7-form-control-wrap your-email"><textarea placeholder="Your Email" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-email"></textarea><label class="input_label slow"></label></span>

        <span class="wpcf7-form-control-wrap your-subject"><textarea placeholder="Your Subject" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-message"></textarea><label class="input_label slow"></label></span>

    <span class="wpcf7-form-control-wrap your-message"><textarea placeholder="Your Message" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea2 wpcf7-validates-as-required" rows="10" cols="40" name="your-message"></textarea><label class="input_label slow"></label></span>

                                   
        [submit "Submit"]
    </div>



     

    CUSTOM CSS STYLE:

    input[type="text"], input[type="password"], input[type="email"], textarea {
        color: #777;
        font-size: 15px;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        height: 50px;
        padding: 0px 0px 0px 0px;
        width: 100%;
        border-radius: 0px;
        margin-bottom: 0px;
        border: none;
        transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        box-sizing: border-box;
        background-color: transparent;
        outline: none;
        border-bottom: 1px solid #ddd;
    }

    .wpcf7-textarea2 {
    height:350px !important;
    }

    .input_label {
        background-color: #000;
        height: 0;
        left: 0;
        position: absolute;
        top: 49px;
        width: 0;
        -webkit-transition: all 0.0s ease-in-out;
        -moz-transition: all 0.0s ease-in-out;
        -o-transition: all 0.0s ease-in-out;
        -ms-transition: all 0.0s ease-in-out;
        transition: all 0.0s ease-in-out;
    }


  •  1,823
    Support replied

    This is great Candice, appreciate sharing the solution.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy