CMS Development

newrockstars
Contributor

How to add CSS to Form?

I have created this HubSpot form: https://share.hsforms.com/11AAc_4WeSmGnCmrpAyT12w2zmo9

 

However, I customized the form using Belch.io for Hubspot and it gave me a CSS code to paste into the form. The problem is that I can not paste the code into the form and I've read all of the knowledge-based articles on this, including responses I've found on the forum and none of them are updated. It seems HubSpot has since changed things around. The documentation says to go to the form--action-and embed. That is no longer an option. The path is form-share but when I try to add the CSS code in the pop up, it won't let me, regardless if they HMTL raw option is on or off.

 

I have ZERO HTML knowledge or skills so this is turning into a complete nightmare and time waster of having to read countless hours and even more waiting around for a response on a forum. I would sincerely appreciate a HubSpot employee responding to this. I am brand new to HubSpot on the Enterprise Marketing and Sales.

 

So....how do I override the forms current CSS with this CSS:

<style type="text/css">@import url("https://fonts.googleapis.com/css?family=Lobster:400");@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600... url("https://fonts.googleapis.com/css?family=Nothing+You+Could+Do:400");@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600... url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600... .hs-form {max-width:100%;margin: auto;}.embed-form-super-wrapper .hs-form input[type=date],.embed-form-super-wrapper .hs-form input[type=datetime], .embed-form-super-wrapper .hs-form input[type=datetime-local], .embed-form-super-wrapper .hs-form input[type=email], .embed-form-super-wrapper .hs-form input[type=month], .embed-form-super-wrapper .hs-form input[type=number], .embed-form-super-wrapper .hs-form input[type=password], .embed-form-super-wrapper .hs-form input[type=range], .embed-form-super-wrapper .hs-form input[type=search], .embed-form-super-wrapper .hs-form input[type=tel], .embed-form-super-wrapper .hs-form input[type=text], .embed-form-super-wrapper .hs-form input[type=time], .embed-form-super-wrapper .hs-form input[type=url], .embed-form-super-wrapper .hs-form input[type=week], .embed-form-super-wrapper .hs-form fieldset.form-columns-1 textarea.hs-input, .embed-form-super-wrapper .hs-form fieldset.form-columns-1 .input select, .embed-form-super-wrapper .hs-form .input textarea, .embed-form-super-wrapper .hs-form .hs-input textarea, .embed-form-super-wrapper .hs-form textarea, .embed-form-super-wrapper .hs-form .input select, .embed-form-super-wrapper .hs-form .hs-input select, .embed-form-super-wrapper .hs-form select  {border: 1px solid #d6d6d6;width: 100%;padding: 9px 14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.embed-form-super-wrapper .hs-form ul {list-style-type: none;margin-left: 0; padding-left: 0;}.embed-form-super-wrapper .hs-form fieldset.form-columns-1 .hs-input{width: 100% !important;}.embed-form-super-wrapper .hs-form fieldset.form-columns-1 input[type="checkbox"], .embed-form-super-wrapper .hs-form fieldset.form-columns-1 input[type="radio"] {width: auto !important;margin-right: 15px !important;margin-top: -2px;}.embed-form-super-wrapper .hs-form label {color: #606060;}.embed-form-super-wrapper .hs-form fieldset {max-width: 100% !important;}.embed-form-super-wrapper .hs-form fieldset.form-columns-3 .hs-form-field {width: 33.333% !important;}.embed-form-super-wrapper .hs-form fieldset {margin-bottom: 0 !important;}.embed-form-super-wrapper .hs-form .hs-form-field {margin-bottom: 15px;}.embed-form-super-wrapper .hs-form label {font-weight: normal;letter-spacing: 1px;}.embed-form-super-wrapper .hs-form ul li {margin-top: 4px;margin-bottom: 4px !important;float: left;width: 100%;}.embed-form-super-wrapper .hs-form fieldset textarea.hs-input {min-height: 200px;}.embed-form-super-wrapper .hs-form select{-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 5px;border-radius: 0;} .embed-form-super-wrapper .hs-form button, .embed-form-super-wrapper .hs-form  input[type=button], .embed-form-super-wrapper .hs-form input[type=reset], .embed-form-super-wrapper .hs-form input[type=submit] {background:#606060;color: white;padding: 7px 45px;font-weight: bold;font-size: 20px;text-transform: uppercase;letter-spacing: 2px;margin-top: 15px;}.embed-form-super-wrapper .hs-form fieldset.form-columns-2 .hs-form-field { width: 50%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}.embed-form-super-wrapper .hs-form fieldset.form-columns-3 .hs-form-field, .embed-form-super-wrapper .hs-form fieldset.form-columns-2 .hs-form-field {float: left;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}.embed-form-super-wrapper .hs-form fieldset .hs-form-field {padding: 0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;}.hs_cos_wrapper.form-title {display: none;}@media screen and (max-width:400px) {.embed-form-super-wrapper .hs-form fieldset.form-columns-3 .hs-form-field {width: 100% !important;}}.embed-form-super-wrapper {    -moz-box-sizing:border-box;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;background: #e809bc;border-top-width: 2px;border-bottom-width: 2px;border-left-width: 2px;border-right-width: 2px;border-radius: 16px !important;-moz-border-radius: 16px !important;-webkit-border-radius: 16px !important;border-color: #07eae1 !important;border-style: solid !important;padding-top: 27px !important;padding-bottom: 27px !important;padding-left: 10px !important;padding-right: 10px !important;margin: 0 auto;}.embed-form-super-wrapper .hs-form label, .embed-form-super-wrapper .hs-form label span {font-family: 'Raleway', Arial !important;color: #080808 !important;font-size: 17px !important;letter-spacing: 0px !important;font-weight: 500 !important;margin-bottom: 6px;}.embed-form-super-wrapper .hs-form label {width: 100% !important;float:left !important;text-align: left !important;padding-left: 0px !important;padding-right: 0px !important;padding-top: 27px !important;padding-bottom: 0px !important;}.embed-form-super-wrapper .hs-form input[type=date], .embed-form-super-wrapper .hs-form input[type=datetime], .embed-form-super-wrapper .hs-form input[type=datetime-local], .embed-form-super-wrapper .hs-form input[type=email], .embed-form-super-wrapper .hs-form input[type=month], input[type=number], .embed-form-super-wrapper .hs-form input[type=password], .embed-form-super-wrapper .hs-form input[type=range], .embed-form-super-wrapper .hs-form input[type=search], .embed-form-super-wrapper .hs-form input[type=tel], .embed-form-super-wrapper .hs-form input[type=text], .embed-form-super-wrapper .hs-form input[type=time], .embed-form-super-wrapper .hs-form input[type=url], .embed-form-super-wrapper .hs-form input[type=week], .embed-form-super-wrapper .hs-form .input textarea, .embed-form-super-wrapper .hs-form .hs-input textarea,.embed-form-super-wrapper .hs-form textarea, .embed-form-super-wrapper .hs-form .input select, .embed-form-super-wrapper .hs-form .hs-input select, .embed-form-super-wrapper .hs-form select {text-align: left !important;font-family: 'Lobster', Arial !important;letter-spacing: 0px !important;font-weight: 300 !important;font-size: 20px !important;border-color: #0d0c0c !important;color: #121111 !important;background-color: #f8f8f8 !important;padding-top: 7px;padding-bottom: 7px;padding-left: 10px;padding-right: 10px;border-style: solid !important;border-radius: 4px !important;-moz-border-radius: 4px !important;-webkit-border-radius: 4px !important;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-top-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;border-right-width: 1px !important;height:auto !important;}.embed-form-super-wrapper .hs-form input::-webkit-input-placeholder, .embed-form-super-wrapper .hs-form select::-webkit-input-placeholder{color:rgba(15,14,14,0.95) !important;text-align: left !important;}.embed-form-super-wrapper .hs-form input::-moz-placeholder, .embed-form-super-wrapper .hs-form select::-moz-placeholder{color:rgba(15,14,14,0.95) !important;text-align: left !important;}.embed-form-super-wrapper .hs-form input:-ms-input-placeholder, .embed-form-super-wrapper .hs-form select:-ms-input-placeholder{color:rgba(15,14,14,0.95) !important;text-align: left !important;}.embed-form-super-wrapper .hs-form input:-moz-placeholder, .embed-form-super-wrapper .hs-form select:-moz-placeholder{color:rgba(15,14,14,0.95) !important;text-align: left !important;}.embed-form-super-wrapper .hs-form button, .embed-form-super-wrapper .hs-form input[type=button], .embed-form-super-wrapper .hs-form input[type=reset], .embed-form-super-wrapper .hs-form input[type=submit] {font-family: 'Nothing You Could Do', Arial !important;letter-spacing: 2px !important;font-weight: 800 !important;font-size: 27px !important;color: #f3f4f5 !important;background: #53b8fb !important;border-top-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-right-width: 2px !important;border-radius: 75px !important;border-style: solid !important; border-color: #53b8fb !important;border-radius: 75px !important;-moz-border-radius: 75px !important;-webkit-border-radius: 75px !important;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding-top: 20px;padding-bottom: 20px;padding-left: 40px;padding-right: 40px;-webkit-transition: all .2s linear;-o-transition: all .2s linear;-moz-transition: all .2s linear;-ms-transition: all .2s linear;transition: all .2s linear;-khtml-transition: all .2s linear;}.embed-form-super-wrapper .hs-form .hs-submit {display: inline-block;width: 100%;}.embed-form-super-wrapper .hs-form .hs-submit .actions {width: 100% !important;float: left !important;clear: both !important;text-align: left !important;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding-left: 11px !important;padding-right: 17px !important;}@media screen and (max-width:767px){.embed-form-super-wrapper .hs-form .form-columns-2>div.hs-form-field,.embed-form-super-wrapper .hs-form .form-columns-3>div.hs-form-field,.embed-form-super-wrapper .hs-form .form-columns-4>div.hs-form-field{width: 100% !important;}}.embed-form-super-wrapper .hs-richtext{float: left !important;width: 100% !important;padding-top: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;padding-right: 20px !important;color: #080808 !important;font-weight: 600 !important;letter-spacing: 1px !important;font-size: 14px !important;font-family: 'Raleway' !important;}.embed-form-super-wrapper .hs-form .hs-submit .actions {text-align: center !important;}.embed-form-super-wrapper .hs-form .hs-error-msgs label, .embed-form-super-wrapper .hs-form .hs-error-msgs label span {font-family: 'Raleway', Arial !important;letter-spacing: 1px !important;font-weight: 500 !important;font-size: 14px !important;color: #410aed !important;}.embed-form-super-wrapper .hs-form button:hover, .embed-form-super-wrapper .hs-form input[type=button]:hover, .embed-form-super-wrapper .hs-form input[type=reset]:hover, .embed-form-super-wrapper .hs-form input[type=submit]:hover {background: #f308f3 !important;color: #ffffff !important; border-color: #53b8fb !important;}.grecaptcha-badge {width: auto !important;height: auto !important;box-shadow: none !important;}.embed-form-super-wrapper .hs-form input[type="checkbox"]{margin-right: 10px;margin-top: -2px;}.center-the-form form, .center-the-form form input {text-align: center;}</style><script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script><script>hbspt.forms.create({target:".Belch-D4rZDeYBwLisYSPKpyLt", portalId: "5021577",formId: "d4001cff-859e-4a61-a70a-6ae90324f5db",css: ""});</script><div class="embed-form-super-wrapper Belch-D4rZDeYBwLisYSPKpyLt"></div>

0 Upvotes
2 Replies 2
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to add CSS to Form?

Thanks @Anton

@newrockstars - Jump into my slack channel, and i'll walk you through this. 

Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to add CSS to Form?

@tjoyce this one could be yours 🙂

 

Anton Bujanowski Signature