Jump to content

Two column form with border bottom only

Recommended Posts

Try this Custom CSS to start for two columns:

@media only screen and (min-width:1000px) {
  .field-list .field:nth-child(odd) {
    width: 48% !important;
    float: left !important;
    z-index:99999;
  }
  .field-list .field:nth-child(even) {
    width: 48% !important;
    float: right !important;
    z-index:99999;
  }
}
.form-field-shape-square.form-field-border-all .sqs-block-form .form-item input, .form-field-shape-square.form-field-border-all .sqs-block-form .form-item textarea {
  border-width:0px;
  border-bottom:2px solid #000;
}
.form-wrapper .field-list input, .form-wrapper .field-list textarea, .form-wrapper .field-list input:focus, .form-wrapper .field-list textarea:focus {
    background: transparent !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

The borders look good, however the columns get a little crumped with all the info. 

But with work it can be a great solution! 

No that I have the content directly on the background I wanted to change the input color and apply the line to boxes also

Link to comment
15 minutes ago, BeaCG said:

The borders look good, however the columns get a little crumped with all the info. 

If you want a 2 column form then you'll want a wider form generally.

15 minutes ago, BeaCG said:

But with work it can be a great solution! 

Yep, that code gives you a good start.

If you need any specific help with changes and design, let me know.

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.