Embed demo form to Code-Insights pg

[st0nebreaker]

Closes #5235 by embedding new HubSpot Request Demo form

Test

Navigate to /code-insights and ensure new form meets requirements

BEFORE

AFTER

[sourcegraph-bot]

Notifying subscribers in CODENOTIFY files for diff d0ba84d...300d97a.

Notify	File(s)
@sourcegraph/marketing	website/src/pages/code-insights.tsx

[bretthayes]

This looks good, but is the form also supposed to be in the hero, replacing the request a demo button? Seems like the ticket request mentions implementing the forms similar to the dev onboarding page. Might be a good idea to confirm this with @elzannewentzel.

[st0nebreaker]

This looks good, but is the form also supposed to be in the hero, replacing the request a demo button? Seems like the ticket request mentions implementing the forms similar to the dev onboarding page. Might be a good idea to confirm this with @elzannewentzel.

Hmm, yea it's probably wanted for both "Request demo" button spots on the page. Updated! 👍 @bretthayes

[bretthayes]

Sweet, meets the ticket requirements! Thanks @st0nebraker!

Just need a +1 from @elzannewentzel before merging.

[elzannewentzel]

+1 from me, will send for stakeholder review! :)

Just noting the error messages here, I don't think we have control over this but the duplication should be fixed.

[st0nebreaker]

+1 from me, will send for stakeholder review! :)

Just noting the error messages here, I don't think we have control over this but the duplication should be fixed.

So I think they're technically 2 separate error messages. One triggers if you click past a required field without filling it out, or with improper format. The second error is for the submission button, indicating why the submission is blocked. The phrasing is just pretty generic, and with only one field in the form, it is unclear and a bit bad UX, I agree. We can't change it, yea, HubSpot has the controls.

[elzannewentzel]

@st0nebraker Can you have a look at the form duplication in the header, please?

[elzannewentzel]

@st0nebraker For the errors, Greg had a look and Hubspot does not seem to have a lot of flexibility around the errors. He suggested trying this to hide one of the errors.
The first one can be hidden by adding something like the below example to the page's style sheet:
.hs_error_rollup {
display: none;
}"
Can you try this and see if it works? It's probably styling we would need to consider for all these forms.

[st0nebreaker]

@st0nebraker Can you have a look at the form duplication in the header, please?

Hi @elzannewentzel , the duplication has to do with a quirk in our staging environment. Is that right, @bretthayes ? A few weeks back Brett was having this issue, but the form was fine on local and prod.

Looking into hiding the hs_error_rollup! I agree, just hiding that will be helpful for all our forms. Checking in with Greg because I think HubSpot needs to remove default styling to allow us to override, referencing this thread

[st0nebreaker]

Is this PR approved by QA otherwise @elzannewentzel ? The form error enhancement will take more digging as it can't be styled in our repo, it has to be done on HubSpot itself. I made a follow-up story to bring this enhancement in later. It's not technically a bug but an enhancement since this is expected behavior of the form.

[elzannewentzel]

@st0nebraker Yes approved otherwise, thank you for checking!

[bretthayes]

For context, we can't style or add style overrides to our HubSpot forms directly with CSS in the codebase or any content inside iframe elements that live outside our domain because it's an XSS cross-site-scripting issue. The only way we'll be able to style forms is to modify the global HubSpot stylesheet that lives on HubSpot or use the very limited styling abilities in HubSpot's form builder.

Another option would be to leverage building custom forms/form components and use the HubSpot API, but that has a bigger scope. It would be nice to have prettier forms in the future. ✨

cc: @st0nebraker @elzannewentzel