This below html form is used for submitting cases on online. The user don't need to login to the netsuite and create a case. These forms are usually used in website for submitting the cases.
To use this form,
- Create an html using this below code
- Go to setup>support>online case form>new
- Select custom html template
- Enter the fields required on the form and add the same to this html form using NL tag
- Enter the criteria or conditions you require under Set up workflow tab
- Under the custom code add this html file
Solution
<!DOCTYPE html>
<Head>
<meta charset="utf-8">
<Title>Revo 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"] {
width: 67%;
font-size: 14px;
display: block;
}
.control-label {
font-size: 13px;
display: block;
}
select {
display block;
font-size: 14px;
width: 70%;
}
.btn {
font-size: 14px;
padding: 8px;
margin-bottom: 100px;
}
textarea {
width: 67%;
height: 32px;
display: block;
font-size: 22px;
}
option {
font-size: 14px;
font-weight: normal;
line-height: 0px;
}
body {
letter-spacing: .07em;
font-family: Work Sans;
}
</style>
<script type="text/javascript">
if (performance.getEntriesByType("navigation")[0].type == "back_forward") {
location.reload();
}
function getData() {
var title = document.getElementById('title').value;
var fname = document.getElementById('firstname').value;
var lname = document.getElementById('lastname').value;
var email = document.getElementById('email').value;
var adrs = document.getElementById('address1').value;
var state = document.getElementById('state').value;
var city = document.getElementById('city').value;
var item = document.getElementById('custevent_jj_prdt_num_brl_57').value;
var ctgry = document.getElementById('category').value;
var msg = document.getElementById('incomingmessage').value;
var year = document.getElementById('custevent_jj_year_brl_43').value;
var zip = document.getElementById('zipcode').value;
var d = new Date();
var n = d.getFullYear();
var e = document.getElementById("custevent_jj_year_brl_43");
var yrlist = e.options[e.selectedIndex].text;
if (title.length == 0 || fname.length == 0 || adrs.length == 0 || state.length == 0 || city.length == 0 || item.length == 0 || ctgry.length == 0 || msg.length == 0 || year.length == 0 || email.length == 0 || lname.length == 0 || zip.length == 0) {
alert("Fields cannot be empty");
return false;
} else {
if (zip.length >= 5) {
if (n >= yrlist) {
alert("Success!! Thankyou for your concern");
return true;
} else {
alert("Invalid year");
return false;
}
} else {
alert("Zipcode must be minimum 5 characters");
return false;
}
}
}
</script>
</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="row">
<div class="span10">
<div class="control-group">
<label class="control-label">TITLE*</label>
<div class="controls1">
<!-- This will be translated by NetSuite to an input field for Title-->
<NLTITLE>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<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-lg-3">
<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>
<div class="row">
<div class="span10">
<div class="control-group">
<label class="control-label">EMAIL*</label>
<div class="controls1">
<!-- This will be translated by NetSuite to an input field for Email -->
<NLEMAIL>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span10">
<div class="control-group">
<label class="control-label">SHIPPING ADDRESS*</label>
<div class="controls1">
<!-- This will be translated by NetSuite to an input field for Shipping Address -->
<NLADDRESS1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span10">
<div class="control-group">
<label class="control-label">CITY*</label>
<div class="controls1">
<!-- This will be translated by NetSuite to an input field for City -->
<NLCITY>
</div>
</div>
</div>
</div>
<div class="row">
<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>
<div class="row">
<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 Item -->
<NLcustevent_jj_prdt_num_brl_57>
</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 -->
<NLcustevent_jj_year_brl_43>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<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 Case Type -->
<NLCATEGORY>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="span4">
<div class="control-group">
<label class="control-label">ORDER NUMBER*</label>
<div class="controls">
<!-- This will be translated by NetSuite to an input field for Order Number -->
<NLcustevent_jj_order_num_brl_57>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<div class="span10">
<b><input type="submit" id="subbtn" onclick="return getData()" class="btn" value="SUBMIT REQUEST" style="width:69%;background:black;color:white;"></b>
</div>
</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>
<div class="controls controls-row">
</div>
</form>
</div>
</body>
</html>
When you submit this form, a case record will be created in NetSuite
The field placeholder will be also displayed accross the field labels if all the same fields is present in the case record
