How to customize contact us page?

[Motoblox]

My contact us page looks like this right now-

Is it possible to add a container to the page like this example-

[Moeed]

Hey @Motoblox 

Your store is password protected, can you share the password as well?

Best Regards,

Moeed

[Motoblox]

Have removed

[Moeed · Accepted solution]

Hey @Motoblox 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
form#ContactForm textarea {
    background: #F2F2F2 !important;
}
form#ContactForm {
    background: #F2F2F2 !important;
    padding: 35px !important;
    border-radius: 20px !important;
}
form#ContactForm input {
    background: #F2F2F2 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Motoblox]

Thanks a ton Moeed,

This is working but is it possible to round the corners of name,email,phone number and comment boxes.

Also bringing the send button in the bottom middle and change it's text to send message instead

[ZestardTech]

Hello @Motoblox 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.contact .field::after {
border-radius: 10px!important;
}
.contact .field::before {
border-radius: 10px!important;
}
.contact__button {
text-align: center;
}

[Motoblox]

thanks a ton appreciate you

[ZestardTech]

Hello @Motoblox 
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful then please Like and Accept Solution.

[Motoblox]

is it possible to change the text on send button?

[ZestardTech]

Hello @Motoblox 

Yes, it is possible to change the text on the "Send" button on the Shopify contact page. Here's how you can do it:

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Navigate to locales > en.default.json, search for "contact," and update the "Send" text as needed.
   
   

This method ensures the button text changes without altering the actual HTML code.

Screenshot: https://prnt.sc/kg8n7_pyn7qD

[Motoblox]

Thanks a ton, appreciate you