# Styling a Form

**URL:** <https://community.hubspot.com/t/styling-a-form/2631>\
**Category:** CMS Development\
**Created:** [July 7, 2017, 3:50pm UTC](https://community.hubspot.com/t/styling-a-form/2631 "2017-07-07T15:50:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbeditor](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rbeditor/32/5125_2.png) [@rbeditor](https://community.hubspot.com/u/rbeditor)\
**Post date:** [July 7, 2017, 3:50pm UTC](https://community.hubspot.com/t/styling-a-form/2631/1 "2017-07-07T15:50:26Z")

</div>

Hello,

I’m currently embedding a Hubspot form on my website, but I want to style it to look like this:

 ![Screenshot 2017-07-07 10.44.09.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/7/17ea9d32aa0767664873211b3fcdc640c92eef2d.png)

Right now, it looks like this:

 ![Screenshot 2017-07-07 10.44.42.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/a/8ad2bb56f85fd1c70a55b4aec95806e62dd7e08e.png)

Where do I add the Hubspot script to this css style sheet?

body {  
background: #F8A434;  
font-family: ‘Lato’, sans-serif;  
color: #FDFCFB;  
text-align: center;  
}

form {  
width: 450px;  
margin: 17% auto;  
}

.header {  
font-size: 35px;  
text-transform: uppercase;  
letter-spacing: 5px;  
}

.description {  
font-size: 14px;  
letter-spacing: 1px;  
line-height: 1.3em;  
margin: -2px 0 45px;  
}

.input {  
display: flex;  
align-items: center;  
}

.button {  
height: 44px;  
border: none;  
}

#email {  
width: 75%;  
background: #FDFCFB;  
font-family: inherit;  
color: #737373;  
letter-spacing: 1px;  
text-indent: 5%;  
border-radius: 5px 0 0 5px;  
}

#submit {  
width: 25%;  
height: 46px;  
background: #E86C8D;  
font-family: inherit;  
font-weight: bold;  
color: inherit;  
letter-spacing: 1px;  
border-radius: 0 5px 5px 0;  
cursor: pointer;  
transition: background .3s ease-in-out;  
}

#submit:hover {  
background: #d45d7d;  
}

input:focus {  
outline: none;  
outline: 2px solid #E86C8D;  
box-shadow: 0 0 2px #E86C8D;  
}

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [July 9, 2017, 2:42pm UTC](https://community.hubspot.com/t/styling-a-form/2631/2 "2017-07-09T14:42:06Z")

</div>

You can’t embed scripts within stylesheets. Instead you need to add your embed script to the page and add styles to your css file.

A good place to start is this form embed boilerplate [HubSpot forms - HubSpot docs](http://designers.hubspot.com/docs/cos/hubspot-form-markup)

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).