KendoUI Survey Example for Rollbase
<!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"> </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> </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> </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> </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> </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> </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> </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