Contact us page design help

[jeffreym]

My contact us page is the 1st image, I would like it to be the same as the second image with a gold button using "D4B61C" and without the phone number option.

Can you help me? 
Thankyou in advanced,

Store: Hygiadental.com
Password: melek

[Moeed · Accepted solution]

Hey @jeffreym 

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 input {
    border: solid 1px black !important;
}
textarea#ContactForm-body {
    border: solid 1px black !important;
}
.contact__button button {
    width: 100% !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Moeed · Accepted solution]

Hey @jeffreym 

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 input {
    border: solid 1px black !important;
}
textarea#ContactForm-body {
    border: solid 1px black !important;
}
.contact__button button {
    width: 100% !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Rahul_dhiman]

Hello @jeffreym 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the end of the file.

.field__input, .customer .field input {
border: 1px solid !important;
}
.button, .shopify-challenge__button, .customer button {
width: 100% !important;
border-radius: 0px !important;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Huptech-Web]

Hello @jeffreym, To achieve an identical design, simply refer to the code provided below and review the screenshot for further guidance.

#ContactForm .contact__fields {
    display: block;
}
#ContactForm .contact__fields .field__input {
    border: 1px solid #dadada;
}
#ContactForm .contact__button .button{
    background: #D4B61C;
    width: 100%;
    color: #fff;
    border-radius: 0 !important;
}

You have the option to eliminate the phone number labeled as input from the code, as well as modify the comment name to message by adjusting the placeholder name as indicated in the screenshot. However, these changes must be made directly in the code.

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[jeffreym]

Okay, I have placed the first code it changed a few things, I do not see a border around the 'comment' box though.
Is there also a way to shorten the width of the entire contact us section on the page, it looks very chunky and not so smooth

Can you help me find the section for removing the phone number, I have searched through the base.css code and cant find that area.
Thankyou brother

[SyedWajahat]

I have pasted below solution to hide Phone Number field. Please check and also here is the css to enable border around the comment box

textarea#ContactForm-body.text-area.field__input {
border: 1px solid #dadada;
}

[SyedWajahat]

Hey Jeffreym, 

I noticed that you have made some modifications through the code. Now you only need to hide the Phone number field, please add the following code to your base.css or theme.css file, or within the style tag where you recently added code

input#ContactForm-phone.field__input {
    display: none;
}
.field__label[for="ContactForm-phone"] {
    display: none;
}

[jeffreym]

So that blanks out the phone number section though it doesn't actually remove it entirely, I can still hover over it and type things in the "invisible box"

[SyedWajahat · Accepted solution]

Everything fine in my case

[jeffreym]

yes this actually did work, just not on the preview page on shopify though when you go to the actual URL it works, I also had to move the code to the start of the 'code section' in the base.css

Thank you for the help man!