Jump to content

Form Styling Disappeared, Did Something Change from Squarespace?

Go to solution Solved by tuanphan,

Recommended Posts

.form-wrapper{
padding:20px;
}

.title{
  font-family:'CSB-Roma'!important;
  text-transform:uppercase;
  text-align:left;
  text-indent:0;
color:#000000;
  font-style: italic;
}

.caption
{font-family:'CSB-Roma'!important;
  text-transform:uppercase;
  font-size:10px;
  text-align:left;
	color:#000000;}

.form-wrapper .field-list .field .field-element 
{
  font-family:'CSB-Roma'!important;
  border:none;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#000000;
}

.button.sqs-system-button.sqs-editable-button{
font-family:'CSB-Roma'!important;
letter-spacing:1px;
      background-color: none!important;
}


.sqs-block-form .field-list .title, .form-wrapper .field-list .fields .title, .form-wrapper .field-list .fields .description, .form-wrapper .field-list .fields .field, .form-wrapper .field-list .fields .field-error {
    font-family: 'CSB-Italic'!important;
    background-color: none!important;
}

.button.sqs-system-button.sqs-editable-button {
  font-family: 'CSB-Roma'!important;
}


div.form-block input:not([type="submit"]), div.form-block textarea {
    background-color: none!important;
    border: none !important;
   border-bottom: 2px solid black !important; 
    color: black !important;
}

.field .caption .field-element {
  font-family : 'CSB-Roma'!important;;
  }

/* 
Hide required on field titles 
*/
.form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required {
  visibility: hidden;  
}
.form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before {
  visibility: visible;  
  content: "*"; 
     font-family: 'CSB-Italic'!important;
  font-size: 1.5em;
  line-height: 1em;
}

.caption {
   font-family: 'CSB-Roma'!important;
}

/* Change the submit button colors */
.form-wrapper input[type=submit]{
background-color: none!important;
  color: transparent!important;
  font-size: 2rem!important;
border-bottom: 2px solid black!important;
  margin-top: 5%;
}

.form-wrapper input[type=submit]:hover{
background-color: none!important;
  font-family : 'CSB-Italic'!important;;
}

This is the custom CSS I have inserted for the Form. Everything was styled correctly last week, but now, logged in and:

  1. the Submit button is a little black square (instead of h1, with an underline)
  2. First Name Last Name text is not my custom typeface 
  3. Input font is not my custom typeface

https://tuba-synthesizer-h36d.squarespace.com

PW 12345

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Squarespace are likely changing some of the backend coding, so some of this may need adjusting, or waiting until the changes are finalised.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@tuanphan anything? 

 

In addition to my previous list of things that have changed with the form, there's now white backgrounds in the entry fields (they were transparent previously). 

  1. the Submit button is a little black square (instead of h1, with an underline)
  2. First Name Last Name text is not my custom typeface 
  3. Input font is not my custom typeface
  4. Input background is white, not transparent

 

 

Link to comment
  • Solution
On 10/16/2023 at 9:56 PM, tokonoma said:

@tuanphan anything? 

 

In addition to my previous list of things that have changed with the form, there's now white backgrounds in the entry fields (they were transparent previously). 

  1. the Submit button is a little black square (instead of h1, with an underline)
  2. First Name Last Name text is not my custom typeface 
  3. Input font is not my custom typeface
  4. Input background is white, not transparent

 

 

#0. To remove background, use this CSS code

div.form-block input:not([type="submit"]), div.form-block textarea {
    background-color: transparent !important;
}

#1. Use this CSS code

div.form-block button[type="submit"] {
    background-color: transparent !important;
    color: black !important;
    border-bottom: 1px solid black !important;
}

image.thumb.png.991f4a4ea325fbaddaf2bdedca6cc1fe.png

#2.

div.form-block * {
    font-family: 'halyard-display' !important;
}

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.