<link href="https://scripts.zipteams.com/webwidget/index.css" rel="stylesheet" />
<script type="text/javascript" id="zt-script-loader" async src="https://scripts.zipteams.com/webwidget/index.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "XXXXXXXX", // Replace with your portal ID
formId: "XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX", // Replace with your form ID
cssClass: "zt-hs-form hs-custom-style",
submitButtonClass: "zt-hs-submit-button",
onFormSubmit: function ($form) {
let form = null;
if ($form.tagName === "FORM") {
form = $form;
} else {
form = $form[0];
}
const inputCollection = form.getElementsByTagName("input");
const selectCollection = form.getElementsByTagName("select");
const elemArray = [...inputCollection, ...selectCollection];
// This object should contains value for all questions added in Zipteams Event (Instant / Calendar)
// format should, label - value where label is Label is question configured in Zipteams Event
// {
// "[label]": ""
// }
// Example below:
const prefillObj = {
Name: "",
"School Name": "",
Email: "",
};
// Here fill the prefillObj with the values entered in hubspot form fields
// We need to check for fields with their contact/company property name
// Then we map that to respective key in prefillObj
// Example below
elemArray.map((input) => {
const elemId = (input && input.id) || "";
const elemValue = (input && input.value) || "";
if (elemId.startsWith("firstname")) {
prefillObj["Name"] = elemValue;
}
if (elemId.startsWith("email")) {
prefillObj["Email"] = elemValue;
}
if (elemId.startsWith("name")) {
prefillObj["School Name"] = elemValue;
}
});
window.ZipteamsWidget.InitFullFrame({
url: "https://zipme.at/spyne/onboarding-call-with-spyne",
prefill: prefillObj,
color: "#31667f"
});
},
});
</script>