How can I adjust the placement and capitalization in a contact form?

Store Design
1

Hello everyone! I am modifying the “contact us” form and I can’t really understand how to edit the placement of the form and its components.

Basically, I just want to center the “Contact Us” text and the “Send” button, which should also be capitalised, e.g. “SEND”.

And the small letter in the “Phone number” really deteriorates the sleek design. I really want to make it look like “Phone Number”.

Screenshot 2022-09-27 at 13.07.05.png
Screenshot 2022-09-27 at 13.07.05.png1772×962 16.1 KB

How can I possibly edit these moments? Thank you very much in advance!!

The website is https://project-avignon.myshopify.com/pages/contact

Password: meolyo.

2

Hello,

Please add this in the base.css for the contact-us and the submit button.

Angel95_1-1664277439851.png

Angel95_0-1664277385999.png

3

Hello.

For the change the font:

Angel95_2-1664277729909.png
Angel95_2-1664277729909.png897×718 95.9 KB

in the base.css file you need all the css so you will get as per your requirement

4

Hello @d_reinicke ,

Add this css at the bottom of file base.css

.contact .title {
    text-align: center;
}
.contact .contact__button {
    text-align: center;
}
.contact .contact__button .button {
    text-transform: uppercase;
}
.contact .field__label {
    text-transform: capitalize;
}

Thanks

5

Thank you very much for your help, guys!

Both solutions are totally valid, though Guleria’s is a bit more ergonomic.