Solved

how to edit textarea in contact form

cherryjaneq
Excursionist
16 0 7

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. 

The original contact formThe original contact formI made this oneI made this one

Accepted Solution (1)
VIEKIN
Shopify Partner
656 79 93

This is an accepted solution.

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!

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513

View solution in original post

Replies 10 (10)

VIEKIN
Shopify Partner
656 79 93

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!

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
cherryjaneq
Excursionist
16 0 7

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 <br>  so it will be placed under the textbox. Screenshot (1017).png

VIEKIN
Shopify Partner
656 79 93

@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!

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
cherryjaneq
Excursionist
16 0 7

My client is using a Emilymakes2.0

cherryjaneq
Excursionist
16 0 7

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

 

Screenshot (1018).pngScreenshot (1019).png

VIEKIN
Shopify Partner
656 79 93

@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!

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
cherryjaneq
Excursionist
16 0 7

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
Excursionist
16 0 7
VIEKIN
Shopify Partner
656 79 93

This is an accepted solution.

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!

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
cherryjaneq
Excursionist
16 0 7

Yay! It worked! Thank you so much, Phavia for being so helpful! 😃Screenshot (1020).png