Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Survey Page using Bootstrap for rollbase portal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Kendo RoadTrip Sample Survey Form for Rollbase</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Kendo CSS link -->
<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>
<!-- Kendo Scripts link -->
<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="panel panel-primary">
<h1 class="col-sm-offset-2 col-lg-8 hidden-sm">Kendo UI &hearts; Bootstrap India Tour Survey</h1>
</div>
</div>
</div>
</div>
</header>
<!-- Brand Nav Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://www.gaslampmedia.com/media/bootstrap.png">
<img alt="Brand" src="https://www.gaslampmedia.com/media/bootstrap.png" height="30" width="30">
</a>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-primary">
<h4> Thank you for taking the time to participate in this conference evaluation. Your comments will enable us to better plan and execute future conferences and tailor them to meet your needs.
</h4>
</div>
</div>
<!-- Container for form -->
<div class="container">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<div class="row">
<div class="col-lg-offset-2 col-lg-6">
<!-- Panel for form personal info-->
<div class="panel panel-default">
<div class="panel-body">
<!-- Form Start -->
<form>
<div class="form-group">
<label for="formf1">FullName</label>
<input type="email" class="form-control" id="formf1" placeholder="FullName">
</div>
<div class="form-group">
<label for="formf2">Company</label>
<input type="email" class="form-control" id="formf1" placeholder="Company">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's workEmail" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@Workemail.com</span>
</div>
<div class="form-group">
<label for="formf3">Phone No</label>
<input type="email" class="form-control" id="formf3" placeholder="Phone No">
</div>
<div class="form-group">
<label for="formf4">Designation</label>
<input type="email" class="form-control" id="formf4" placeholder="Designation">
</div>
<!-- end personal information-->
</div>
</div>
<!-- Panel for form personal info-->
<!-- Panel for form survey question -->
<div class="panel panel-default">
<div class="panel-body">
<!--question pan -->
<div>
<h3> How did you hear about us </h3>
<div class="checkbox">
<label>
<input type="checkbox" value="brochure">
Brochure
</label>
</br>
<label>
<input type="checkbox" value="Flyer">
Flyer
</label>
</br>
<label>
<input type="checkbox" value="Ad">
Ad in [PRINT MATERIAL]
</label>
</br>
<label>
<input type="checkbox" value="Sales Call">
Sales Call
</label>
</br>
<label>
<input type="checkbox" value="Conference">
Conference Web Site
</label>
</br>
<label>
<input type="checkbox" value="Referral">
Referral
</label>
</br>
<label>
<input type="checkbox" value="Email">
E-mail / Newsletter
</label>
</div>
</div>
</br>
<div class="form-group">
<h3> What was the most beneficial aspect of the conference? </h3>
<label for="comment">share your comment:</label>
<textarea class="form-control" rows="4" id="comment"></textarea>
</div>
</br>
<div>
<h3> Select speaker session of interest </h3>
<label for="comment">select one:</label>
<select class="form-control">
<option>Speaker 1</option>
<option>Speaker 2</option>
<option>Speaker 3</option>
<option>Speaker 4</option>
<option>Speaker 5</option>
</select>
</div>
</div>
<!-- End Panel -->
</br>
<!-- button -->
<div>
<button type="button" class="btn btn-primary btn-sm btn-block">Submit Survey</button>
</div>
</div>
<!-- End container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.