Jump to content

Customising a Form with CSS

Go to solution Solved by Lesum,

Recommended Posts

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

Screenshot 2023-08-23 at 10.51.36 pm.png

Screenshot 2023-08-23 at 10.51.52 pm.png

Link to comment
  • Solution

@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!

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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

Link to comment
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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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!

Screenshot 2023-10-05 at 1.08.50 pm.png

Use this CSS code

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.