mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-30 10:19:51 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

PMF Widget UI tweaking

Browse Source
This commit is contained in:
knugget
2023-01-25 12:09:37 +01:00
parent 70346cf1f6
commit a3ef84ba30
3 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/pmfWidget/src/form-html.ts
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"></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>`;

25
packages/pmfWidget/src/form.css
View File

@@ -91,7 +91,6 @@
border-radius: var(--formbricks-button-border-radius);
background-color: var(--formbricks-button-bg-color);
color: var(--formbricks-button-color);
font-weight: var(--formbricks-bold);
cursor: pointer;
transition: all 0.3s ease-out;
}
@@ -102,12 +101,16 @@
width: 100%;
height: 100px;
padding: 0.5rem;
border: 1px solid var(--formbricks-message-border-color);
border: 2px solid var(--formbricks-message-border-color);
border-radius: var(--formbricks-border-radius);
resize: none;
transition: all 0.3s ease-out;
}
.formbricks-textarea:focus {
border-color: var(--formbricks-brand-color);
}
/* Radio */
.formbricks-radio-fieldset {
@@ -130,15 +133,17 @@
text-align: center;
cursor: pointer;
background-color: var(--formbricks-brand-color-transparent);
background: transparent\9;
border: 1px;
border-style: solid;
border-color: var(--formbricks-brand-color);
background: transparent\8;
border: 1px solid var(--formbricks-brand-color);
padding: 5px 10px;
border-radius: var(--formbricks-button-border-radius);
transition: all 0.3s ease-out;
}
.formbricks-radio-label:hover {
background-color: var(--formbricks-brand-color);
}
.formbricks-radio-input:checked + label {
background-color: #58ba83;
}
@@ -172,19 +177,19 @@
display: flex;
flex-shrink: 0;
justify-content: center;
margin: 1rem 0 1rem 0;
margin: 1rem 0 1.5rem 0;
}
.formbricks-progressbar {
display: grid;
height: 0.4rem;
width: 14rem;
height: 0.3rem;
width: 12rem;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.formbricks-progressbar-item {
background-color: var(--formbricks-brand-color-transparent);
width: 2rem;
width: 2.1rem;
height: 100%;
border-radius: 0.25rem;
transition: all 0.3s ease-out;

4
packages/pmfWidget/src/form.html
View File

@@ -60,7 +60,7 @@
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>
<label class="formbricks-radio-label">Product Manager</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" />
@@ -107,7 +107,7 @@
<div id="formbricks-progressbar-wrapper">
<div class="formbricks-progressbar">
<div class="formbricks-progressbar-item formbricks-progressbar-current"></div>
<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>