How can I modify the textarea in a contact form?

[cherryjaneq]

Hello! I would like to ask for help with how to edit the text area in the contact form of my client’s store. My client bought a theme, and I have created a wholesale contact form. I wanted the text area to be like the original contact form but I couldn’t change it. Here are the screenshots.

[DitalTek]

Hi @cherryjaneq ,

I think you should be change the row attribute on Textarea field or you can use style css make width is 100%.

• If the necessary, you can going to code file and customize form, moving the Textarea to single div and style for it.

Thanks!

[cherryjaneq]

Hi! Thanks for the response. I think I tried editing the text area, but it still stays the same. Here is another screenshot of the code. By the way, the Send button was on the right side of the text area. I just put a
so it will be placed under the textbox.

[DitalTek]

@cherryjaneq ,

What the theme you use?

in this case you should be make style for Textarea.

.field textarea{
  width: 100%;
}

You can add that short code at the bottom of section-contact-form.css file.

Thanks!

[cherryjaneq]

My client is using a Emilymakes2.0

[cherryjaneq]

My client is using Emilymakes 2.0. Also I did put the textfield on CSS area and nothing changes. Included again the screenshots.

[DitalTek]

@cherryjaneq ,

Can you give the url of store and point the link to that page, then i will going to and check and provide the solution for you.

Thanks!

[cherryjaneq]

Hello! It still not launched yet because still in the process of developing it. But I’ll give you the url and pw.

https://loula-eve-aromas.myshopify.com/

PW: yeuwea

Thank you so much!

[cherryjaneq]

here is the exact link:

https://loula-eve-aromas.myshopify.com/pages/wholesale

[DitalTek]

Can you please add this short code into at the bottom of /assets/section-contact-form.css file.

.contact__fields .field:nth-child(1){
    grid-area: name;
}
.contact__fields .field:nth-child(2){
    grid-area: email;
}
.contact__fields .field:nth-child(3){
   grid-area: business-name;
}
.contact__fields .field:nth-child(4){
   grid-area: website;
}
.contact__fields .field:nth-child(5){
   grid-area: phone;
}
.contact__fields .field:nth-child(6){
   grid-area: social-media;
}
.contact__fields .field:nth-child(7){
    grid-area: comment;
}
.contact__fields .contact__button{
    grid-area: button;
}
@media screen and (min-width: 750px){
.contact__fields{
  grid-template-areas:
        'name email'
        'business-name website'
        'phone social-media'
        'comment comment'
        'button button';
}
}

Hope can helpful to you!

Thanks!

[cherryjaneq]

Yay! It worked! Thank you so much, Phavia for being so helpful!