Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add cloud form & fix css #11362

Merged
merged 2 commits into from
Sep 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,28 +1,23 @@
#hubspotForm {
text-align: left;
}

#hubspotForm .input {
margin: 0;
.hs-input {
width: 100% !important;
}

#hubspotForm .hs-form input,
#hubspotForm .hs-form select,
#hubspotForm .hs-form textarea {
.hs-form input,
.hs-form select,
.hs-form textarea {
border: .5px solid #DDD;
background-color: #FFF;
padding: .75rem 1rem;
margin: 0.4rem auto;
border-radius: 8px;
font-size: 16px;
width: 100%;
}

#hubspotForm .hs-form ::placeholder {
.hs-form ::placeholder {
font-style: Manrope;
}

#hubspotForm .hs-form input[type="submit"] {
.hs-form input[type="submit"] {
background-color: #1990FF;
color: #fff;
border: none;
Expand All @@ -34,45 +29,46 @@
width: 100px;
}

#hubspotForm .hs-form input[type="submit"]:hover {
.hs-form input[type="submit"]:hover {
background-color: #0056b3; /* Button hover color */
}

/* hide the label */

#hubspotForm .hs-form label span {
.hs-form label span {
display: none;
}

/* error labels */

#hubspotForm .hs-form .hs-error-msgs {
.hs-form .hs-error-msgs {
font-size: 15px;
color: red;
list-style-type: none;
padding: 0;
text-align: left;
}

#hubspotForm .hs-form .error {
.hs-form .error {
border: red 1.5px solid !important;
}

/* customize placeholder style */

#hubspotForm .hs-form input::placeholder,
#hubspotForm .hs-form textarea::placeholder,
#hubspotForm .hs-form textarea {
.hs-form input::placeholder,
.hs-form textarea::placeholder,
.hs-form textarea {
font-size: 16px;
font-weight: 400;
font-family: sans-serif;
color: gray;
}

#hubspotForm .hs-form .hs_firstname {
.hs-form .hs_firstname {
padding-right: 0.5rem;
}

#hubspotForm .hs-form .hs_lastname {
.hs-form .hs_lastname {
padding-left: 0.5rem;
}

94 changes: 94 additions & 0 deletions docs-website/src/pages/cloud/DemoForm/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React, { useEffect } from 'react';
import clsx from "clsx";
import Link from "@docusaurus/Link";
import styles from "./styles.module.scss";
import ScrollingCustomers from '../CompanyLogos';
import './hubspotFormStyles.css';

const DemoForm = ({ formId }) => {
useEffect(() => {
const formContainerId = `hubspotForm-${formId}`;

const initializeHubspotForm = () => {
if (!document.querySelector(`#${formContainerId} .hs-form`)) {
window.hbspt.forms.create({
region: "na1",
portalId: "14552909",
formId: "ed2447d6-e6f9-4771-8f77-825b114a9421",
target: `#${formContainerId}`,
});

setTimeout(() => {
const emailInput = document.querySelector(`#${formContainerId} .hs_email .input > input`);
const firstNameInput = document.querySelector(`#${formContainerId} .hs_firstname .input > input`);
const lastNameInput = document.querySelector(`#${formContainerId} .hs_lastname .input > input`);
const phoneInput = document.querySelector(`#${formContainerId} .hs_phone .input > input`);
const additionalInfoInput = document.querySelector(`#${formContainerId} .hs_additional_info .input > textarea`);

if (emailInput) emailInput.placeholder = 'Company Email';
if (firstNameInput) firstNameInput.placeholder = 'First Name';
if (lastNameInput) lastNameInput.placeholder = 'Last Name';
if (phoneInput) phoneInput.placeholder = 'Phone Number';
if (additionalInfoInput) additionalInfoInput.placeholder = 'How can we help?';

const selectNoEElement = document.getElementById(`number_of_employees-ed2447d6-e6f9-4771-8f77-825b114a9421`);
if (selectNoEElement) {
const disabledOption = selectNoEElement.querySelector('option[disabled]');
if (disabledOption) {
disabledOption.text = "Select Number of Employees";
disabledOption.value = "";
}
}
const selectfamiliarityElement = document.getElementById(`familiarity_with_acryl_datahub-ed2447d6-e6f9-4771-8f77-825b114a9421`);
if (selectfamiliarityElement) {
const disabledOption = selectfamiliarityElement.querySelector('option[disabled]');
if (disabledOption) {
disabledOption.text = "How familiar are you with DataHub?";
disabledOption.value = "";
}
}
}, 1000); // Delay to ensure the form is fully loaded

window.hero = new RevenueHero({ routerId: '982' });
window.hero.schedule('hsForm_ed2447d6-e6f9-4771-8f77-825b114a9421');
}
};

if (!window.hbspt) {
const script = document.createElement('script');
script.src = "//js.hsforms.net/forms/embed/v2.js";
script.async = true;
script.type = 'text/javascript';
document.body.appendChild(script);

script.onload = () => {
initializeHubspotForm();
};
} else {
initializeHubspotForm();
}

return () => {
const hubspotForm = document.querySelector(`#${formContainerId} .hs-form`);
if (hubspotForm) {
hubspotForm.remove();
}
};
}, [formId]);

return (
<div className={clsx(styles.formContainer)}>
<div className={clsx(styles.formContent)}>
<div className={clsx(styles.formHeader)}>
<div className={clsx(styles.formTitle)}>Book a free Demo</div>
<div className={clsx(styles.formSubtitle)}>
Schedule a personalized demo and get a free a trial.
</div>
</div>
<div id={`hubspotForm-${formId}`} className={styles.hubspotForm}></div> {/* Use unique ID */}
</div>
</div>
);
};

export default DemoForm;
55 changes: 55 additions & 0 deletions docs-website/src/pages/cloud/DemoForm/styles.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.col {
padding: 0 2rem;
}

.formContainer {
padding: 2rem;
margin: 0 auto;
background-color:#F3F3F3;
border: 1px solid #DDD;
align-items: center;
max-width: 540px;
border-radius: 16px;

.formContent {
width: 90%;
margin: 0 auto;
}

.formHeader {
justify-content: space-between;
text-align: left;

.formTitle {
font-size: 24px;
font-weight: 600;
color: #000;
line-height: 28px;
margin-bottom: 12px;
}

.formSubtitle {
font-size: 14px;
color: #666;
line-height: 14px;
margin-bottom: 8px;
}
}

}

.bookButton {
display: none;
}

@media screen and (max-width: 999px) {
.bookButton {
display: block;
}
.formContainer {
display: none;
}
.productTourButton {
text-align: center!important;
}
}
73 changes: 2 additions & 71 deletions docs-website/src/pages/cloud/Hero/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,68 +3,9 @@ import clsx from "clsx";
import Link from "@docusaurus/Link";
import styles from "./styles.module.scss";
import ScrollingCustomers from '../CompanyLogos';
import './hubspotFormStyles.css';
import DemoForm from '../DemoForm';

const Hero = () => {
useEffect(() => {
const script = document.createElement('script');
script.src = "//js.hsforms.net/forms/embed/v2.js";
script.async = true;
script.type = 'text/javascript';
document.body.appendChild(script);

script.onload = () => {
if (window.hbspt) {
window.hbspt.forms.create({
region: "na1",
portalId: "14552909",
formId: "ed2447d6-e6f9-4771-8f77-825b114a9421",
target: '#hubspotForm',
});

// Modify placeholders after the form has loaded
setTimeout(() => {
const emailInput = document.querySelector('#hubspotForm .hs_email .input > input');
const firstNameInput = document.querySelector('#hubspotForm .hs_firstname .input > input');
const lastNameInput = document.querySelector('#hubspotForm .hs_lastname .input > input');
const phoneInput = document.querySelector('#hubspotForm .hs_phone .input > input');
const additionalInfoInput = document.querySelector('#hubspotForm .hs_additional_info .input > textarea');

if (emailInput) emailInput.placeholder = 'Company Email';
if (firstNameInput) firstNameInput.placeholder = 'First Name';
if (lastNameInput) lastNameInput.placeholder = 'Last Name';
if (phoneInput) phoneInput.placeholder = 'Phone Number';
if (additionalInfoInput) additionalInfoInput.placeholder = 'How can we help?';

const selectNoEElement = document.getElementById("number_of_employees-ed2447d6-e6f9-4771-8f77-825b114a9421");
if (selectNoEElement) {
const disabledOption = selectNoEElement.querySelector('option[disabled]');
if (disabledOption) {
disabledOption.text = "Select Number of Employees";
disabledOption.value = "";
}
}
const selectfamiliarityElement = document.getElementById("familiarity_with_acryl_datahub-ed2447d6-e6f9-4771-8f77-825b114a9421");
if (selectfamiliarityElement) {
const disabledOption = selectfamiliarityElement.querySelector('option[disabled]');
if (disabledOption) {
disabledOption.text = "How familiar are you with DataHub?";
disabledOption.value = "";
}
}

}, 1000); // Delay to ensure the form is fully loaded

window.hero = new RevenueHero({ routerId: '982' });
window.hero.schedule('hsForm_ed2447d6-e6f9-4771-8f77-825b114a9421');
}
};

return () => {
document.body.removeChild(script);
};
}, []);

return (
<header className={clsx("hero", styles.hero)}>
<div className="container">
Expand All @@ -87,17 +28,7 @@ const Hero = () => {
<ScrollingCustomers />
</div>
<div className={clsx(styles.col, "col col--5")}>
<div className={clsx(styles.formContainer)}>
<div className={clsx(styles.formContent)}>
<div className={clsx(styles.formHeader)}>
<div className={clsx(styles.formTitle)}>Book a free Demo</div>
<div className={clsx(styles.formSubtitle)}>
Schedule a personalized demo and get a free a trial.
</div>
</div>
<div id="hubspotForm" className={styles.hubspotForm}></div>
</div>
</div>
<DemoForm formId="heroForm" />
</div>
</div>
</div>
Expand Down
40 changes: 1 addition & 39 deletions docs-website/src/pages/cloud/Hero/styles.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,42 +52,6 @@
justify-content: flex-start;
}

.formContainer {
padding: 2rem;
margin: 0 auto;
background-color:#F3F3F3;
border: 1px solid #DDD;
align-items: center;
max-width: 540px;
border-radius: 16px;

.formContent {
width: 90%;
margin: 0 auto;
}

.formHeader {
justify-content: space-between;
text-align: left;

.formTitle {
font-size: 24px;
font-weight: 600;
color: #000;
line-height: 28px;
margin-bottom: 12px;
}

.formSubtitle {
font-size: 14px;
color: #666;
line-height: 14px;
margin-bottom: 8px;
}
}

}

.bookButton {
display: none;
}
Expand All @@ -96,9 +60,7 @@
.bookButton {
display: block;
}
.formContainer {
display: none;
}

.productTourButton {
text-align: center!important;
}
Expand Down
Loading
Loading