Jump to content

Rearrange fields in form block

Go to solution Solved by Ziggy,

Recommended Posts

Hey community,

is there a way to adjust the fields in the form block so that instead "First Name" and "Last Name" there is just one "Name" field and "E-mail address" field is moved up in place of the former "Last Name field." I find the default design really clunky.

In case that's of relevance: the form is in the footer.

Thank you!

Best,

Nikolas

image.thumb.png.5af108faea69d877eb5c8b65caea9bac.png

Link to comment

You don't have to use the name field for names, a text field will work fine if you just want a single field for collecting names.

If you want to put the second field next to the first one taking up 50% of the width each, that can be done with CSS, it's been shared numerous times on the forum:

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

Thanks for the hint with the name!

The code by @tuanphan, though, seems to be adjusted to the particular form of that forum post. And that by @paul2009 doesn't work for me because it won't leave a space between the name and email field and seems to clash with my "Sign up for news and updates"  box ( see pic below) . Could someone help me adjust it accordingly?

Best,

Nikolas

image.thumb.png.0ee03048c0085a0535c7f8ef013e11f6.png

Link to comment
10 minutes ago, Nikolas361 said:

Could someone help me adjust it accordingly?

Can you share your website URL, this page, and the code you've added so far?

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

I can't see that taking effect, but you may want to make this tweak:

.form-item.field.email, .form-item.field.text {
 display: inline-block;
 min-width: 48.8%;
}

.form-item.field.text {
 margin-right: 1.2%;
}

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 put this on a temporary page that I can see so I can help you adjust it? Hard to do without seeing it on a website.

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

A few changes:

@media only screen and (min-width:1000px) {
  .form-item.field.email, .form-item.field.text {
    display: inline-block;
    vertical-align: top;
    min-width: 48.8%;
  }
  .form-item.field.text {
    margin-right: 2.4% !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
1 minute ago, Nikolas361 said:

also, if we could do for desktop only, that would be great! On mobile having the fields below each other words quite well.

That's one of the additions I just posted.

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

Another adjustment!

@media only screen and (min-width:1000px) {
  .form-item.field.email, .form-item.field.text {
    display: inline-block;
    vertical-align: top;
    min-width: 48.8%;
  }
  .form-item.field.text {
    margin-right: 2.4% !important;
    margin-top: 13px !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

Looks perfect to me:

image.thumb.png.658c4261ad4d94d85ba439cadd617611.png

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

You can adjust this value up or down a few pixels to see if that helps your view.

margin-top: 13px !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

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.