Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4
Sign in to follow this  
Kirk

How to change the Form Submit button color?

Question

15 answers to this question

Recommended Posts

  • 4

Change the CSS for the button in custom CSS:


.form-wrapper input[type="submit"] {
 display: block;
 background: #aaa;
 color: #aaa;
 border: none;
 padding: 10px 20px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 cursor: pointer;
}

Edited by opo

Share this post


Link to post
  • 1

Thank you! That definitely did it. I also needed to change the color of the button on hover, but I figured it out. For those that may see this later, here is the code I used to change the hover color:

.form-wrapper input[type=submit]:hover { background: #ffffb3; }

Thanks opo!

Share this post


Link to post
  • 0

I might be doing something wrong but I am copying the code above and pasting it in the custom CSS section. The color I want for my submit button is #0dd39d


.form-wrapper input[type="submit"] {
 display: block;
 background: #0dd39d;
 color: #0dd39d;
 border: none;
 padding: 10px 20px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 cursor: pointer;
}

What am I doing wrong?

Edited by mareitor

Share this post


Link to post
  • 0

You may not be doing anything wrong. It could be a Squarespace issue.

I've used the same code to change the color of the submit button on my site and it has worked properly for two months - until today.

Share this post


Link to post
  • 0

Thanks Dennis!Adding this .sqs-block.form-block didnt work :(sqs is not really helping on this specific issue and I am not sure what to do next!Anyone else with some knowledge on CSS that can help me ?tnx in advance

Share this post


Link to post
  • 0

Yellow submit button:


.sqs-block.form-block .form-wrapper input[type=submit], 
.sqs-lightbox.form-lightbox
.form-wrapper input[type=submit] {
 display: block; background-color:#ffffb3; 
}

Edited by opo

Share this post


Link to post
  • 0

@Timo, here is what worked for me, this changes the color of the lightbox button and also on hover:


.sqs-block-content .lightbox-handle {
 color: #FFF;
 font-weight: 400;
 background: #0099FF;
}

.sqs-block-content .lightbox-handle:hover {
 color: #000;
 font-weight: 400;
 background: #0066FF;
}

For those unfamiliar with the lightbox mode for forms, this option is under the Advanced tab in Forms and works well for longer forms.

Edited by KateS

Share this post


Link to post
  • 0

thanks for this, very useful. This is possible for all the buttons on the site actually, using different CSS. It's good to create your own styling here as the buttons are on key styling element that says 'Squarespace' along with the social icons and 'love heart' button on the blog posts.

Share this post


Link to post
  • 0

thanks for this, very useful. This is possible for all the buttons on the site actually, using different CSS. It's good to create your own styling here as the buttons are on key styling element that says 'Squarespace' along with the social icons and 'love heart' button on the blog posts.

Share this post


Link to post
  • 0
Posted (edited)

Hi @Kirk, I made a video tutorial for you on how to Change Form Submit Button Color on Squarespace Tutorial. Hope this helps! https://www.askquesty.com/post/change-form-submit-button-color-squarespace

Edited by AskQuesty
Initial Revision

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...