Jump to content

How to change the Form Submit button color?

Go to solution Solved by opo,

Recommended Posts

  • Solution

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
Link to comment

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!

Link to comment
  • 3 months later...

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
Link to comment

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
Link to comment
  • 3 weeks later...

@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
Link to comment
  • 6 months later...

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.

Link to comment

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.

Link to comment
  • 5 years later...

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.

Link to comment
  • 7 months later...
  • 6 months later...
On 1/27/2013 at 10:50 PM, opo said:

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;
}

 

 

 

This worked like a charm for me. Using "Avenue" Template.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.