Form Block Redesign

Hi there,

I'm struggeling with updating previous form-designs after the form-update from Squarespace. I can see that .form-inner-wrapper and .field-element does not exist anymore, but swapping them with . react-form-contects didn't do the trick for me. 

I have two types of forms where I would like the background boxes to disapear. Pop-up forms (you can find them on www.naturalhealing.dk/livsstil --> "book dine egne datoer" and an on-page form at the contact page on  www.naturalhealing.dk/kontaktos. I've been using this code so far;

.field-list .field-element{
border-color: #000000 !important;
border-bottom: solid 1px #000000 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-radius: 0px !important;
background-color: transparent !important;
}
.field-list select:focus{
outline:none;
}
.field-list .section{
border-color:#000000 !important;
}
.field-list .field-element:focus, .field-element:visited{
border-color:#ff671d !important;
}
.field-list select:focus{
outline-color:#ff671d !important;
}

Can anyone help me? Tons of thanks and virtual coffees from me! 🙏🏼

What changes are you wanting to implement?

Remove the background boxes and make it into a simple underline + make (påkrævet) much smaller.

Thanks for looking into it! 

Thank you, that worked for the contact-form! 

Last question - to target the lightbox forms as well, how do I do that?

Thanks! 

Sorry, and also this input field - if that can be without the background color. Thanks! 

Try this for the pop-up form

.field-list{
  input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
  }
}

2 hours ago, Flinx said:

Sorry, and also this input field - if that can be without the background color. Thanks! 

Try this:

.form-wrapper .field-list textarea {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid #333 !important;
}

field-list textarea and pop-up form codes worked! Thanks!

The only thing missing is the check-boxes in the pop-up form, that disappeared in the new code. Do you know how to target them, so that you can see the marks?

Thanks! 

Where is this form?

https://www.naturalhealing.dk/naturlig-behandling --> Scroll about three sections down to the button "BOOK EN FLOW SESSION"

Try this:

.form-wrapper .field-list .field.checkbox input {
    border: 1px solid #333 !important;
}

Thanks! I can see the boxes now, but not anything when I "check" one.

Can you try removing lines of code with the form open and one "checked" to see what is causing the error?

Sure! So it's the background and border, that are making the boxes disappear as well. 

This part of the code:

    background: none !important;
    border: none !important;

We need to reset the background on just the checkboxes like this:

.form-wrapper .field-list .field.checkbox input {
    background: initial !important;
}

Add this after the other code, not before.

I added it after, but it still doesn't work - sorry for this long back and forth - your help is really appreciated! 

Remote troubleshooting is tricky, if you can give me access to the website I can hopefully get this working for you.

I can't thank you enough! Yes - can you share which e-mail, then I'll add you as a contributor.