Background on web form

Forms
1

I have multiple plumsail web forms set on our webpage.
I am trying to change the background of just one of the forms.

If I use
.fd-form {
background-color: blue;
}
then the background on all the forms are changed.

Use case: We have a page where one section has white background and one section has red background. We have a plumsail webform in both sections and I want to change the background of the form in the red section to match so it doesn't stand out as much.

2

Hello @Runar_Kristjansson,

Welcome to Plumsail Community!

You can set the background of the form in the Theme settings:

image
image920×382 16.7 KB

That should work in your case.

3

I have tried that, but that also changes the background on the other form on the site. Seems to be that if I set a custom theme on the second form on the site it overrides all the other forms as well.

I have one form with Default theme, and the other form with custom theme with the red color behind it. But when I put it onto the website, both forms get the Custom theme settings (red color behind it).

4

@Runar_Kristjansson,

Ok, I see...

What you can do:

  • add a unique CSS to any element on the target form. I've added the class like so:

    image
    image347×578 12 KB

  • then use this CSS to change the background only for the form that has an element with this class in it:

.fd-form:has(div.unique-bg) {
background-color: blue;
}

That should do the trick for your case.

5

Thanks that sounds like it should work.

I am getting this "expected rpraren" error when using it like you suggests. Added the same class tag and the same code to the custom css of the form.
image

6

@Runar_Kristjansson,

Please ignore this message, the syntax checker is not ideal in the designer yet.
Add the CSS, save the form and test.