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

Site URL: https://orange-magnolia-wpn2.squarespace.com/newsletter

Hi all,

I'm trying to hide the 'First Name' & 'Last Name' labels on a form in the Brine 7.0 template.

Any help is much appreciated.

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:

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 

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?

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.

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.

 

 

I see you solved this?

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? 

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;
}