how to customize contact form

Site URL: https://www.noiristhenewnoir.com/contact

Hello,

I'm trying to change the design of my contact form design. 

I want a design that has the no boarders on the boxes like this site:

https://www.vittoriacampaner.com/contact

But has the changing colour on hover like this site:

https://www.calypsobeneart.co.uk/contact

Can you provide me with any help please?

Add to Design > Custom CSS

/* Contact form */
.form-wrapper .field-list .field .field-element {
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.form-wrapper .field-list .field .field-element:hover {
    background: white !important;
}

Hello thanks, that does work great but when I enter anything in the form fields you can't see what you have written. Is there anyway to change that, even with a font colour change because other wise its perfect.

Thank you! That's working perfectly now.

On 4/24/2021 at 10:59 PM, tuanphan said:

Try new code

/* Contact form */
.form-wrapper .field-list .field .field-element {
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
	color: gray !important;
}
.form-wrapper .field-list .field .field-element:hover {
    background: white !important;
}

 

Did something just recently update with Squarespace for the form? I used this code and changed some of it around yesterday (see below for what I used) and it worked perfectly! I looked at my website today and everything reverted back. Do you know of any reason why this would be? 

The only thing that DOES seem to be working still is the padding/margins I did on the form button.

https://www.valiscosupply.com/contact

/* Contact form */
.form-wrapper .field-list .field .field-element {
    background: #F5F4F0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
	color: #000000 !important;
  margin-top: 15px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

/* form input size */
.form-wrapper .field-list .field .caption .field-element {
    font-size: 14px !important;
}
/* form button */
input.button.sqs-system-button.sqs-editable-button {
    padding-left: 3em !important;
  padding-right: 3em !important;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  margin-top: 10px;
}

***** EDIT ******

I figured out the issue from another post. It looks like Squarespace is updating the form to other "naming conventions" (not sure what they're officially called, newbie here) but I was able to fix it with these changes if it helps anyone else.

/* Contact form */
.form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea {
    background: #F5F4F0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
	color: #000000 !important;
  margin-top: 5px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  }}

/* form input size */
.form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea {
    font-size: 14px !important;
  }}

/* form button */
input.button.sqs-system-button.sqs-editable-button {
    padding-left: 3em !important;
  padding-right: 3em !important;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  margin-top: 10px;
}

OMG THANK YOU this was driving me crazy and I thought I was losing my mind. 

On 5/4/2023 at 9:35 PM, Valisco said:

Did something just recently update with Squarespace for the form?

Yes. Please see my post here:

On 5/5/2023 at 5:35 AM, Valisco said:

Did something just recently update with Squarespace for the form? I used this code and changed some of it around yesterday (see below for what I used) and it worked perfectly! I looked at my website today and everything reverted back. Do you know of any reason why this would be? 

The only thing that DOES seem to be working still is the padding/margins I did on the form button.

https://www.valiscosupply.com/contact

/* Contact form */
.form-wrapper .field-list .field .field-element {
    background: #F5F4F0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
	color: #000000 !important;
  margin-top: 15px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

/* form input size */
.form-wrapper .field-list .field .caption .field-element {
    font-size: 14px !important;
}
/* form button */
input.button.sqs-system-button.sqs-editable-button {
    padding-left: 3em !important;
  padding-right: 3em !important;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  margin-top: 10px;
}

***** EDIT ******

I figured out the issue from another post. It looks like Squarespace is updating the form to other "naming conventions" (not sure what they're officially called, newbie here) but I was able to fix it with these changes if it helps anyone else.

/* Contact form */
.form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea {
    background: #F5F4F0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
	color: #000000 !important;
  margin-top: 5px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  }}

/* form input size */
.form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea {
    font-size: 14px !important;
  }}

/* form button */
input.button.sqs-system-button.sqs-editable-button {
    padding-left: 3em !important;
  padding-right: 3em !important;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  margin-top: 10px;
}

 

Thank you very much! It works perfectly!
If you want to change the place holder too, use this code. I just add red one only.


        .form-wrapper .react-form-contents .field-list .form-item
            { input, text area, select, textarea, ::placeholder
                {
                      font-size: 14px ! important ;
                }
            }