Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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!
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!
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.
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!
My client is using a Emilymakes2.0
My client is using Emilymakes 2.0. Also I did put the textfield on CSS area and nothing changes. Included again the screenshots. 🙂
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!
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!
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!
Yay! It worked! Thank you so much, Phavia for being so helpful! 😃
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024