Changing color of Submit button

SOLVE
stefbecker
Member

Hello,

 

I am trying to change the color of the submit button on my embedded form on an external page. I know I have to edit the CSS, but I cannot figure out how to do so.

 

I have already read Hubspot's resources but I am looking for someone to simplify everything that I have read as I am still having trouble. If you can help, thank you!!

 

0 Upvotes
1 Accepted solution

Accepted Solutions
shearn
Solution
Key Advisor

Do you know what the name of the CMS is that you're using to host your website?

 

Unfortunately, you're going to have to get into the site or the specific page to edit the .css file, as you already know. If you know the name of your CMS but aren't sure where to find the file, I can try and track it down for you. Also, if you don't know the .css file, you can direct message me or post the link to the page with your form on it and I can get it for you.

 

If you want to try and find it yourself (This might not help simplify things and I apologize if I just confuse you even more!), here's how you can find it (using Chrome).

 

Step 1: Hover over your form submit button, right click and choose 'Inspect'.

 

Inspect.png

 

Step 2: This will open a window with a whole bunch of fun stuff - you can ignore pretty much all of it, but you should see a highlighted piece of code that will be the HTML for your forms submit button. The important piece to find is the input type="submit" and/or class="hs-button". If you can't find it try pressing CTRL + F and typing in either.

 

Capture.PNG

 

Step 3: Next to the fun screen with all the HTML with your highlighted piece of code will be another fun screen with more fun stuff. This is where you'll find the .css file you'll need to edit. I have highlighted the important bits and circled where the name of the .css file that you need to find and edit in your CMS. As you can see the name of my .css file is custom.css: 279. The 279 in the .css name represents the line number in the file where the button located is so you can easily find it.

 

Capture.PNG

Side note: you can see the colours that I currently have for our button (#e05b63) in with the background and background-colour elements - you can click on the little colour block and change the colour so you can see how it looks on your website.

Side note 2: you'll notice I have the :hov bit highlighted as well, this is the colour of the button when you mouse or hover over it. So if you click on the :hov you can see your own hover colour if you have one (If not, just ignore this note).

Capture.PNG

 

Step 4: Hopefully at this stage, I haven't lost you! This is where you will have to find the .css file that you've just found in your CMS. Again, you will need to know where files are stored in your CMS.  You may have already seen this article: https://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-change-the-color-of-a-form-submit-... but you will need to follow it in order to change the colour. I would recommend going with this method:

Capture.PNG

 

Again, if you want me to get the .css file name for you, either just post the link to the landing page here or direct message it to me.

 

Best of luck!

Did my post help answer your query? Help the Community by marking it as a solution.

View solution in original post

1 Reply 1
shearn
Solution
Key Advisor

Do you know what the name of the CMS is that you're using to host your website?

 

Unfortunately, you're going to have to get into the site or the specific page to edit the .css file, as you already know. If you know the name of your CMS but aren't sure where to find the file, I can try and track it down for you. Also, if you don't know the .css file, you can direct message me or post the link to the page with your form on it and I can get it for you.

 

If you want to try and find it yourself (This might not help simplify things and I apologize if I just confuse you even more!), here's how you can find it (using Chrome).

 

Step 1: Hover over your form submit button, right click and choose 'Inspect'.

 

Inspect.png

 

Step 2: This will open a window with a whole bunch of fun stuff - you can ignore pretty much all of it, but you should see a highlighted piece of code that will be the HTML for your forms submit button. The important piece to find is the input type="submit" and/or class="hs-button". If you can't find it try pressing CTRL + F and typing in either.

 

Capture.PNG

 

Step 3: Next to the fun screen with all the HTML with your highlighted piece of code will be another fun screen with more fun stuff. This is where you'll find the .css file you'll need to edit. I have highlighted the important bits and circled where the name of the .css file that you need to find and edit in your CMS. As you can see the name of my .css file is custom.css: 279. The 279 in the .css name represents the line number in the file where the button located is so you can easily find it.

 

Capture.PNG

Side note: you can see the colours that I currently have for our button (#e05b63) in with the background and background-colour elements - you can click on the little colour block and change the colour so you can see how it looks on your website.

Side note 2: you'll notice I have the :hov bit highlighted as well, this is the colour of the button when you mouse or hover over it. So if you click on the :hov you can see your own hover colour if you have one (If not, just ignore this note).

Capture.PNG

 

Step 4: Hopefully at this stage, I haven't lost you! This is where you will have to find the .css file that you've just found in your CMS. Again, you will need to know where files are stored in your CMS.  You may have already seen this article: https://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-change-the-color-of-a-form-submit-... but you will need to follow it in order to change the colour. I would recommend going with this method:

Capture.PNG

 

Again, if you want me to get the .css file name for you, either just post the link to the landing page here or direct message it to me.

 

Best of luck!

Did my post help answer your query? Help the Community by marking it as a solution.

View solution in original post