How to custom style a button on Contact Us form?

Hi there,

how might I custom style a button on the "contact us" form? at the moment it's picking up global style button colour and size but I want it black background and to stretch across horizontally.

What it looks like now

And what I'd like it to look like

Any tips or guidance will be much appreciated.

Thank you. 

You can add this to Design > Custom CSS

div.form-block input([type="submit"]) {
	background-color: black !important;
	display: flex !important;
	width: 100% !important;
}

If it doesn't work, please share link to page where you use form, we can check easier

I will try that code. THANK YOU!! If it doesn't work, I'll post site and password

@tuanphan it hasn't worked 😞

Here is the link to the site https://butterfly-marigold-4kgd.squarespace.com/config/design

Password is ecsc2023

THANK YOU @tuanphan. It worked 😃

@tuanphan hope you're doing well. I made the website live and this code no longer works. Can you pretty please have another look and tell me what's gone wrong. The URL to the page is now this https://www.ecsc.org.au/contact-us

Just to confirm, I'd like the SEND button to be black, centred and stretch the whole length of the form on desktop and mobile. 

Thanks a million. 

@tuanphan do you also know how I can make the Volunteer button on the home page display the same on mobile view? Currently mobile view is green because that's the default colour of the primary button.

Desktop

Mobile 

Thank you so much

On 10/20/2023 at 6:27 AM, tats_co said:

@tuanphan hope you're doing well. I made the website live and this code no longer works. Can you pretty please have another look and tell me what's gone wrong. The URL to the page is now this https://www.ecsc.org.au/contact-us

Just to confirm, I'd like the SEND button to be black, centred and stretch the whole length of the form on desktop and mobile. 

Thanks a million. 

Use this new code

div.form-block button[type="submit"] {
	background-color: black !important;
	display: flex !important;
	width: 100% !important;
    text-align: center !important;
    align-items: center;
    justify-content: center;
}

On 10/20/2023 at 11:11 AM, tats_co said:

@tuanphan do you also know how I can make the Volunteer button on the home page display the same on mobile view? Currently mobile view is green because that's the default colour of the primary button.

Desktop

Mobile 

Thank you so much

Use this CSS code

div.header-menu-cta a.btn {
    background-color: white !important;
    color: black !important;
}

@tuanphan you are one of a kind!!!

@tuanphan would you happen to know why  I can't style the Google translate? I followed this tutorial https://creativeboss.notion.site/Google-Translate-Styling-a2a03cfa231440bab3d81bd9d9120d7a and got it installed, however the styling on 7.1 doesn't work the way she explains it and the way she coded it. I tried to no avail. Any idea, or suggestion on code edits? I would like to be able to scroll vertically through languages and not have them all available in blue on white horizontal block. It takes too much space on the page. Or if you're aware of the better tutorial, please let me know 🙂

Thanks a million

@tuanphan also when you select another language, Google translate bar covers the menu and its links. Is there any way to code that so it sits above the menu header?

On 10/22/2023 at 7:12 PM, tats_co said:

@tuanphan would you happen to know why  I can't style the Google translate? I followed this tutorial https://creativeboss.notion.site/Google-Translate-Styling-a2a03cfa231440bab3d81bd9d9120d7a and got it installed, however the styling on 7.1 doesn't work the way she explains it and the way she coded it. I tried to no avail. Any idea, or suggestion on code edits? I would like to be able to scroll vertically through languages and not have them all available in blue on white horizontal block. It takes too much space on the page. Or if you're aware of the better tutorial, please let me know 🙂

 

Thanks a million

We can't style it from Squarespace. You try checking to see if Google allows style this from embed code.

On 10/23/2023 at 6:19 AM, tats_co said:

@tuanphan also when you select another language, Google translate bar covers the menu and its links. Is there any way to code that so it sits above the menu header?

We can use code, but will need to disable scroll back header

@tuanphan thank you so much. It will have to stay what it is. I appreciate your time and effort. May I ask if you run your own business building websites and if so, do you have a business website? 

On 10/24/2023 at 7:30 PM, tats_co said:

@tuanphan thank you so much. It will have to stay what it is. I appreciate your time and effort. May I ask if you run your own business building websites and if so, do you have a business website? 

Currently I don't offer any services. Just run a free book library for kids in my country 😄