Skip to content

Instantly share code, notes, and snippets.

@andybala2020

andybala2020/KendoUI_Survey_Example.html

Created December 30, 2016 08:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andybala2020/6e894145562ff2c64cc4736f3c21e158 to your computer and use it in GitHub Desktop.
Save andybala2020/6e894145562ff2c64cc4736f3c21e158 to your computer and use it in GitHub Desktop.
Download ZIP
KendoUI Survey Example for Rollbase
Raw
KendoUI_Survey_Example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progress Exchange Mumbai - Feedback</title>
<link rel="stylesheet" href="http://progress.telerik-web-assets.com/css/style.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<!-- header -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-24">
<span class=" -c-white PRGS-Nav-progress-logo">Progress</span>
</div>
</div>
</div>
</div>
<!-- /header -->
<div class="container">
<!-- row1 -->
<div class="row">
<div class="col-24">
<hr class="hr--nature hr--double">
</div>
</div>
<!-- /row1 -->
<!-- row2 -->
<div class="row">
<div class="col-24">
<h6 class="-tdu -c-white">Thank you for attending Progress Exchange@ Mumbai on Nov 10 2016. Please take a moment to complete this evaluation form so that we may incorporate your feedback in the future.</h6>
</div>
</div>
<!-- /row2 -->
<!-- row3 -->
<div class="row">
<div class="col-24">
<hr class="hr--nature hr--double">
</div>
</div>
<!-- /row3 -->
<div class="row">
<div class="col-24">
<form id="frmSurvey" onsubmit="return false" data-bind="invisible:surveySubmitted">
<!-- row4 -->
<div class="row">
<div class="col-24">
<div class="Box -bg-grey1">
<div class="row -vs1">
<div class="col-12 -vs1">
<label for="name">Name</label>
<input class="k-textbox" type="text" id="name" name="name" placeholder="e.g. Suresh Nair" data-bind="value: name"/>
</div>
<div class="col-12 -vs1">
<label for="designation">Designation</label>
<input class="k-textbox" type="text" id="designation" name="designation" placeholder="e.g. CEO" data-bind="value: designation"/>
</div>
</div>
<div class="row -vs1">
<div class="col-12 -vs1">
<label for="company">Company</label>
<input class="k-textbox" type="text" id="company" name="company" placeholder="e.g. Progress Software" data-bind="value: company"/>
</div>
<div class="col-12 -vs1">
<label for="telephone">Telephone *</label>
<input class="k-textbox" type="tel" id="telephone" class="telephone" required placeholder="e.g. 8975642310" validationMessage="Telephone is required" data-bind="value: telephone" />
<span class="k-invalid-msg" data-for="telephone"></span>
</div>
</div>
<div class="row -vs1">
<div class="col-12 -vs1">
<label for="email">Work E-mail *</label>
<input class="k-textbox" type="email" id="email" name="email" required placeholder="e.g you@yourcompany.com" validationMessage="Work E-mail is required" data-bind="value: workEmail" />
<span class="k-invalid-msg" data-for="email"></span>
</div>
</div>
</div>
</div>
</div>
<!-- /row4 -->
<div class="row"><div class="col-24">&nbsp;</div></div>
<!-- row5 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">1. DID YOU ATTEND THIS EVENT</h6>
<input type="radio" name="eventAttended" value="Yes" data-bind="checked:eventAttended" id="eventAttendedYes" />
<label for="eventAttendedYes" class="-c-white">Yes</label>
<input type="radio" name="eventAttended" value="No" data-bind="checked:eventAttended" id="eventAttendedNo" />
<label for="eventAttendedNo" class="-c-white">No</label>
</div>
</div>
</div>
<!-- /row5 -->
<!-- row6 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">2. What is the primary nature of your business?</h6>
<select data-bind="value: primaryBusiness" style="width:100%">
<option value="Enterprise">End User of applications in your organization - Enterprise</option>
<option value="SI">Build projects for some other organization – SI</option>
<option value="ISV">Build products for sale in market – ISV</option>
</select>
</div>
</div>
</div>
<!-- /row6 -->
<!-- row7 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">3. IN WHICH OF THE FOLLOWING INDUSTRIES DO YOUR CUSTOMERS PRIMARILY OPERATE? (SELECT ALL THAT APPLY.)</h6>
<div class="row -vs1">
<div class="col-8">
<input type="checkbox" id="Banking" value="Banking" data-bind="checked: customerIndustry" />
<label for="Banking" class="-c-white">Banking</label>
<br>
<input type="checkbox" id="Construction" value="Construction" data-bind="checked: customerIndustry" />
<label for="Construction" class="-c-white">Construction</label>
<br>
<input type="checkbox" id="ECommerce" value="ECommerce" data-bind="checked: customerIndustry" />
<label for="ECommerce" class="-c-white">ECommerce</label>
<br>
<input type="checkbox" id="Education" value="Education" data-bind="checked: customerIndustry" />
<label for="Education" class="-c-white">Education</label>
<br>
<input type="checkbox" id="FMCG" value="Fast Moving Consumer Goods" data-bind="checked: customerIndustry" />
<label for="FMCG" class="-c-white">Fast Moving Consumer Goods</label>
</div>
<div class="col-8">
<input type="checkbox" id="Business" name="Business" value="Business/Professional Services" data-bind="checked:customerIndustry" />
<label for="Business" class="-c-white">Business/Professional Services</label>
<br>
<input type="checkbox" id="Finance" name="Finance" value="Finance" data-bind="checked:customerIndustry" />
<label for="Finance" class="-c-white">Finance</label>
<br>
<input type="checkbox" id="Food and Beverage" name="Food and Beverage" value="Food and Beverage" data-bind="checked:customerIndustry" />
<label for="Food and Beverage" class="-c-white">Food and Beverage</label>
<br>
<input type="checkbox" id="Government" name="Government" value="Government" data-bind="checked:customerIndustry" />
<label for="Government" class="-c-white">Government</label>
<br>
<input type="checkbox" id="Healthcare" name="Healthcare" value="Healthcare" data-bind="checked:customerIndustry" />
<label for="Healthcare" class="-c-white">Healthcare</label>
</div>
<div class="col-8">
<input type="checkbox" name="ConsumerGoods" id="ConsumerGoods" data-bind="checked:customerIndustry" value="Consumer Goods" />
<label for="ConsumerGoods" class="-c-white">Consumer Goods</label>
<br>
<input type="checkbox" name="Insurance" id="Insurance" data-bind="checked:customerIndustry" value="Insurance" />
<label for="Insurance" class="-c-white">Insurance</label>
<br>
<input type="checkbox" name="Manufacturing" id="Manufacturing" data-bind="checked:customerIndustry" value="Manufacturing" />
<label for="Manufacturing" class="-c-white">Manufacturing</label>
<br>
<input type="checkbox" name="Property" id="Property" data-bind="checked:customerIndustry" value="Property" />
<label for="Property" class="-c-white">Property</label>
</div>
<div class="col-8">
<input type="checkbox" name="Retail and Distribution" id="Retail and Distribution" data-bind="checked:customerIndustry" value="Retail and Distribution" />
<label for="Retail and Distribution" class="-c-white">Retail and Distribution</label>
<br>
<input type="checkbox" name="Technology" id="Technology" data-bind="checked:customerIndustry" value="Technology" />
<label for="Technology" class="-c-white">Technology</label>
<br>
<input type="checkbox" name="Travel" id="Travel" data-bind="checked:customerIndustry" value="Travel" />
<label for="Travel" class="-c-white">Travel</label>
<br>
<input type="checkbox" name="Other" id="Other" data-bind="checked:customerIndustry" value="Other" />
<label for="Other" class="-c-white">Other</label>
</div>
</div>
</div>
</div>
</div>
<!-- /row7 -->
<!-- row8 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">4. WHICH OF THE FOLLOWING BEST DESCRIBE YOUR ROLE IN THE ORGANIZATION?</h6>
<div class="row -vs1">
<div class="col-24">
<input type="checkbox" id="CEO" name="CEO" value="CEO/COO/VP/Business Decision Maker" data-bind="checked: role" />
<label for="CEO" class="-c-white">CEO/COO/VP/Business Decision Maker</label>
<br>
<input type="checkbox" id="CIO" name="CIO" value="Chief IT Officer / CIO / CTO/ VP/ Head of IT" data-bind="checked:role" />
<label for="CIO" class="-c-white">Chief IT Officer / CIO / CTO/ VP/ Head of IT</label>
<br>
<input type="checkbox" name="CMO" id="CMO" value="Chief Marketing Officer / CMO / Marketing Director / Marketing Head" data-bind="checked:role" />
<label for="CMO" class="-c-white">Chief Marketing Officer / CMO / Marketing Director / Marketing Head</label>
<br>
<input type="checkbox" name="IT Director" id="IT Director" value="IT Director/ Manager, Line of Business Manager, Development Lead" data-bind="checked:role" />
<label for="IT Director" class="-c-white">IT Director/ Manager, Line of Business Manager, Development Lead</label>
<br>
<input type="checkbox" name="Developer" id="Developer" value="Developer / IT Architect / Systems Analyst / Engineer / Technical lead" data-bind="checked:role" />
<label for="Developer" class="-c-white">Developer / IT Architect / Systems Analyst / Engineer / Technical lead</label>
<br>
<input type="checkbox" name="Digital" id="Digital" value="Head of Digital / Chief Digital Officer" data-bind="checked:role" />
<label for="Digital" class="-c-white">Head of Digital / Chief Digital Officer</label>
<br>
<input type="checkbox" name="Sales" id="Sales" value="Head of Sales / Business Development Lead" data-bind="checked:role" />
<label for="Sales" class="-c-white">Head of Sales / Business Development Lead</label>
</div>
</div>
</div>
</div>
</div>
<!-- /row8 -->
<div>
<div>&nbsp;</div>
</div>
<!-- row9 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">5. WHAT ARE THE KEY PRIORITIES FOR YOUR ORGANIZATION IN THE NEXT 12 MONTHS? (SELECT ALL THAT APPLY)</h6>
<div class="row -vs1">
<div class="col-24">
<input type="checkbox" id="1" name="1" value="Improve customer experience" data-bind="checked: priorities" />
<label for="1" class="-c-white">Improve customer experience</label>
<br />
<input type="checkbox" id="2" name="RevStreams" value="Uncover new revenue streams" data-bind="checked:priorities" />
<label for="2" class="-c-white">Uncover new revenue streams</label>
<br />
<input type="checkbox" name="3" id="3" value="Expand brand awareness/market dominance" data-bind="checked:priorities" />
<label for="3" class="-c-white">Expand brand awareness/market dominance </label>
<br />
<input type="checkbox" name="4" id="4" value="Improve product service and support options" data-bind="checked:priorities" />
<label for="6" class="-c-white">Improve product service and support options</label>
<br />
<input type="checkbox" name="5" id="5" value="Boost operational efficiency (e.g. delivery)" data-bind="checked:priorities" />
<label for="7" class="-c-white">Boost operational efficiency (e.g. delivery)</label>
<br />
<input type="checkbox" name="6" id="6" value="Expand market reach – new age groups, new geographies, new sectors" data-bind="checked:priorities" />
<label for="8" class="-c-white">Expand market reach – new age groups, new geographies, new sectors</label>
<br />
</div>
</div>
</div>
</div>
</div>
<!-- /row9 -->
<div>
<div>&nbsp;</div>
</div>
<!-- row10 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">6. WHAT INITIATIVES ARE YOU FOCUSED ON TO ACHIEVE THESE PRIORITIES FOR COMPETITIVE DIFFERENTIATION? (SELECT ALL THAT APPLY)</h6>
<div class="row -vs1">
<div class="col-24">
<input type="checkbox" id="initia1" name="initia1" value="Shorten time to market / improve speed of delivery" data-bind="checked: initiatives" />
<label for="initia1" class="-c-white">Shorten time to market / improve speed of delivery</label>
<br />
<input type="checkbox" id="initia2" name="initia2" value="Improve digital presence" data-bind="checked:initiatives" />
<label for="initia2" class="-c-white">Improve digital presence</label>
<br />
<input type="checkbox" name="initia3" id="initia3" value="Improve business agility / ability to respond to customer or market changes" data-bind="checked:initiatives" />
<label for="initia3" class="-c-white">Improve business agility / ability to respond to customer or market changes</label>
<br />
<input type="checkbox" name="initia4" id="initia4" value="Reinforce better quality decision-making" data-bind="checked:initiatives" />
<label for="initia4" class="-c-white">Reinforce better quality decision-making</label>
<br />
<input type="checkbox" name="initia5" id="initia5" value="Reduce costs" data-bind="checked:initiatives" />
<label for="initia5" class="-c-white">Reduce costs </label>
<br />
<input type="checkbox" name="initia6" id="initia6" value="Empower employees" data-bind="checked:initiatives" />
<label for="initia6" class="-c-white">Empower employees</label>
<br />
<input type="checkbox" name="initia7" id="initia7" value="Improve governance, security and compliance" data-bind="checked:initiatives" />
<label for="initia7" class="-c-white">Improve governance, security and compliance</label>
<br />
<input type="checkbox" name="initia7" id="initia7" value="Simplify business processes" data-bind="checked:initiatives" />
<label for="initia7" class="-c-white">Simplify business processes</label>
</div>
</div>
</div>
</div>
</div>
<!-- /row10 -->
<div>
<div>&nbsp;</div>
</div>
<!-- row11 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">7. I WOULD LIKE TO LEARN MORE ABOUT PROGRESS SOLUTIONS, PLEASE CONTACT ME. (SELECT ALL THAT APPLY)</h6>
<div class="row -vs1">
<div class="col-24">
<input type="checkbox" id="inter1" name="inter1" value="Web Content Management & Digital Experience" data-bind="checked: interests" />
<label for="inter1" class="-c-white">Web Content Management & Digital Experience</label>
<br />
<input type="checkbox" id="inter2" name="inter2" value="Mobile AppDev Platform and Rapid App Development" data-bind="checked: interests" />
<label for="inter2" class="-c-white">Mobile AppDev Platform and Rapid App Development</label>
<br />
<input type="checkbox" id="inter3" name="inter3" value="Developer UI and Testing Tools" data-bind="checked: interests" />
<label for="inter3" class="-c-white">Developer UI and Testing Tools</label>
<br />
<input type="checkbox" id="inter4" name="inter4" value="Rules Engine and Data Connectivity Drivers" data-bind="checked: interests" />
<label for="inter4" class="-c-white">Rules Engine and Data Connectivity Drivers</label>
<br />
<input type="checkbox" id="inter5" name="inter5" value="Data Analytics and Reporting" data-bind="checked: interests" />
<label for="inter5" class="-c-white">Data Analytics and Reporting</label>
<br />
<input type="checkbox" id="inter3" name="inter3" value="Testing and Quality" data-bind="checked: interests" />
<label for="inter3" class="-c-white">Testing and Quality</label>
<br />
<input type="checkbox" id="inter3" name="inter3" value="Not right now" data-bind="checked: interests" />
<label for="inter3" class="-c-white">Not right now</label>
</div>
</div>
</div>
</div>
</div>
<!-- /row11 -->
<div>
<div>&nbsp;</div>
</div>
<!-- row12 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">8. By when do you want us to start discussions with you</h6>
<div class="row -vs1">
<div class="col-24">
<input type="radio" id="delay1" name="delay" value="By a Week" data-bind="checked: contactTime" />
<label for="delay1" class="-c-white">After a week</label>
<br />
<input type="radio" id="delay2" name="delay" value="0-3 Months" data-bind="checked: contactTime" />
<label for="delay2" class="-c-white">After a Month</label>
<br />
<input type="radio" id="delay3" name="delay" value="3-6 Months" data-bind="checked: contactTime" />
<label for="delay3" class="-c-white">After 3 Months</label>
<br />
<input type="radio" id="delay4" name="delay" value="After 6 Months" data-bind="checked: contactTime" />
<label for="delay4" class="-c-white">After 6 Months</label>
</div>
</div>
</div>
</div>
</div>
<!-- /row12 -->
<div>
<div>&nbsp;</div>
</div>
<!-- row13 -->
<div class="row -vs1">
<div class="col-24 ">
<div class="-vs1 Box -bgo-blue9">
<h6 class="-c-white">9. I am interested to be a Progress Partner. Please contact me</h6>
<div class="row -vs1">
<div class="col-24">
<input type="radio" name="partnerInterest" value="Yes" data-bind="checked:partnetInterest" id="partIntYes" />
<label for="partIntYes" class="-c-white">Yes</label>
<input type="radio" name="partnerInterest" value="No" data-bind="checked:partnetInterest" id="partInterestNo" />
<label for="partnetInterestNo" class="-c-white">No</label>
</div>
</div>
</div>
</div>
</div>
<!-- /row13 -->
<div>
<div>&nbsp;</div>
</div>
<div class="row -vs1">
<div class="col-24 center">
<button class="Btn Btn--prim" data-bind="events:{click:submit}">Submit Survey</button>
</div>
</div>
</form>
</div>
<div class="row -vs1" data-bind="visible:surveySubmitted">
<div class="col-24">
<div class="Box -bgo-green3">
<br><br>
<div align="center">
<h5 class="-c-white">
We have noted your feedback.
</h5>
</div>
<br><br>
<div align="center"><h5 class="-c-white">Thank You!</h5></div>
</div>
</div>
</div>
</div>
</div>
<style>
body {
background: url('http://d117h1jjiq768j.cloudfront.net/images/default-source/default-album/prgs-contact-sales-bg.jpg?sfvrsn=0');
}
.PRGS-Nav-progress-logo {
background: url(https://d3ba5g9yhie26y.cloudfront.net/img/progress-logo-reversed.svg) no-repeat 0 0;
text-indent: -9999px;
direction: ltr;
display: inline-block;
width: 158px;
height: 37px;
margin-top: 25px;
}
</style>
<script>
var viewModel = kendo.observable({
name: "",
designation: "",
company: "",
telephone: "1234567890",
workEmail: "a@a.com",
eventAttended: null,
primaryBusiness: "",
customerIndustry: [],
role: [],
priorities: [],
initiatives: [],
surveySubmitted: false,
interests: [],
contactTime:null,
partnerInterest: null,
submit: function () {
var validator = $("#frmSurvey").kendoValidator().data("kendoValidator");
if (validator.validate()) {
console.log(this)
this.set("surveySubmitted", true);
}
}
})
kendo.bind(document.body, viewModel)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment