Styling a Form

[rbeditor]

Hello,

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

Right now, it looks like this:

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;
}

[tjoyce]

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

---

If this answer helped, please, mark as solved

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.