mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-08 02:43:06 -05:00
Code Issues Packages Projects Releases 171 Wiki Activity

pmf widget: reset-method, add finished flag, make textareas required

Browse Source
This commit is contained in:
Matthias Nannt
2023-01-25 10:26:46 +01:00
parent 70346cf1f6
commit 4b49dfa6a4
4 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/pmfWidget/src/form-html.ts
+1 -1
View File
@@ -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-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" required></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" required></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" required></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>`;
packages/pmfWidget/src/form.html
+3 -3
View File
@@ -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>
packages/pmfWidget/src/index.ts
+27 -7
View File
@@ -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;