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.
Hello @Runar_Kristjansson,
Welcome to Plumsail Community!
You can set the background of the form in the Theme settings:
That should work in your case.
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).
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:
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.
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.
Please ignore this message, the syntax checker is not ideal in the designer yet.
Add the CSS, save the form and test.