Change Contact form in 7.1?

Site URL: https://smilodon-ocelot-my5f.squarespace.com/contact

Hi,

I want to change the input boxes in my contact form into underline.

A bit like this (not grey though) ...

Add to Home > Design > Custom CSS

.field-element {
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
}

Thanks!

Hi,

I have changed my contact form (image attached) using the code below. 

The visitor text inside the boxes are of different sizes. I am only able to modify the size of the text in the 'Email', 'Subject' and 'Message' box but not the text in the 'First Name' and 'Second Name' box. On the contrary, I was able to change the color to red for all text inside all boxes.

why is that happening? anyone can help? 

.form-wrapper .field-list .field .field-element{
  border:none;
  border-bottom: 2px solid;
  border-color: #fff;
  background: #000000;  
}
.form-wrapper .field-list .field .field-element
{
font-size: 20px;
color: #FF0000;
}

On 3/13/2021 at 7:58 PM, vcampaner said:

Hi,

I have changed my contact form (image attached) using the code below. 

The visitor text inside the boxes are of different sizes. I am only able to modify the size of the text in the 'Email', 'Subject' and 'Message' box but not the text in the 'First Name' and 'Second Name' box. On the contrary, I was able to change the color to red for all text inside all boxes.

why is that happening? anyone can help? 

.form-wrapper .field-list .field .field-element{
  border:none;
  border-bottom: 2px solid;
  border-color: #fff;
  background: #000000;  
}
.form-wrapper .field-list .field .field-element
{
font-size: 20px;
color: #FF0000;
}

Hi. Can you share link to page where you added contact form? We can check easier

Thanks - we sorted this out a year ago.

On 3/23/2021 at 1:50 PM, tuanphan said:

Hi. Can you share link to page where you added contact form? We can check easier

https://www.vittoriacampaner.com/contact

My apologies I just saw this now. Above is the link of the specific page. 

On 3/23/2021 at 1:50 PM, tuanphan said:

Hi. Can you share link to page where you added contact form? We can check easier

Hi I just saw that you replied me. 

here is the link 

https://www.vittoriacampaner.com/contact

On 4/12/2021 at 1:14 AM, vcampaner said:

Hi I just saw that you replied me. 

here is the link 

https://www.vittoriacampaner.com/contact

Hi. IT looks like you solved?

On 4/15/2021 at 9:34 AM, tuanphan said:

Hi. IT looks like you solved?

not really when I type my name and last name is always smaller then when I type email and subject and message. I made them all same size, but I would like all of them bigger 

On 4/20/2021 at 8:01 PM, vcampaner said:

not really when I type my name and last name is always smaller then when I type email and subject and message. I made them all same size, but I would like all of them bigger 

 

Add to Design > Custom CSS

/* form input size */
.form-wrapper .field-list .field .caption .field-element {
    font-size: 20px;
}

Hi everyone, 

These code does not work anymore:( 

They seem correct and logic, but they don"t work unfortunately. I found a different code, but I dont understand why are those random numbers and letters in it, they are a bit strange. Any thoughts on this?

.form-wrapper .field-list .field .field-element, .form-wrapper .field-list .field .field-element:focus, .form-wrapper .field-list textarea, .eTv7qUMqLR9lJxpIAC3F, .EPP7gUN4hvOdLcPLvYT2 {
  color: #666 !important;
  background: #fff !important;
  padding: 20px 0px !important;
  border-bottom: 1px solid #000 !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
}

Quote

.eTv7qUMqLR9lJxpIAC3F, .EPP7gUN4hvOdLcPLvYT2

These look like dynamically generated class names and are not stable. They change at a whim and you shouldn't use them. Unless you don't mind doing a lot of break/fix cycles.

I don't have a solution to this issue.