Contact Form styling

Solved

Contact Form styling

TBS2023
Shopify Partner
173 1 11

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
11 2 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 suggestions helpful, please consider giving them a like or marking them 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. Don't hesitate to reach out!
https://viralmint.in/viralmint-shopify-community/


View solution in original post

Replies 2 (2)

VIEKIN
Shopify Partner
775 93 110

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

Viralmint
Shopify Partner
11 2 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 suggestions helpful, please consider giving them a like or marking them 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. Don't hesitate to reach out!
https://viralmint.in/viralmint-shopify-community/