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