CI Form Template v_01

by freedawirl

HTML

<link rel="stylesheet" href="//capmetro.org/gage/styles/style.css">
<link rel="stylesheet" href="//capmetro.org/gage/vendor/bootstrap/css/bootstrap.css">
<script src="//capmetro.org/gage/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//capmetro.org/gage/styles/forms.css">
 <div class="container">

  <div id="form-wrap">
   <div id="form-title-row" class="row ">

    <div class="heading col-md-9">
     <h1 class="form-title">Application for appointment</h1>
    </div>

    <div class="col-md-3">
     <a class="back-link" href="/metroworks-business" title="Back to MertoWorks Business Section"> ‹ ‹ Go Back</a>
    </div>

   </div>
   <h3>
    Capital Metro’s Access Advisory Committee (AAC)
   </h3>
   <fieldset class="form-group row">
    <legend class="col-form-legend col-md-12">
     Customer Information
    </legend>

    <div class="form-group col-md-12">
     <div class="row">
      <div class="col-xs-12 col-sm-4 col-md-4 req">
       <div>
        <input type="text" name="first_name" ektdesignns_nodetype="element" id="contact_name" ektdesignns_caption="First Name:" ektdesignns_name="first_name" title="Contact Name
Cannot be blank" placeholder="First Name" ektdesignns_validation="string-req" ektdesignns_datatype="string" ektdesignns_basetype="text" ektdesignns_schema="><xs:minlength value=&quot;1&quot; />" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank"
        onblur="design_validate_re(/\S+/,this,'Cannot be blank');" class="design_textfield form-control input-sm">
       </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 req">
       <div>
        <input type="text" name="last_name" ektdesignns_nodetype="element" id="last_name" ektdesignns_caption="Last Name:" ektdesignns_name="last_name" title="Last Name
Cannot be blank" placeholder="Last Name" ektdesignns_validation="string-req" ektdesignns_datatype="string" ektdesignns_basetype="text" ektdesignns_schema="><xs:minlength...

CSS

fieldset {
    margin:0;
    border: 1px solid silver !important;
    border-radius: 5px;
    padding: 5px 0 0px !important;
    }
    .req div {
    position: relative;
    margin-right: 0;
}
.req div:before {
  position: absolute;
  content: '*';
  color: red;
  left: -10px;
  top: 0;
}

.req div:after {
  display: none;
}

JavaScript

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})