mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-03 03:14:34 -05:00
Merge branch 'main' of https://github.com/formbricks/formbricks into main
This commit is contained in:
knugget
@@ -43,20 +43,6 @@ export default function PmfButton() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <Script src="https://cdn.jsdelivr.net/npm/@formbricks/pmf@0.0.3/dist/index.umd.js" defer />
|
||||
|
||||
<Script id="feedback-setup">{`
|
||||
window.formbricks = {
|
||||
...window.formbricks,
|
||||
config: {
|
||||
formbricksUrl: "http://localhost:3000",
|
||||
formId: "clda6d0ot0000yzikvnnz07lm",
|
||||
containerId: "formbricks-container",
|
||||
style: {
|
||||
brandColor: "#0891b2",
|
||||
},
|
||||
},
|
||||
};`}</Script> */}
|
||||
<div
|
||||
className={clsx(
|
||||
"xs:right-0 xs:top-1/2 xs:w-[26rem] xs:-translate-y-1/2 xs:h-[30rem] fixed bottom-0 z-50 h-96 w-full transition-transform duration-500 ease-in-out",
|
||||
@@ -74,8 +60,7 @@ export default function PmfButton() {
|
||||
if (!isOpen) {
|
||||
if (window) {
|
||||
window.formbricks.init();
|
||||
/* window.formbricks.render();
|
||||
window.formbricks.resetForm(); */
|
||||
window.formbricks.reset();
|
||||
}
|
||||
}
|
||||
setIsOpen(!isOpen);
|
||||
|
||||
@@ -1 +1 @@
|
||||
export const formHtml = `<div id="formbricks-content"><div id="formbricks-form"><div class="formbricks-element" id="formbricks-question-0"><p class="formbricks-element-label">How disappointed would you be if you could no longer use our service?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Disappointment options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="veryDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">very disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="somehowDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">somewhat disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="notDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">not disappointed</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-1"><p class="formbricks-element-label">What is the main benefit you receive from our service?</p><form class="formbricks-form" data-element-name="benefit"><textarea rows="4" name="benefit" class="formbricks-textarea"></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-2"><p class="formbricks-element-label">What is your job title?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Job title options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="founder"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Founder</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="executive"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Executive</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="productManager"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">ProductManager</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="productOwner"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Product Owner</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="softwareEngineer"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Software Engineer</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-3"><p class="formbricks-element-label">How can we improve our service for you?</p><form class="formbricks-form" data-element-name="howImprove"><textarea rows="4" name="howImprove" class="formbricks-textarea"></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-4"><p class="formbricks-element-label">What type of people would benefit most from using our service?</p><form class="formbricks-form" data-element-name="idealCustomer"><textarea rows="4" name="idealCustomer" class="formbricks-textarea"></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Submit</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-5"><p class="formbricks-thankyou-icon">❤️</p><p class="formbricks-thankyou-title">Thank you!</p><p class="formbricks-thankyou-subtitle">Your feedback helps us improve our service for you.</p></div></div></div><div id="formbricks-progressbar-wrapper"><div class="formbricks-progressbar"><div class="formbricks-progressbar-item formbricks-progressbar-item-current"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div></div></div>`;
|
||||
export const formHtml = `<div id="formbricks-content"><div id="formbricks-form"><div class="formbricks-element" id="formbricks-question-0"><p class="formbricks-element-label">How disappointed would you be if you could no longer use our service?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Disappointment options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="veryDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">very disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="somehowDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">somewhat disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="notDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">not disappointed</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-1"><p class="formbricks-element-label">What is the main benefit you receive from our service?</p><form class="formbricks-form" data-element-name="benefit"><textarea rows="4" name="benefit" class="formbricks-textarea"></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-2"><p class="formbricks-element-label">What is your job title?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Job title options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="founder"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Founder</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="executive"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Executive</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="productManager"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">ProductManager</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="productOwner"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Product Owner</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="softwareEngineer"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Software Engineer</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-3"><p class="formbricks-element-label">How can we improve our service for you?</p><form class="formbricks-form" data-element-name="howImprove"><textarea rows="4" name="howImprove" class="formbricks-textarea"></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-4"><p class="formbricks-element-label">What type of people would benefit most from using our service?</p><form class="formbricks-form" data-element-name="idealCustomer"><textarea rows="4" name="idealCustomer" class="formbricks-textarea"></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Submit</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-5"><p class="formbricks-thankyou-icon">❤️</p><p class="formbricks-thankyou-title">Thank you!</p><p class="formbricks-thankyou-subtitle">Your feedback helps us improve our service for you.</p></div></div></div><div id="formbricks-progressbar-wrapper"><div class="formbricks-progressbar"><div class="formbricks-progressbar-item formbricks-progressbar-current"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div></div></div>`;
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="formbricks-element formbricks-hidden" id="formbricks-question-1">
|
||||
<p class="formbricks-element-label">What is the main benefit you receive from our service?</p>
|
||||
<form class="formbricks-form" data-element-name="benefit">
|
||||
<textarea rows="4" name="benefit" class="formbricks-textarea"></textarea>
|
||||
<textarea rows="4" name="benefit" class="formbricks-textarea" required></textarea>
|
||||
<div class="formbricks-next-button-wrapper">
|
||||
<button type="submit" class="formbricks-next-button">Next</button>
|
||||
</div>
|
||||
@@ -80,7 +80,7 @@
|
||||
<div class="formbricks-element formbricks-hidden" id="formbricks-question-3">
|
||||
<p class="formbricks-element-label">How can we improve our service for you?</p>
|
||||
<form class="formbricks-form" data-element-name="howImprove">
|
||||
<textarea rows="4" name="howImprove" class="formbricks-textarea"></textarea>
|
||||
<textarea rows="4" name="howImprove" class="formbricks-textarea" required></textarea>
|
||||
<div class="formbricks-next-button-wrapper">
|
||||
<button type="submit" class="formbricks-next-button">Next</button>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
<div class="formbricks-element formbricks-hidden" id="formbricks-question-4">
|
||||
<p class="formbricks-element-label">What type of people would benefit most from using our service?</p>
|
||||
<form class="formbricks-form" data-element-name="idealCustomer">
|
||||
<textarea rows="4" name="idealCustomer" class="formbricks-textarea"></textarea>
|
||||
<textarea rows="4" name="idealCustomer" class="formbricks-textarea" required></textarea>
|
||||
<div class="formbricks-next-button-wrapper">
|
||||
<button type="submit" class="formbricks-next-button">Submit</button>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@ const config: FormbricksConfig = {
|
||||
...(window as any).formbricks?.config,
|
||||
};
|
||||
|
||||
const submission: any = {};
|
||||
let submission: any = {};
|
||||
let currentElementIdx = 0;
|
||||
let submissionId: null | string = null;
|
||||
|
||||
@@ -91,6 +91,22 @@ function applyConfig() {
|
||||
}
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
submission = {};
|
||||
currentElementIdx = 0;
|
||||
submissionId = null;
|
||||
|
||||
const questionElements = Array.from(
|
||||
formContainer.getElementsByClassName("formbricks-element") as HTMLCollectionOf<HTMLFormElement>
|
||||
);
|
||||
questionElements.forEach((el) => {
|
||||
if (!el.classList.contains("formbricks-hidden")) {
|
||||
el.classList.add("formbricks-hidden");
|
||||
}
|
||||
});
|
||||
questionElements[0].classList.remove("formbricks-hidden");
|
||||
}
|
||||
|
||||
async function submitElement(name?: string, value?: string) {
|
||||
if (!name || !value) {
|
||||
throw new Error('Missing "name" or "value"');
|
||||
@@ -104,7 +120,7 @@ async function submitElement(name?: string, value?: string) {
|
||||
const response = await createSubmission(submission);
|
||||
submissionId = response.id;
|
||||
} else {
|
||||
await updateSubmission(submissionId, submission);
|
||||
await updateSubmission(submissionId, submission, !!("idealCustomer" in submission));
|
||||
}
|
||||
|
||||
// loading indication end
|
||||
@@ -143,10 +159,16 @@ async function createSubmission(submission: any) {
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function updateSubmission(submissionId: string, submission: any) {
|
||||
async function updateSubmission(submissionId: string, submission: any, finished: boolean = false) {
|
||||
if (!config.formId) {
|
||||
throw new Error("Missing formId");
|
||||
}
|
||||
const body: any = {
|
||||
data: submission,
|
||||
};
|
||||
if (finished) {
|
||||
body["finished"] = true;
|
||||
}
|
||||
const response = await fetch(
|
||||
`${config.formbricksUrl}/api/capture/forms/${config.formId}/submissions/${submissionId}`,
|
||||
{
|
||||
@@ -154,15 +176,13 @@ async function updateSubmission(submissionId: string, submission: any) {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
data: submission,
|
||||
}),
|
||||
body: JSON.stringify(body),
|
||||
}
|
||||
);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
const formbricks = { init, config };
|
||||
const formbricks = { init, reset, config };
|
||||
(window as any).formbricks = formbricks;
|
||||
|
||||
export default formbricks;
|
||||
|
||||
Reference in New Issue
Block a user