Contact Form styling

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

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.

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;

}

1 Like