Jump to content

How do I hide the 'first name' 'last name' labels on a form in Brine Template?

Recommended Posts

4 hours ago, cooperdesignstudio said:

I'm trying to hide the 'First Name' & 'Last Name' labels on a form

You can hide the first and last name captions by adding this to Design > Custom CSS:

/* Hide first and last name captions */
.field.first-name, .field.last-name {
  .caption-text {
    display: none;
  }
}

This is applicable to any form on any template.

If you would prefer to change the captions, you'll find an existing post about this here:

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 year later...
On 6/17/2022 at 7:06 AM, Cresser said:

Is there a way to hide the First Name and Last Name labels on a standard site? I tried your code but it doesn't work on my custom build. I'm trying to remove the form labels and use just the placeholder copy instead to save space. 

https://www.kensingtongreen.com.au/
pw/ kensington 

You mean hide title "First name" above First Name input?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Yes, I'm trying to remove all the field labels and just use the placeholder text as the client wants to reduce the amount of space the form takes up. I still need the field to have the 'required' element so can't simply hide them in the form settings. 

In the attached image I've highlighted what I'm trying to hide.

 

 

required.jpg

Link to comment
10 hours ago, Cresser said:

Yes, I'm trying to remove all the field labels and just use the placeholder text as the client wants to reduce the amount of space the form takes up. I still need the field to have the 'required' element so can't simply hide them in the form settings. 

In the attached image I've highlighted what I'm trying to hide.

 

 

required.jpg

I see you solved this?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

No. Sorry, I had to remove the required status and hide that label as needed to get approval from the client. If you look now you will see the issue I'm trying to find a solution for. Is it possible to hide the label field when it is required? 

Link to comment
7 hours ago, Cresser said:

No. Sorry, I had to remove the required status and hide that label as needed to get approval from the client. If you look now you will see the issue I'm trying to find a solution for. Is it possible to hide the label field when it is required? 

Add to Design > Custom CSS

body.homepage .form-wrapper .field-list .title {
    display: none;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.