Case Form template using bootstrap and HTML5

This is a sample case form template created using bootstrap and HTML5

<!DOCTYPE html>
<Head>
<meta charset="utf-8">
<Title>Demo Online Case Form</Title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work Sans" type="text/css">
<style>

input[type="text"], select {
            width:67%;}
textarea{width:67%;}
option {
            font-size: 14px;
            font-weight: normal;
            line-height: 0px;}
body{letter-spacing:.07em;
display:block;
font-family:Work Sans;}
</style>
</Head>
<Body font-family="Work Sans">
 <div id="main_section" class="container">
      
            
         
<NLFORM>
<fieldset class="row span11">
<h3>SUBMIT REQUEST<br/><small>We need some information about your request in order to get started. All starred fields are required.</small></h3>
 <div class="span10">
                  <div class="control-group">
                     <label class="control-label">TITLE*</label>
                     <div class="controls">
                        <!-- This will be translated by NetSuite to an input field for Title-->
                        <NLTITLE>
                     </div>
                  </div>
</div>

<div class="col-md-6">
               <div class="span4">
                  <div class="control-group">
                     <label class="control-label">FIRST NAME*</label>
                     <div class="controls">
                        <!-- This will be translated by NetSuite to an input field for First Name -->
                        <NLFIRSTNAME>
                     </div>
                  </div>
</div></div>
<div class="col-md-6">
<div class="span4">
                  <div class="control-group">
                     <label class="control-label">LAST NAME*</label>
                     <div class="controls">
                        <!-- This will be translated by NetSuite to an input field for Last Name -->
                        <NLLASTNAME>
                     </div>
                  </div>
</div></div>
<div class="span10">
                  <div class="control-group">
                     <label class="control-label">EMAIL*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for Email -->
                        <NLEMAIL>
                     </div>
                  </div>
</div>
<div class="span10">
                  <div class="control-group">
                     <label class="control-label">SHIPPING ADDRESS*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for Shipping Address -->
                        <NLCUSTEVENT1>
                     </div>
                  </div>
               </div>
               
<div class="span10">
                  <div class="control-group">
                     <label class="control-label">CITY*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for City -->
                        <NLCITY>
                     </div>
                  </div></div>

                 <div class="col-md-6"> 
               <div class="span4">
                  <div class="control-group">
                     <label class="control-label">STATE*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for State -->
                        <NLSTATE>
                     </div>
                  </div>
</div></div>
<div class="col-md-6">
<div class="span4">
                  <div class="control-group">
                     <label class="control-label">ZIP CODE*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for Zipcode -->
                        <NLZIPCODE>
                     </div>
                  </div>
</div></div>

<div class="col-md-6">
               <div class="span4">
                  <div class="control-group">
                     <label class="control-label">PRODUCT NAME/PRODUCT NUMBER*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for Product Number -->
                        <NLCUSTEVENTPRODUCTNUMBER>
                     </div>
                  </div>
</div></div>
<div class="col-md-6">
<div class="span4">
                  <div class="control-group">
                     <label class="control-label">YEAR PURCHASED*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for Year Purchased -->
                        <NLCUSTEVENTYEARPURCHASED>
                     </div>
                  </div>
</div></div>
              <div class="span4">
                  <div class="control-group">
                     <label class="control-label">TYPE OF REQUEST*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for Type of Request -->
                        <NLCUSTEVENTTYPEOFREQUEST>
                     </div>
                  </div>
</div>
              <div class="span10">
                  <div class="control-group">
                     <label class="control-label">DESCRIPTION*</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for Description -->
                        <NLINCOMINGMESSAGE>
                     </div>
                  </div>
</div>
              <div class="span10">
                  <div class="control-group">
                     <label class="control-label">UPLOAD PHOTOS</label>
                     <div class="controls">

                        <!-- This will be translated by NetSuite to an input field for File -->
                        <NLFILE>
                     </div>
                  </div>
</div>
 <div class="span10">        
<b><input type="Submit"  class="btn btn-dark"  value="SUBMIT REQUEST"  style="width:67%;background:black;color:white;"></b>
</div>
            </fieldset>

<NLSUBSIDIARY>

      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      <!-- Include the Bootstrap JavaScript library -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</form> 
</div>
</body>
</html>

Leave a comment

Your email address will not be published. Required fields are marked *