Share Your Work

lscanlan
Ancien salarié HubSpot
Ancien salarié HubSpot

Over-rideable default CSS for unstyled embedded HubSpot forms

I'm including below CSS for overriding the default embedded forms CSS. A few things to note about this:

 

 

The selectors that I've written below are near-identical to the ones used in the default embedded forms. I've reduced the specificity as much as possible, while making sure that they're more specific than the default selectors. I've also kept all of the default declarations in the rulesets, which should make it easier to understand what to re-write. For example if you wanted to change input field widths in 1-column rows from 95% to 100%, you could just change:

 

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 95%;
}

 

to:

 

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 100%;
}

 

and include that in your CSS.

 

The goal here is just to make it easier to custom style your external, embedded forms without needing to write overly-specific selectors. And here's the CSS:

 

div.fn-date-picker.pika-single {
  z-index: 9999;
  display: block;
  position: relative;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  *zoom: 1;
}

div.fn-date-picker.pika-single.is-hidden {
  display: none;
}

div.fn-date-picker.pika-single.is-bound {
  position: absolute;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.5);
}

div.fn-date-picker.pika-single:before,
div.fn-date-picker.pika-single:after {
  content: " ";
  display: table;
}

div.fn-date-picker.pika-single:after {
  clear: both;
}

div.fn-date-picker .pika-lendar {
  float: left;
  width: 240px;
  margin: 8px;
}

div.fn-date-picker .pika-title {
  position: relative;
  text-align: center;
}

div.fn-date-picker .pika-title select {
  cursor: pointer;
  position: absolute;
  z-index: 9998;
  margin: 0;
  left: 0;
  top: 5px;
  filter: alpha(opacity=0);
  opacity: 0;
}

div.fn-date-picker .pika-label {
  display: inline-block;
  *display: inline;
  position: relative;
  z-index: 9999;
  overflow: hidden;
  margin: 0;
  padding: 5px 3px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  background-color: #fff;
}

div.fn-date-picker .pika-prev,
div.fn-date-picker .pika-next {
  display: block;
  cursor: pointer;
  position: relative;
  outline: none;
  border: 0;
  padding: 0;
  width: 20px;
  height: 30px;
  text-indent: 20px;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 75% 75%;
  opacity: 0.5;
  *position: absolute;
  *top: 0;
}

div.fn-date-picker .pika-prev:hover,
div.fn-date-picker .pika-next:hover {
  opacity: 1;
}

div.fn-date-picker .pika-prev.is-disabled,
div.fn-date-picker .pika-next.is-disabled {
  cursor: default;
  opacity: 0.2;
}

div.fn-date-picker .pika-prev,
div.fn-date-picker .is-rtl .pika-next {
  float: left;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
  *left: 0;
}

div.fn-date-picker .pika-next,
div.fn-date-picker .is-rtl .pika-prev {
  float: right;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
  *right: 0;
}

div.fn-date-picker .pika-select {
  display: inline-block;
  *display: inline;
}

div.fn-date-picker .pika-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

div.fn-date-picker .pika-table th,
div.fn-date-picker .pika-table td {
  width: 14.28571%;
  padding: 0;
}

div.fn-date-picker .pika-table th {
  color: #999;
  font-size: 12px;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
}

div.fn-date-picker .pika-table abbr {
  border-bottom: none;
  cursor: help;
}

div.fn-date-picker .pika-button {
  cursor: pointer;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border: 0;
  margin: 0;
  width: 100%;
  padding: 5px;
  color: #666;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
  background: #f5f5f5;
}

div.fn-date-picker .pika-button:hover {
  color: #fff !important;
  background: #ff8000 !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}

div.fn-date-picker .is-today .pika-button {
  color: #3af;
  font-weight: bold;
}

div.fn-date-picker .is-selected .pika-button {
  color: #fff;
  font-weight: bold;
  background: #3af;
  box-shadow: inset 0 1px 3px #178fe5;
  border-radius: 3px;
}

div.fn-date-picker .is-disabled .pika-button {
  pointer-events: none;
  cursor: default;
  color: #999;
  opacity: 0.3;
}

div.fn-date-picker .pika-week {
  font-size: 11px;
  color: #999;
}

form.hs-form .inputs-list.inline-list li {
  vertical-align: top;
  display: inline-block;
  word-wrap: break-word;
  padding-right: 16px;
}

form.hs-form .inputs-list.inline-list li:after {
  clear: both;
}

form.hs-form .inputs-list.inline-list li input {
  float: left;
}

form.hs-form .inputs-list.inline-list.inline-list-2 li {
  width: 50%;
}

form.hs-form .inputs-list.inline-list.inline-list-2 li:nth-child(2n) {
  padding-right: 0;
}

form.hs-form .inputs-list.inline-list.inline-list-3 li {
  width: 33%;
}

form.hs-form .inputs-list.inline-list.inline-list-3 li:nth-child(3n) {
  width: 34%;
  padding-right: 0;
}

div.hs-fieldtype-intl-phone.hs-input {
  padding: 0;
  background: none;
  border: none;
  height: auto;
}

div.hs-fieldtype-intl-phone.hs-input:after {
  clear: both;
  content: " ";
  display: table;
}

div.hs-fieldtype-intl-phone.hs-input .hs-input {
  margin-bottom: 0;
}

div.hs-fieldtype-intl-phone.hs-input input {
  width: 68% !important;
  float: right;
}

div.hs-fieldtype-intl-phone.hs-input select {
  float: left;
  width: 30% !important;
}

@media (max-width: 400px), (max-device-width: 480px) and (min-device-width: 320px) {
  form.hs-form > .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > input.hs-input {
    width: 68% !important;
  }

  form.hs-form > .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > select.hs-input {
    width: 30% !important;
  }
}

div.hs-input-range-container {
  width: 95%;
}

div.hs-input-range-container div {
  display: inline-block;
  line-height: 50px;
}

div.hs-input-range-container .hs-input-range {
  width: 90%;
  height: 40px;
}

div.hs-input-range-container .hs-input-range>* {
  vertical-align: middle;
}

div.hs-input-range-container .hs-input-range input {
  margin: 0 5px;
  width: 85%;
}

div.hs-input-range-container .hs-input-range-value-container {
  width: 10%;
}

div.hs-input-range-container .hs-input {
  width: 100% !important;
  margin-right: 1px;
  background-color: #fff;
  text-align: center;
}

input.hs-input-range__slider {
  appearance: none;
  margin: 0;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}

input.hs-input-range__slider:focus {
  outline: none;
}

input.hs-input-range__slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-webkit-slider-thumb {
  position: relative;
  appearance: none;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  top: 50%;
  margin-top: -7.5px;
  /* removed box-shadow value due to character limit */
  box-shadow: ;
  transition: background-color 150ms;
}

input.hs-input-range__slider::-moz-range-track,
input.hs-input-range__slider::-moz-range-progress {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #cfcfcf,#cfcfcf) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-moz-range-progress {
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-moz-range-thumb {
  appearance: none;
  margin: 0;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  transition: background-color 150ms;
}

input.hs-input-range__slider::-ms-track {
  width: 100%;
  height: 30px;
  border: 0;
  color: transparent;
  background: transparent;
}

input.hs-input-range__slider::-ms-fill-lower {
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-ms-fill-upper {
  background: linear-gradient(to bottom, #cfcfcf,#cfcfcf) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-ms-thumb {
  appearance: none;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  transition: background-color 150ms;
  top: 0;
  margin: 0;
  box-shadow: none;
}

input.hs-input-range__slider:hover::-webkit-slider-thumb,
input.hs-input-range__slider:focus::-webkit-slider-thumb {
  background-color: #55c2ff;
}

input.hs-input-range__slider:hover::-moz-range-thumb,
input.hs-input-range__slider:focus::-moz-range-thumb {
  background-color: #55c2ff;
}

input.hs-input-range__slider:hover::-ms-thumb,
input.hs-input-range__slider:focus::-ms-thumb {
  background-color: #55c2ff;
}

div.hs-input-rating__container {
  width: 95%;
  margin-bottom: 30px;
  display: table;
  table-layout: fixed;
}

div.hs-input-rating__container section {
  display: table-row;
}

label.hs-input-rating__label {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

label.hs-input-rating__label input,
label.hs-input-rating__label svg {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
}

label.hs-input-rating__label svg {
  position: absolute;
  width: 45px;
  height: 45px;
  fill: #fff;
  stroke: #ccc;
  transform: scale(0.6);
  transition: transform 200ms ease-in-out;
}

label.hs-input-rating__label path {
  transition: fill 200ms ease-in-out,stroke 100ms ease-in-out;
}

div.hs-input-rating__is-star input {
  display: none;
}

svg.hs-input-rating__svg-is-selected {
  transform: scale(0.7);
}

svg.hs-input-rating__svg-is-selected path {
  fill: #f7e31b;
  stroke: #d7c508;
}

form.hs-form .hs-richtext {
  word-break: break-word;
}

form.hs-form.submitted-message {
  overflow: auto;
}

form.hs-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: 500px;
}

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 95%;
}

form.hs-form fieldset.form-columns-1 .input {
  margin-right: 8px;
}

form.hs-form fieldset.form-columns-1 input[type="checkbox"],
form.hs-form fieldset.form-columns-1 input[type="radio"] {
  width: auto;
}

form.hs-form fieldset.form-columns-2 .hs-form-field {
  width: 50%;
  float: left;
}

form.hs-form fieldset.form-columns-2 .input {
  margin-right: 8px;
}

form.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 32.7%;
  float: left;
}

form.hs-form fieldset.form-columns-3 .input {
  margin-right: 8px;
}

form.hs-form label.hs-hidden {
  visibility: hidden;
}

form.hs-form .hs-field-desc {
  width: 100%;
}

form.hs-custom-style fieldset,
form.hs-custom-style .hs-input {
  max-width: 100%;
}

form.hs-custom-style fieldset.form-columns-3 .hs-form-field,
form.hs-custom-style > div.form-columns-3 .hs-form-field {
  width: 33.3%;
}

form.hs-custom-style fieldset > div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]),
form.hs-custom-style > div > div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100%;
  max-width: 100%;
}

form.hs-custom-style fieldset input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
form.hs-custom-style>div input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  box-sizing: border-box;
  padding: 0 15px;
  min-height: 27px;
}

@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
  form.hs-custom-style fieldset,
  form.hs-custom-style .hs-input:not([type=checkbox]):not([type=radio]) {
    margin-right: 0 !important;
    width: 100% !important;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field,
  form.hs-form:not(.hs-video-form) .form-columns-3 div.hs-form-field {
    float: none;
    width: 100%;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 .hs-form-field input.hs-input,
  form.hs-form:not(.hs-video-form) .form-columns-3 .hs-form-field input.hs-input {
    width: 95%;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field input[type="checkbox"],
  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field input[type="radio"],
  form.hs-form:not(.hs-video-form) .form-columns-3 div.hs-form-field input[type="checkbox"],
  form.hs-form-:not(.hs-video-form) .form-columns-3 div.hs-form-field input[type="radio"] {
    width: auto;
  }
}

div.legal-consent-container .field.hs-form-field {
  margin-bottom: 8px;
}

div.legal-consent-container .hs-field-desc.checkbox-desc {
  margin: -12px 0 0 21px;
}

div.legal-consent-container .hs-form-booleancheckbox-display input {
  float: left;
}

div.legal-consent-container .hs-form-booleancheckbox-display>span {
  display: block;
  margin-left: 20px;
}

div.legal-consent-container .hs-form-booleancheckbox-display p {
  margin: 0;
  display: inline;
}

div.legal-consent-container .hs-error-msgs label {
  color: #f2545b;
}

div.legal-consent-container ~ .hs_recaptcha {
  margin-top: 18px;
}

div.cookie-reset-container {
  font-size: 14px;
  margin-bottom: 10px;
  text-align: right;
}

form #hs-outer-captcha-target,
form #hs-outer-captcha-target * {
  display: none;
  height: 0;
  width: 0;
}

div.hubspot-link__container {
  font-size: 14px;
  padding-bottom: 40px;
  position: relative;
  color: #9fa0a2;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

span.hubspot-link-text {
  color: #00a4bd;
  font-weight: 400;
}

div.hubspot-link__container.sproket {
  color: #9fa0a2;
}

a.hubspot-link {
  text-decoration: none;
  color: #9fa0a2;
}

a.hubspot-link:hover {
  text-decoration: none;
}

a.hubspot-link:hover .hubspot-link-text {
  text-decoration: underline;
}

img.hubspot-link__icon {
  margin-bottom: -1px;
  margin-right: 5px;
}

div.hubspot-link__container.sproket .hubspot-link__icon {
  width: 30px;
  margin-right: 0px;
  float: left;
  margin-top: -9px;
  margin-left: -5px;
}

Leland Scanlan

HubSpot Developer Support
6 Réponses
Jon_McLaren
Contributeur de premier rang | Partenaire solutions Platinum
Contributeur de premier rang | Partenaire solutions Platinum

Over-rideable default CSS for unstyled embedded HubSpot forms

lscanlan thanks for posting this, I can see it being pretty helpful.

 

I won't guarantee it will make it in - because I want to get other community members input first, but if you don't mind, maybe we'll add this starter code to CrankShaft.


Here's the github issue:
https://github.com/TheWebTech/CrankShaft/issues/92

 

If you're not familiar with CrankShaft, the readme explains it well.
https://github.com/TheWebTech/CrankShaft

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.
0 Votes
lscanlan
Ancien salarié HubSpot
Ancien salarié HubSpot

Over-rideable default CSS for unstyled embedded HubSpot forms

Hey guys, this is awesome. I'm just glad you find it so useful!

 

@dennisedson No worries at all; keep it where you've got it on GH. Feel free to update it as you see fit, or of course if you want my input feel free to reach out.

 

@Jon_McLaren I have heard of CrankShaft and I think it's excellent. Include it however you want! For what it's worth I think John's comment on the issue you created makes sense.

Leland Scanlan

HubSpot Developer Support
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

Over-rideable default CSS for unstyled embedded HubSpot forms

@lscanlan , that is great!  throw that up onto github so it can easily be updated as necessary and possibly more discoverable? Or at minimum, cast a wider net 🙂

dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

Over-rideable default CSS for unstyled embedded HubSpot forms

@lscanlan , got too excited and added it here: https://github.com/beacondigitalmarketing/hubspotform-overide

 

Will happily transfer ownership if wanted 🙂

Jon_McLaren
Contributeur de premier rang | Partenaire solutions Platinum
Contributeur de premier rang | Partenaire solutions Platinum

Over-rideable default CSS for unstyled embedded HubSpot forms

would be a good idea I think even as a standalone piece to submit to the HubSpot Code Gallery. Though not sure where it would fit as it's currently structured for just custom modules I think.

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.
0 Votes
Kevin-C
Expert reconnu | Partenaire solutions
Expert reconnu | Partenaire solutions

Over-rideable default CSS for unstyled embedded HubSpot forms

Thanks @lscanlan 

 

Awesome resource!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev