Jump to content

Form Block Redesign

Go to solution Solved by Ziggy,

Recommended Posts

Hi there,

I'm struggeling with updating previous form-designs after the form-update from Squarespace. I can see that .form-inner-wrapper and .field-element does not exist anymore, but swapping them with . react-form-contects didn't do the trick for me. 

I have two types of forms where I would like the background boxes to disapear. Pop-up forms (you can find them on www.naturalhealing.dk/livsstil --> "book dine egne datoer" and an on-page form at the contact page on  www.naturalhealing.dk/kontaktos. I've been using this code so far;

 


.field-list .field-element{
border-color: #000000 !important;
border-bottom: solid 1px #000000 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-radius: 0px !important;
background-color: transparent !important;
}
.field-list select:focus{
outline:none;
}
.field-list .section{
border-color:#000000 !important;
}
.field-list .field-element:focus, .field-element:visited{
border-color:#ff671d !important;
}
.field-list select:focus{
outline-color:#ff671d !important;
}

 

Can anyone help me? Tons of thanks and virtual coffees from me! 🙏🏼

Skærmbillede 2023-09-04 kl. 10.27.52.png

Skærmbillede 2023-09-04 kl. 10.28.05.png

Link to comment

What changes are you wanting to implement?

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

Try this Custom CSS to start:

.form-wrapper .field-list .description {
  font-size:0.7rem !important;
}
.form-field-shape-square.form-field-border-all .sqs-block-form .form-item input {
  background: none;
  border: none;
  border-bottom: 2px solid #333;
}

 

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

Try this for the pop-up form

.field-list{
  input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
  }
}

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
2 hours ago, Flinx said:

Sorry, and also this input field - if that can be without the background color. Thanks! 

Try this:

.form-wrapper .field-list textarea {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid #333 !important;
}

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

Where is this form?

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

Try this:

.form-wrapper .field-list .field.checkbox input {
    border: 1px solid #333 !important;
}

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

Can you try removing lines of code with the form open and one "checked" to see what is causing the error?

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

We need to reset the background on just the checkboxes like this:

.form-wrapper .field-list .field.checkbox input {
    background: initial !important;
}

Add this after the other code, not before.

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

Remote troubleshooting is tricky, if you can give me access to the website I can hopefully get this working for you.

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

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.