Guest Posted January 28, 2013 Share Posted January 28, 2013 How do I change the color of the form block submit button? Thanks! Link to comment
Guest Posted January 28, 2013 Share Posted January 28, 2013 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; } Link to comment
Guest Posted January 28, 2013 Share Posted January 28, 2013 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
mareitor Posted May 1, 2013 Share Posted May 1, 2013 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? Link to comment
dennis1570047704 Posted May 1, 2013 Share Posted May 1, 2013 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. Link to comment
KateS Posted May 1, 2013 Share Posted May 1, 2013 Same here. Mine stopped working today too. I'm on the Five template. Does anyone have another solution? Link to comment
mareitor Posted May 2, 2013 Share Posted May 2, 2013 I can't get the color I want in the submit button, anyone else has any other ideas? Link to comment
dennis1570047704 Posted May 2, 2013 Share Posted May 2, 2013 Try adding this code just before .form-wrapper code: .sqs-block.form-block Squarespace may have changed the Five template. Link to comment
mareitor Posted May 2, 2013 Share Posted May 2, 2013 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 Link to comment
Guest Posted May 2, 2013 Share Posted May 2, 2013 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; } Link to comment
mareitor Posted May 2, 2013 Share Posted May 2, 2013 Opo thats awesome! It worked!Thank you very much guys :) Link to comment
Timo1570047708 Posted May 24, 2013 Share Posted May 24, 2013 How can you also change the color of the button that opens the lightbox if you are using a form in lightbox mode? Link to comment
KateS Posted May 25, 2013 Share Posted May 25, 2013 @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. Link to comment
Yeshen Posted December 8, 2013 Share Posted December 8, 2013 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
Yeshen Posted December 8, 2013 Share Posted December 8, 2013 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
AskQuesty Posted May 24, 2019 Share Posted May 24, 2019 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 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
melaniejaane Posted January 4, 2020 Share Posted January 4, 2020 This code changed all elements including border and text color. Hope this helps! .sqs-block.form-block .form-wrapper input[type=submit], { border-color:#E8C513; color:#E8C513} .sqs-block.form-block .form-wrapper:hover input[type=submit], { background-color:#E8C513;color:#FFF } Link to comment
tiffanycrawford Posted January 10, 2020 Share Posted January 10, 2020 @melaniejaane This works well for a regular form. Do you know how to do the same for a form using the lightbox feature (where you click a button to open the form)? Thanks! Link to comment
Daddy69 Posted July 23, 2020 Share Posted July 23, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.