Hubspot Form Tests

This page serves as the ongoing place to design and test HubSpot forms on staging.
It will need to be set as a draft before pushing to live.

The background of this page has been changed better show case the forms.

CSS used for Hubspot form styling. It has been added to WP Appearance>Customize>Additional CSS.

.page-id-6981{
	background-color:#ebebeb
}
.hubspot_Wrap_Container{
	background-color:#F6F6F6;
	padding:2%;
	border-radius:5px;
}
:root {
	--hsf-button__background-color:rgba(0,0,0,0);
	--hsf-button__color:#646464;
	--hsf-button__width:100%;
	--hsf-field-input__background-color: #FAFAFA;
	--hsf-field-input__border-color:#AAA;
	--hsf-field-input__border-radius:5px;
}
.hsfc-Button{
	border: solid 1px #999 !important;
	border-radius:100px !important;
}
.hsfc-Button,.hsfc-RadioInput,.hsfc-PhoneInput, .hsfc-TextInput, .hsfc-CheckboxInput, .hsfc-TextareaInput{
	box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 4px 0px!important;
}
.hsfc-Button:hover{
	background-color:#5FA0FF !important;
	color:#fff !important;
}
.hsfc-RadioFieldGroup{
	margin-bottom:1.5em;
}

/*For Mobile - 639px and below */
@media (max-width: 639px) {
 [data-hsfc-id="Renderer"] :is(.hsfc-Row, .hsf-Row) {
  display: flex !important;
  flex-wrap: wrap !important;
}
 [data-hsfc-id="Renderer"]
  :is(.hsfc-Row, .hsf-Row)
  > *:not(:has(input[type="radio"])):not(:has(input[type="checkbox"])) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
 [data-hsfc-id="Renderer"]
  :is(.hsfc-Row, .hsf-Row)
  :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
 [data-hsfc-id="Renderer"] :is(input[type="radio"], input[type="checkbox"]) {
  width: auto !important;
  max-width: none !important;
}
 [data-hsfc-id="Renderer"] label:has(input[type="radio"]),
 [data-hsfc-id="Renderer"] label:has(input[type="checkbox"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: normal !important;
  width: 100% !important;
}
 [data-hsfc-id="Renderer"] label {
  word-break: normal;
  overflow-wrap: anywhere;
}
 [data-hsfc-id="Renderer"] [hidden],
 [data-hsfc-id="Renderer"] [aria-hidden="true"],
 [data-hsfc-id="Renderer"] [style*="display: none"],
 [data-hsfc-id="Renderer"] [style*="display:none"] {
  display: none !important;
}
 [data-hsfc-id="Renderer"]
  :is(.hsfc-Row, .hsf-Row):not(
   :has(> *:not([hidden]):not([aria-hidden="true"]):not([style*="display: none"]):not([style*="display:none"]))
  ) {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
 [data-hsfc-id="Renderer"] :is(.hsfc-Row, .hsf-Row) > *[aria-hidden="true"],
 [data-hsfc-id="Renderer"] :is(.hsfc-Row, .hsf-Row) > *[hidden] {
  margin: 0 !important;
  padding: 0 !important;
}
}

Main Contact Us Form

This form replaces the above the fold form on Contact Us Page.
Upon form submission the page will be redirected to /contact-us/thank-you/

Dev version code below

E-Filing Form

This form replaces the bottom CTAs on the E-Filing page.
Upon form submit, the webpage will be redirected to /e-filing/thank-you/

Dev version code below

SOP Form

This form replaces the bottom CTAs the SOP page.
Upon form submit, the webpage will be redirected to /service-of-process/thank-you/

Dev version code below

Dispute Management Form

This form replaces the bottom CTA on the Dispute Management page.
Upon form submit, the webpage will be redirected to /dispute-management/thank-you/

Dev version code below

Appellate Services Form

This form replaces the bottom CTA on the Appellate Services page.
Upon form submit, the webpage will be redirected to /appellate-services/thank-you/

Dev version code below

Appellate 9th Circuit Form

This form replaces the bottom CTA on the Appellate 9th Circuit CJA Filing page.
Upon form submit, the webpage will be redirected to /appellate-services/9th-circuit-cja-filing/thank-you/

Dev version code below

Start Your 9th Circuit CJA Filing Form

This form replaces the above the fold form on Start Your 9th Circuit CJA page.
Upon form submit, the webpage will be redirected to /appellate-services/9th-circuit-cja-filing/start-your-9th-circuit-cja-filing/thank-you/

Dev version code below

Order Appellate Services Form

This form is the above the fold form on Order Appellate Services page.
Upon form submit, the webpage will be redirected to /appellate-services/order-appellate-services/thank-you/

Dev version code below

Protect (Pacer) Form

This form replaces the bottom CTA on Protect page.
Upon form submit, the webpage will be redirected to /protect/thank-you/

Dev version code below

Become a Process Server

This is a new above the fold form for the Become a Process Server page.
Upon form submit, the webpage will be redirected to /service-of-process/become-a-process-server/thank-you/

Dev version code below

Skip Tracing CTA (NEW!)

This is a new above the fold form for the Skip Tracing Services page.
Upon form submit, the webpage will be redirected to /service-of-process/skip-tracing-services/thank-you/

Dev version code below

Blog – Gated Content CTA (placeholder -> Need form later)

This is a new form that will be placed on blog posts (undetermined which blog post and where on the page) that gates content such as PDF playbooks behind an email sign up. This will most likely be made up of several forms that are based around the various Gated Content campaigns.

Upon form submit, the webpage will be redirected to –> Gated Content.

Dev version code below