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

How to change the Form Submit button color?


Kirk

Question

18 answers to this question

Recommended Posts

  • 5

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
  • 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!

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

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

Link to comment
  • 0

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
  • 0
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...