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? 

On 6/21/2022 at 5:57 AM, 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 .form-item .title {
    display: none;
}

The only issue with that tuanphan is it seems that hides the required field warning, so when they click the button it can look like the form submits but it is not.

Updated code.

Hello @taunpah, How can I had just one title? The form is below, I just need to hide the "Name" form title for that one field and keep first name and last name as it is:

URL: https://viola-red-ayyp.squarespace.com/home-1

On 9/12/2024 at 10:11 AM, Mary_0221 said:

Hello @taunpah, How can I had just one title? The form is below, I just need to hide the "Name" form title for that one field and keep first name and last name as it is:

URL: https://viola-red-ayyp.squarespace.com/home-1

@tuanphan sorry I tagged name incorrectly. Hoping to hear back. Thank you in advance. 

On 9/14/2024 at 7:56 AM, Mary_0221 said:

@tuanphan sorry I tagged name incorrectly. Hoping to hear back. Thank you in advance. 

You can use this to Website Tools > Custom CSS

/* Hide Name label */
#block-3d4b6b5521b4416b0296 .name .title {
    display: none !important;
}

Thank you @tuanphan that worked perfectly.. Related to this, how can I match the field size of the Give field to the donation type dropdown? as you can see it is skinnier. Appreciate you. 

Hi @Mary_0221, the website link seems to be expired (see screenshot attached)