Styling a Form

SOLVE
Highlighted
New Contributor

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

 

 

 

 

 

 

 

 

 

 

Right now, it looks like this:Screenshot 2017-07-07 10.44.42.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;
}

 

 

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor | Gold Partner | HubSpot Certified Trainer

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 http://designers.hubspot.com/docs/cos/hubspot-form-markup

 

 


If this answer helped, please, mark as solved Smiley Very Happy


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

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes
1 Reply
Regular Advisor | Gold Partner | HubSpot Certified Trainer

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 http://designers.hubspot.com/docs/cos/hubspot-form-markup

 

 


If this answer helped, please, mark as solved Smiley Very Happy


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

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes