HTML:
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class='panel panel-default'>
<div class='panel-heading' style="background-color:#e9f6ff;border-bottom: solid 2px #41B1FF">
<h4 style="text-align:center;">CCOVID-19 RESPONSE FORM</h4>
</div>
<div class="disclaimer">
<h4>Instructions: <span class="required-mark" style=" margin-left: 640px;
font-size: 14px;"><span style="color: red;">* </span>Indicates required field</span></h4>
</div>
<div class='container disclaimer'>
<h3 class="heading_text">Tell us about yourself</h3>
<div class="row">
<div class="col-md-4">
<label>First Name</label><span class="required-mark" style="color:red">*</span>
<input type="text" class="form-control" placeholder="enter last name (limit 75 chars)" id="first_name" onchange="firstNameValidation()" ng-model="c.data.model.consumer.first_name" sessionvalue="{{::data.first_name}}" required/>
</div>
<div class="col-md-4">
<label>Last Name</label><span class="required-mark" style="color:red">*</span>
<input required class="form-control" type="text" placeholder="enter last name (limit 75 chars)" id="last_name" onchange="lastNameValidation()" ng-model="c.data.model.consumer.last_name" sessionvalue="{{::data.last_name}}" required/>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<label>Email Address</label><span class="required-mark" style="color:red">*</span>
<input required class="form-control" type="text" id="email1" placeholder="enter email address; format joe@domain.com" ng-model="c.data.model.consumer.email" onchange="emailValidationzlength()" required/>
</div>
<div class="col-md-4">
<label>Confirm Email Address</label><span class="required-mark" style="color:red">*</span>
<input required class="form-control" type="text" id="confemail" placeholder="enter email address again to confirm" ng-model="c.data.model.consumer.confirm_email" onchange="emailValidation()" required/>
</div>
<div class="col-md-4">
<label>Phone Number</label>
<input required class="form-control" type="text" placeholder="format xxx-xxx-xxxx (ext.)" ng-model="c.data.model.consumer.phone_number"/>
</div>
</div>
<br>
<hr>
<h3 class="heading_text">Location</h3>
<div class="row">
<div class="col-xs-4">
<label for="office">Center or Office</label><span class="required-mark" style="color:red">*</span>
<select id="office" name="officelist" form="officeform" required class="form-control" placeholder="Office" onchange="showHideFields()" ng-model="c.data.model.office" required>
<option value="INDIA">INDIA</option>
<option value="USA">USA</option>
<option value="CHIN">CHIN</option>
</select>
</div>
</div>
<br>
<hr>
<div class="row">
<div class="col-md-4">
<label>Current Position</label><span class="required-mark" style="color:red">*</span>
<!--sn-record-picker class="form-control input-lg m-t-xl" style="border: 1px dashed red;padding-left: 13px;" placeholder="Program" field="topic" table="'u_rightnow_categories'" display-field="'u_topic'" value-field="'sys_id'" search-fields="'u_topic'" default-query="'u_parentISEMPTY'" page-size="100" width=40%></sn-record-picker-->
<input class="form-control" id="topic_val" type="text" placeholder="Current position" ng-click="c.openModal()" ng-model="c.data.model.current_position" required/>
</div>
<div class="col-md-4">
<label>Have you received approval from your manager to volunteer?</label><span class="required-mark" style="color:red">*</span>
<input type="radio" id="man_approval" placeholder="man_approval" value="Yes" name="approval"> <label for="Yes">YES</label>
<input type="radio" id="man_approval" placeholder="man_approval" value="No" name="approval"> <label for ="No">NO</label>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<label>Manager's Email Address</label><span class="required-mark" style="color:red">*</span>
<input required class="form-control" type="text" id="email1" placeholder="enter email address for your manager" ng-model="c.data.model.manager.email" onchange="emailValidationzlength()" required/>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<label>Are you a member of committe<span class="required-mark" style="color:red">*</span></label>
<input type="radio" id="memberofpub" value="Yes" name="approval"> <label for="Yes">YES</label>
<input type="radio" id="memberofpub" value="No" name="approval"> <label for ="No">NO</label>
</div>
<div class="col-xs-4">
<label for="when_spport">When can you begin to provide support?</label><span class="required-mark" style="color:red">*</span>
<select id="start_spport" name="begin_support" form="support" required class="form-control" onchange="showHideFields()" ng-model="c.data.model.startsupport" required>
<option value="0">Immediately</option>
<option value="1">In 1-2 weeks</option>
<option value="2">>2 weeks from now</option>
</select>
</div>
<div class="col-xs-4">
<label for="when_spport">When would you need to stop providing support?</label><span class="required-mark" style="color:red">*</span>
<select id="stop_spport" name="end_support" form="support" required class="form-control" onchange="showHideFields()" ng-model="c.data.model.stopsupport" required>
<option value="0">In 1-2 weeks</option>
<option value="1">In 1-2 month</option>
<option value="2">>2 months</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<label>Are you available to provide full-time support? </label><br>
<input type="radio" id="full_time" value="Yes" name="fulltime"> <label for="Yes">YES</label>
<input type="radio" id="full_time" value="No" name="fulltime"> <label for ="No">NO</label>
</div>
<div class="col-md-4">
<label for="when_spport">How many hours per week are you available to support?</label>
<select id="hours" name="hours" form="support" required class="form-control" onchange="showHideFields()" ng-model="c.data.model.stopsupport" required>
<option value="10">Less than 10 hours per week</option>
<option value="20">10-20 hours per week</option>
<option value="30">20-30 hours per week</option>
<option value="40">30-40 hours per week</option>
</select>
</div>
</div>
<hr>
<h3 class="heading_text">Type of Support</h3>
<div class="col-xs-9">
<label>What types of support can you provide in the COVID-19 response? <i>(click all that apply)</i></label>
</div>
<div class="row">
<div class="col-md-4">
<input type="checkbox" id="Clinician" name="Clinician" value="Clinician">
<label for="Clinician">Clinician</label><br>
<input type="checkbox" id="infectious" name="infectious" value="infectious">
<label for="infectious">Experience with infectious diseasen</label><br>
<input type="checkbox" id="Senior" name="Senior" value="Senior">
<label for="Senior">Senior, cross-functional project management experience</label><br>
</div>
<div class="col-md-4">
<input type="checkbox" id="policy" name="policy" value="policy">
<label for="policy">Expertise writing and reviewing policy</label><br>
<input type="checkbox" id="Helpdesk" name="Helpdesk" value="Helpdesk">
<label for="infectious">Helpdesk, outreach, or customer service support experience</label><br>
<input type="checkbox" id="Financial" name="Financial" value="Financial">
<label for="Senior">Financial management experience</label><br>
</div>
</div>
<br>
<div class="col-xs-9">
<label>Please indicate the type of clinical support you can provide: <i>(click all that apply)</i></label>
</div>
<div class="row">
<div class="col-md-4">
<input type="checkbox" id="Physician" name="Physician" value="Physician">
<label for="Physician">Physician</label><br>
<input type="checkbox" id="practitioner" name="practitioner" value="practitioner">
<label for="practitioner">Nurse practitioner</label><br>
<input type="checkbox" id="PA" name="PA" value="PA">
<label for="PA">Physician assistant</label><br>
<input type="checkbox" id="Pharmacist" name="Pharmacist" value="Pharmacist">
<label for="Pharmacist">Pharmacist</label><br>
</div>
<div class="col-md-4">
<input type="checkbox" id="Nurse" name="Nurse" value="Nurse">
<label for="Nurse">Nurse</label><br>
<input type="checkbox" id="rt" name="rt" value="rt">
<label for="practitioner">Respiratory therapist</label><br>
<input type="checkbox" id="PT" name="PT" value="PT">
<label for="PA">Physical therapist</label><br>
<input type="checkbox" id="OT" name="OT" value="OT">
<label for="PA">Occupational therapist</label><br>
</div>
<div class="col-md-4">
<input type="checkbox" id="SW" name="SW" value="SW">
<label for="Nurse">Social worker</label><br>
<input type="checkbox" id="Psychologist" name="Psychologist" value="Psychologist">
<label for="practitioner">Psychologist</label><br>
<input type="checkbox" id="other" name="other" value="other">
<label for="PA">Other:</label><br>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<label>Are you bilingual / multilingual? </label><br>
<input type="radio" id="language" value="Yes" name="langauge"> <label for="Yes">YES</label>
<input type="radio" id="language" value="No" name="language"> <label for ="No">NO</label>
</div>
<div class="col-md-4">
<label for="when_spport">What language(s) do you speak?</label>
</div>
<div class="col-xs-9">
<button class='btn btn-primary btn-margin btn-block text-uppercase btn-lg button_design' ng-click='submitTicket()'>Submit Form</button>
</div>
Output:
Covid 19 input form design Service Portal ServiceNow
Working Code Asked question July 6, 2023