Customising a Form with CSS

Hello, 

I'm looking to customise a form block to match a design. Basically there are lot of default Squarespace elements in the form block I want to hide, to just create something simple. 

You can see a WIP of the form here: 
https://orange-cone-8mgh.squarespace.com/
password: orderxpress
(the last section). 

Attached is the design I'm trying to achieve. So looking for guidance to do the following: 

• Can the "First Name", "Last Name" text sit within the box, or is there a way to add placeholder text here?
• How can I chance the placeholder text to a custom font style
• How can I remove the space so that the form fields sit closer together?
   

Lastly, does anyone know if it's possible to add a 3D shadow style effect to each field when selected (screenshot also attached for reference of design). 

Any guidance greatly appreciated! I'd even be happy to use a custom form plugin if anyone knows of one available. 

Thanks

On 8/23/2023 at 11:28 PM, Lesum said:

@holahannah Here's a custom solution I created. 

1. Instead of creating a Name field, create two text fields and add placeholders "First Name", "Last Name".

2. Add the code below under Website > Utilities > Website Tools > Custom CSS to change the placeholder text font. Change "your font" in the code to the font name you would like to use.

::-webkit-input-placeholder {
  font-family: 'your font' !important;
}
:-ms-input-placeholder {
  font-family: 'your font' !important;
}
:-moz-placeholder {
  font-family: 'your font' !important;
}
::-moz-placeholder {
  font-family: 'your font' !important;
}

3. Add the code below to remove extra spacing between form fields.

label {
    display: none !important;
}

.form-wrapper .react-form-contents .field-list .field, .form-wrapper .react-form-contents .field-list .fields .field {
    margin: 0 0 16px !important;
}

4. You can add the code below to add a 3D effect when input is selected:

input:focus, textarea:focus {
    box-shadow: 7px 7px #474747 !important;
    border: 1px solid #474747 !important;
    transition: all ease-in .2s !important;
	background-color: #ccfc8d !important
}

Let me know how it goes. Thanks!

@Lesum Any idea on CSS that will successfully change the placeholder font size? Can't get it to work... Site is here

On 8/25/2023 at 11:44 PM, MayaViolet said:

 

Any idea on CSS that will successfully change the placeholder font size? Can't get it to work... Site is here

Use some code like this

input::placeholder, textarea::placeholder {
    font-size: 30px !important;
}

-- Your site url doesn't work.

Hi @tuanphan, 

I'm trying to use the above code (on a different site) to make all the placeholder text black - but it's appearing a faded grey. 

Do you know how I change the colour of the placeholder text?

https://saddlesmountwhite.squarespace.com/functions
password: saddles

Thank you!

On 10/5/2023 at 10:12 AM, holahannah said:

Hi @tuanphan, 

I'm trying to use the above code (on a different site) to make all the placeholder text black - but it's appearing a faded grey. 

Do you know how I change the colour of the placeholder text?

https://saddlesmountwhite.squarespace.com/functions
password: saddles

Thank you!

Use this CSS code

#siteWrapper #block-yui_3_17_2_1_1696401604973_17389 .field input::placeholder {
    color: black !important;
    opacity: 1 !important;
}

Amazing! Thank you @tuanphan - appreciate that, it worked perfectly!