Contact Form styling

Solved

Contact Form styling

TBS2023
Shopify Partner
314 1 42

Hello

 

How can i make:

- Add Name and Surname 50% aligned

- Email 100% width

- my Country Code and Telephone number 50% each and aligned ?

 

https://yogaspirit.mu/pages/contact

 

TBS2023_0-1727327865450.png

 

Accepted Solution (1)

Viralmint
Shopify Partner
38 5 3

This is an accepted solution.

Hello @TBS2023 

Please update code in contact form liquid file

Instead of separate two "form-grid" div add one "contact__fields" div

In "contact__fields" div add both fields eg. Phone no & country code

Also on submit button hover button design is messed up

For resolving button hover issue add below code in css file

form#ContactForm button.button:hover {
background: #d9aa4f !important;
 border: unset !important;
}
.contact__button {
margin: 0 auto;
text-align: center;
}

Viralmint_0-1727348869758.pngViralmint_1-1727348903975.png

Viralmint_2-1727349530188.png

 

 

If you find our reply helpful, please hit Like and Mark it as a Solution.


For custom designs and solutions, feel free to contact us. We offer 360-degree services to help scale your e-commerce brand.



Thank You,
ViralMint Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency| Call Us 91 98903 26596
Location: Pune, Maharashtra, India 411045

View solution in original post

Replies 2 (2)

DitalTek
Shopify Partner
891 103 122

To change position of fields you need go to contact section file in Sections folder then find to form code and change customize code here, and finally you need use css to style for those fields.

- You can please Like and Accepted Solution if my suggestion helpful.
- And you want to hire developer Theme or App Shopify => Feel free to send me a DM or contact to us via Email | WhatsApp
- Website: ditaltek.com

Viralmint
Shopify Partner
38 5 3

This is an accepted solution.

Hello @TBS2023 

Please update code in contact form liquid file

Instead of separate two "form-grid" div add one "contact__fields" div

In "contact__fields" div add both fields eg. Phone no & country code

Also on submit button hover button design is messed up

For resolving button hover issue add below code in css file

form#ContactForm button.button:hover {
background: #d9aa4f !important;
 border: unset !important;
}
.contact__button {
margin: 0 auto;
text-align: center;
}

Viralmint_0-1727348869758.pngViralmint_1-1727348903975.png

Viralmint_2-1727349530188.png

 

 

If you find our reply helpful, please hit Like and Mark it as a Solution.


For custom designs and solutions, feel free to contact us. We offer 360-degree services to help scale your e-commerce brand.



Thank You,
ViralMint Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency| Call Us 91 98903 26596
Location: Pune, Maharashtra, India 411045