norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
main
Gainsight/Custom_Templates/customer_templates/Nintex University/_pop-up.html.liquid

369 lines
11 KiB
Plaintext
Raw Permalink Blame History

{% assign isFormCompleted = current_person.properties.is_feedback_form_completed %}
<div id="form-overlay" class="overlay">
<div class="overlay-content">
<div class="form-header">
<span class="close-button" onclick="closeForm()">&times;</span>
<div class="pop-up-image-container">
<img
alt="{{ current_school.name }}"
class="pop-up-logo-image"
src="{{ current_school.logo_url }}" />
</div>
<h2>Tell us more!</h2>
<p>Providing more information about your experience can unlock more possibilities with Nintex University.</p>
</div>
<form id="feedback-form">
<div class="form-input-wrapper">
<label for="email">Email*</label>
<input type="email" id="email" name="email" value="{{current_person.email}}" required>
</div>
<div class="form-input-wrapper">
<label for="role">What best describes your role?*</label>
<input type="role" id="role" name="role" required>
</div>
<div class="form-input-wrapper">
<label for="product">Which Nintex product(s) do you work with?*</label>
<select id="product" name="product[]" multiple required size="3" required>
<option value="">Please Select</option>
<option value="nintex_apps">Nintex Apps</option>
<option value="nintex_apps_for_salesforce">Nintex Apps for Salesforce</option>
<option value="nintex_automation_k2">Nintex Automation K2</option>
<option value="nintex_docgen">Nintex DocGen</option>
<option value="nintex_docgen_for_salesforce">Nintex DocGen for Salesforce</option>
<option value="nintex_docgen_for_salesforce_ge">Nintex DocGen for Salesforce GE</option>
<option value="nintex_esign">Nintex eSign</option>
<option value="nintex_for_office_365">Nintex for Office 365</option>
<option value="nintex_for_sharepoint">Nintex for SharePoint</option>
<option value="nintex_k2_cloud">Nintex K2 Cloud</option>
<option value="nintex_partner_sales">Nintex Partner Sales</option>
<option value="nintex_process_manager">Nintex Process Manager</option>
<option value="nintex_rpa">Nintex RPA</option>
<option value="nintex_rpa_le">Nintex RPA LE</option>
<option value="nintex_solutions">Nintex Solutions</option>
<option value="nintex_workflow">Nintex Workflow</option>
<option value="nintex_workflow_ge">Nintex Workflow GE</option>
</select>
</div>
<div class="form-input-wrapper">
<label>Rate your overall experience:*</label>
<div class="star-rating">
<input type="radio" id="star5" name="rating" value="5" required><label for="star5">&#9733;</label>
<input type="radio" id="star4" name="rating" value="4"><label for="star4">&#9733;</label>
<input type="radio" id="star3" name="rating" value="3"><label for="star3">&#9733;</label>
<input type="radio" id="star2" name="rating" value="2"><label for="star2">&#9733;</label>
<input type="radio" id="star1" name="rating" value="1"><label for="star1">&#9733;</label>
</div>
<p class="rating-text">Your rating: <span id="rating-value">0</span></p>
</div>
<div class="form-input-wrapper">
<label>Would you recommend Nintex University to help others learn and adopt Nintex products?*</label>
<div class="radio-group">
<div class="radio-container">
<input type="radio" id="recommend-yes" name="recommend" value="yes" required>
<label for="recommend-yes">Yes</label>
</div>
<div class="radio-container">
<input type="radio" id="recommend-no" name="recommend" value="no">
<label for="recommend-no">No</label>
</div>
</div>
</div>
<div class="form-input-wrapper">
<label for="comments">Additional comments:</label>
<textarea id="comments" name="comments" rows="3" placeholder="Share any thoughts..."></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<button class="open-form" onclick="openForm()"><i class="fas fa-comments-alt"></i></button>
<style>
body.form-open .open-form {
display: none;
}
.pop-up-logo-image {
height: 30px;
}
.open-form {
position: fixed;
bottom: 0;
right: 0;
z-index: 1111;
margin: 30px;
background: #2A348A;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 100px;
font-weight: 600;
width: 60px;
height: 60px;
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.overlay-content {
background: #fff;
color: #000;
border-radius: 13px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.form-header {
background: #3D0456;
color: #fff;
padding: 25px 30px;
border-radius: 10px 10px 0 0;
}
.pop-up-image-container {
}
.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
.overlay form {
display: flex;
flex-direction: column;
padding: 25px 30px;
}
.choices__item, .choices__list--dropdown .choices__list {
color: #000;
}
.choices__list--multiple .choices__item {
height: fit-content;
background-color: #3D0456 !important;
border: 1px solid #3D0456 !important;
}
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
border-left: none !important;
color: white !important;
opacity: 1 !important;
}
.overlay label {
font-weight: 500;
}
.overlay input[type="email"],.overlay input[type="role"],.overlay select,.overlay textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 14px;
}
.overlay
input[type="email"]:focus,.overlay select:focus,
.overlay textarea:focus {
outline: none;
border-color: #3D0456;
box-shadow: 0 0 5px rgba(255,165,0,0.5);
}
button[type="submit"] {
margin-top: 25px;
padding: 12px;
background-color:#3D0456;
color: white;
border: none;
cursor: pointer;
border-radius: 6px;
font-size: 16px;
transition: background-color 0.2s;
}
button[type="submit"]:hover {
background-color: var(--nintex--color--pink-300);
}
.star-rating {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin-top: 5px;
}
.star-rating input {
display: none;
}
.star-rating label {
font-size: 50px;
color: lightgray;
cursor: pointer;
transition: color 0.2s;
width: fit-content;
text-align: center;
height: fit-content;
display: flex;
margin: 0;
}
.rating-text {
margin: 0;
color: gray;
font-size: 0.85rem;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
color: gold;
}
.radio-group {
display: flex;
gap: 20px;
margin-top: 20px;
}
.radio-container {
display: flex;
align-items: center;
gap: 5px;
}
.form-input-wrapper {
margin: 10px 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.choices__inner, .choices__input {
background-color: #fff !important;
}
input[type='radio'] {
accent-color: #000;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script>
const multiSelect = new Choices('#product', {
removeItemButton: true,
searchEnabled: false,
});
</script>
<script>
function openForm() {
document.getElementById("form-overlay").style.display = "flex";
document.body.classList.add("form-open");
}
function closeForm() {
document.getElementById("form-overlay").style.display = "none";
document.body.classList.remove("form-open");
}
function triggerForm() {
const isFormCompleted = '{{current_person.properties.is_feedback_form_completed}}';
console.log(isFormCompleted);
if (isFormCompleted === 'false' || isFormCompleted === '' || isFormCompleted === 'missing property: is_feedback_form_completed') {
openForm();
}
}
addEventListener("DOMContentLoaded", (event) => {
triggerForm();
})
const stars = document.querySelectorAll('.star-rating input');
const ratingValue = document.getElementById('rating-value');
stars.forEach(star => {
star.addEventListener('change', () => {
ratingValue.textContent = star.value;
});
});
</script>
<script>
document.getElementById("feedback-form").addEventListener("submit", async function(e) {
e.preventDefault();
const form = e.target;
const formData = new FormData(form);
const rating = formData.get("rating") ? parseInt(formData.get("rating")) : 0;
const product = formData.getAll("product[]").join(", ");
const payload1 = {
startData: {
se_email: formData.get("email") || "",
se_role: formData.get("role") || "",
se_nintexproduct: product,
se_overallexperience: rating,
se_recommendnintex: formData.get("recommend") || "",
se_additionalcomments: formData.get("comments") || "",
se_id: "{{current_person.id}}"
}
};
const payload2 = {
learner_id: "{{current_person.id}}",
learner_name: "{{current_person.name}}",
learner_email: "{{current_person.email}}",
form_completed: true
};
try {
const response1 = await fetch("https://ninfotech.workflowcloud.com/api/v1/workflow/published/0bb4e2fd-5d7d-40d0-9ab2-385ee8b4fa5a/instances?token=722JxH1yegfjbfEYMstWX2JWUKdK7ueYZB93gPYM6OApZ3Pb2ri94r58xyyO4BPZc3vY3B", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload1)
});
const response2 = await fetch("https://webhooks.workato.com/webhooks/rest/b60a3546-ce72-457f-bfbb-197803be77b8/mark-form-as-completed", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload2)
});
form.reset();
closeForm();
} catch (error) {
console.error(error);
}
});
</script>
Reference in New Issue View Git Blame Copy Permalink