Lead Capture Tools

KMcKeever
Participant

Add a background image to a form

SOLVE

Hello! I am trying to add a background image or color to a form that will be embedded to my website. The page on my website is not a hubspot page. How can you change the background color or use an image as the background pattern for an embedded form?

 

Thanks!

0 Upvotes
1 Accepted solution
Jake_Lett
Solution
Guide | Partner
Guide | Partner

Add a background image to a form

SOLVE

If you have a professional or enterprise account you can customize the form styles. Here is the basic CSS style you would need to add to your page. If you have more than one form on a page you would need to use the form ID selector instead so the rule is more specific. If you are new to CSS here is more information on the background property https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

.hs-form {
    background: url(https://dummyimage.com/600x400/000/fff.png) no-repeat;
}

  

View solution in original post

2 Replies 2
JAmber
Member

Add a background image to a form

SOLVE

I make posters for music bands that perform in my music pub. That’s not my profession since I am not a graphic artist. The bands play for free, so these posters are not something I would be making money off. As you can imagine, putting an image of a musician onto colorful background is the simplest way to create a poster. I use https://create.vista.com/features/background-remover/ tool for changing background in a few clicks. That’s how I create most of the posters.

0 Upvotes
Jake_Lett
Solution
Guide | Partner
Guide | Partner

Add a background image to a form

SOLVE

If you have a professional or enterprise account you can customize the form styles. Here is the basic CSS style you would need to add to your page. If you have more than one form on a page you would need to use the form ID selector instead so the rule is more specific. If you are new to CSS here is more information on the background property https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

.hs-form {
    background: url(https://dummyimage.com/600x400/000/fff.png) no-repeat;
}