/KendoUI_Survey_Example.html
Created Dec 30, 2016
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