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

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

Legal Research Group

This is a new above the fold form for the Legal Research Group page.
Upon form submit, the webpage will be redirected to /appellate-services/legal-research-group/thank-you/

Dev version code below

E-filing Landing Page

This is a form for the LinkedIn Ad Campaign Landing page.
If “I’m ready to order” is selected, the user will be redirected to https://proceed.legalconnect.com/Login

Dev version code below

SOP Landing Page

This is a form for the LinkedIn Ad Campaign Landing page.
If “I’m ready to order” is selected, the user will be redirected to https://proceed.legalconnect.com/Login

Dev version code below

Gated Content for Lead Magnets

Personal Injury Playbook

This is a new above the fold form for the Personal Injury Playbook form page page.
Upon form submit, the webpage will be redirected to /resources/personal-injury-filing-and-serving-playbook/thank-you/

Dev version code below