Change Background Colour of Form

  • Resolved careeradviceforyoungpeople

    (@careeradviceforyoungpeople)


    4 years, 3 months ago

    Hi,

    Happyforms is great! ??

    I’m trying to change the background colour of the whole from so that it looks different from the rest of the white background on my blog posts

    I found an answer saying to add the below to the additional CSS in ‘Style’ tab

    .happyforms-form {
    background-color: grey;
    }

    …but it changed nothing? I’ve added that snippet to a few of my forms and the background remains white. Am I going wrong somewhere, ideally I want the whole background form to be a light blue.

    Any help would be much appreciated

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hey there! ??

    The Additional CSS section in your Style tab automatically wraps your custom CSS rules with the container ID — which is, itself, the .happyforms-form element.

    Try this snippet instead:

    form {
    background-color: grey;
}

    That should hopefully do the trick. Let us know how that goes!

    Thread Starter careeradviceforyoungpeople

    (@careeradviceforyoungpeople)

    Thank You!

    That changes the background colour behind the label and button fields, but the background behind the ‘title’ is still white.

    Is there snippet I can add to change the background behind all of the elements i.e. title, label, button, etc.?

    My form is half way down the page in the link below
    1000yearsofcareeradvice.com/benefits-of-work-experience-for-students/

    I tried to google to see if I could find an answer, but got suggestions like form.wrapper snippets that didn’t work…

    Any help would be much appreciated!
    Paul

    I see, Paul!

    In that case, you’ll want to add the below snippet to your Appearance → Customize → Additional CSS screen:

    .happyforms-form {
    background-color: grey;
}

    I hope that helps!

    Thread Starter careeradviceforyoungpeople

    (@careeradviceforyoungpeople)

    Amazing! Thanks so much!

    Sorry to be a pain, but one last question if I could please?

    I have three happy forms on my site:

    1) hero section of main page
    2) in the middle and at the end of all my blog posts
    3) in my sidebar

    I added the snippet above in appearance -> customise -> additional CSS, and it changes the background in all three forms.

    Is there a way I can change all of the background i.e. title, form, button in ONLY the form in my blog posts, and leave the forms on main page and sidebar unchanged with white backgrounds? is that possible?

    Thanks again for your help!
    Paul

    Thread Starter careeradviceforyoungpeople

    (@careeradviceforyoungpeople)

    I read some other replies on the forum and played around with it and think I’ve figured it out, I added to theme customise section:

    #happyforms-4643 {
    background-color: lightskyblue;
    }

    Thanks a lot for your help! ??

    Nice work ?? That’s perfect, @careeradviceforyoungpeople.

    Another way to do this is to paste this code into the Additional CSS section of HappyForms’ ‘Style’ tab. Any CSS added here will apply only to the form you’re editing.

    But in all honestly, I’d just stick with what you’ve done.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change Background Colour of Form’ is closed to new replies.