HubSpot form Embed with Custom CSS (and no iframe)

hubspot-form-embed-with-custom-css.html

<style>
/**
 * Start Custom HubSpot form CSS
 */
[data-hs-forms-root] {
  --form-col-gap: 0.75rem;
  --form-row-gap: 1rem;
  
  --form-input-padding-y: 0.75rem;
  --form-input-padding-x: 1rem;
  --form-input-font-family: inherit; 
  --form-input-border-color: #cbd6e2;
  --form-input-border-width: 1px;
  --form-input-border-radius: 3rem;
  --form-input-background: #f5f8fa;
  
  --form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --form-select-bg-img-position: right var(--form-input-padding-x) center;
  --form-select-bg-img-size-width: 16px;
  --form-select-bg-img-size-height: 12px;
  
  --form-button-padding-y: 0.75rem;
  --form-button-padding-x: 1.5rem;
  --form-button-text-color: #000000;
  --form-button-text-color-hover: #FFFFFF;
  --form-button-background: #A3FDA7;
  --form-button-background-hover: #000000;
  --form-button-border-radius: 3rem;
  --form-button-font-weight: 700;
  
  --form-validation-color: #f2545b;
}

[data-hs-forms-root] *{
  box-sizing: border-box;
}

.hs-form{
  container-type: inline-size;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.hs-form.on-dark{
  color: #fff;
}

.hs-form fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Move this here as default state */
  border: 0;
  padding: 0;
  margin: 0 calc((var(--form-col-gap)/2) * -1);
}
.hs-form .hs-form-field,
.hs-form fieldset .hs-form-field{
  margin-bottom: var(--form-row-gap);
  width: 100%; /* Default state is full width */
}
.hs-form fields .hs-form-field{
  padding: 0 calc(var(--form-col-gap) / 2);
}
.hs-richtext{
  padding: 0 calc(var(--form-col-gap) / 2);
}

@container (min-width: 400px) {
  .hs-form fieldset.form-columns-2 .hs-form-field {
    width: 50%;
  }
}

.hs-form-field .inputs-list{
  list-style: none;
  padding: 0;
  margin: var(--form-row-gap) 0;
}

.hs-input:not([type="checkbox"]):not([type="radio"]){
  width: 100%;
  margin-top: 0.25rem;
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  border: var(--form-input-border-width) solid var(--form-input-border-color);
  border-radius: var(--form-input-border-radius);
  font-size: 16px;
  line-height: 1;
  height: calc(16px + (var(--form-input-padding-y) * 2) + (var(--form-input-border-width) * 2));
  background-color: var(--form-input-background);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.hs-input{
  background-image: var(--form-select-bg-img);
  background-repeat: no-repeat;
  background-position: var(--form-select-bg-img-position);
  padding-right: calc((var(--form-input-padding-x) * 2) + var(--form-select-bg-img-size-width));
  background-size: var(--form-select-bg-img-size-width) var(--form-select-bg-img-size-height);
}

.inputs-list label{
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.15;
}

.inputs-list li+li{
  margin-top: 0.25rem;
}

.inputs-list input{
  opacity: 0;
  margin: 0;
  height: 1.15rem;
  width: 1.15rem;
  position: absolute;
  z-index: 0;
}

.inputs-list label span::before,
.inputs-list label span::after{
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  cursor: pointer;
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
}

.inputs-list label span::before{
  z-index: 100;
  background-color: var(--form-input-background);
  border-color: var(--form-input-border-color);
}
.inputs-list label span::after{
  z-index: 110;
  display: none;
}
.hs-form-radio label span::before{
  border-radius: 100%;
}
.hs-form-radio label input + span::after{
  border-radius: 100%;
  background-color: #000;
  height: 8px;
  width: 8px;
  margin: 5px;
}

.hs-form-checkbox label input + span::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position: center center;
}
.inputs-list label input:checked + span::after{
  display: block !important;
}

.hs-input.invalid{
  border-color: var(--form-validation-color) !important;
}

.hs-form-required{
  position: relative;
  left: 0.125rem;
}

.hs-form-required,
.hs-error-msgs,
.hs_error_rollup{
  color: var(--form-validation-color);
}

.hs-error-msgs{
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0 0 !important;
  font-size: 0.9rem;
}
.hs-error-msgs label{
  font-weight: 400;
  margin: 0;
  padding: 0;
}
.hs_error_rollup{
  margin-bottom: var(--form-row-gap);
}

.hs-form .legal-consent-container p{
  font-size: 0.9rem;
  line-height: 1.25;
  margin: 0;
}
.hs-form .legal-consent-container p + p{
  margin-top: var(--form-row-gap);
}

.hs-recaptcha{
  margin: var(--form-row-gap) 0;
}
.hs-recaptcha .grecaptcha-badge{
  box-shadow: none !important;
}

.hs-submit input[type="submit"] {
  border: var(--form-button-border-width) solid var(--form-button-border-color);
  border-radius: var(--form-button-border-radius);
  background: var(--form-button-background);
  color: var(--form-button-text-color);
  padding: var(--form-button-padding-y) var(--form-button-padding-x);
  font-size: var(--form-button-font-size);
  font-weight: var(--form-button-font-weight);
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.hs-submit input[type="submit"]:hover,
.hs-submit input[type="submit"]:focus{
  background: var(--form-button-background-hover);
  color: var(--form-button-text-color-hover);
}
</style>

<script>
/**
 * This can be added globally to the <head> or in another globally loaded JS file (typically works better in the head though).
 */
window.addEventListener('message', (event) => {
	if (event.data.type !== 'hsFormCallback')
		return; 
    
	if (event.data.eventName !== 'onFormReady')
  	return; 
    
  // Removes HubSpot's poorly written <style> blocks -- makes writing CSS much easier.
  document.querySelectorAll('style[id^="hs-form-style"]').forEach(node => node.remove())
});
</script>

<script src="//js-na1.hsforms.net/forms/embed/v2.js"></script>
<script>
/**
 * By adding css: "" to the form embed it will force the form to render in Raw HTML mode (no iframe shell)
 * We also typically recommend using an explicit target element setting explicity, hubspot forms can sometimes render in odd places
 * Note -- the formId and portalId, and region have been updated for a dummy hubspot property they should not change for the existing forms.
 */
hbspt.forms.create({
  region: "na1",
  portalId: "44624500",
  formId: "c55abf4d-52b8-4efa-b318-ad6766b65b5a",
  // cssClass: "on-dark", // This is an optional class that can be applied to change the form to work on darker backgrounds or sections.
  css: "",
  target: "#form-target",
});
</script>

<div id="form-target"></div>