This is a custom template That can be used for creating online case forms in Netsuite.
The online case forms can be used to create a new case record in NetSuite from the website. While submitting the form a case record will be created on the NetSuite.
In this template, we can see the script for auto-populating some fields in the form, While creating case forms there will be some mandatory fields like subject, case type, etc created they cannot be removed from the forms, so if we don’t want that field, we can set the values inside the template using a script and hide using CSS.
<NLFORM>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
textarea {
display: block !important;
width: 100% !important;
height: auto !important;
padding: 6px 12px !important;
font-size: 14px !important;
line-height: 1.42857143 !important;
color: #555 !important;
background-color: #fff !important;
background-image: none !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
}
</style>
<style>
img.bg-img {
min-height: 100%;
height: auto;
position: fixed;
top: 0;
right: 0;
z-index: 0;
}
legend {
margin-top: 15px;
font-weight: bold;
font-family: inherit;
font-size: xxx-large;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input,
select {
display: block;
width: 100% !important;
height: 34px !important;
padding: 6px 12px;
font-size: 14px !important;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
input:focus,
select:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
input:-moz-placeholder {
color: #999999;
}
input::-moz-placeholder {
color: #999999;
opacity: 1;
}
input:-ms-input-placeholder {
color: #999999;
}
input::-webkit-input-placeholder {
color: #999999;
}
input[disabled],
input[readonly],
fieldset[disabled] input {
cursor: not-allowed;
background-color: #eeeeee;
}
textarea {
height: auto;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
.form-group {
margin-bottom: 15px;
}
.form-action {
margin-top: 20px;
}
.sub_head {
font-weight: bold;
font-family: inherit;
font-size: large;
}
.button1{
font-size:25px;
font-family:HelveticaNeueLTStd-Md_1g;
color:#FFF;
background-color: orange;
border: none;
float: right;
padding-right: 5%;
padding-left: 5%;
}
.radio_section input{
width:auto !important;
display:none;
}
.inlinediv{
display: inline-block;
}
.hide_fields{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<header class="col-md-9">
<div class="page-header">
<h1>
</h1>
</div>
</header>
</div>
<div class="row">
<form role="form">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<legend>Need us to create or refresh your logo?
</legend>
<p>We can update your existing logo or design one from scratch.<br>Just tell us what you’re looking for below.</p>
<img src="https://myron-us.sb1.kodel.la/SSP%20Applications/Myron%20Corp._1072230/2020.2.4%20-%20Myron%20US/img/logo_banner.jpg"></img>
<div class="col-md-12">
<div class="col-md-12">
<div class="sub_head">
<br><p>Let us know the best way we can contact you.</p><br>
</div></div>
<br>
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="firstname">First name* </label>
<NLFIRSTNAME>
</NLFIRSTNAME>
</div>
</div>
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="lastname">Last name* </label>
<NLLASTNAME>
</NLLASTNAME>
</div>
</div>
<div class="col-sm-12">
<div class="control-group">
<label class="control-label" for="nlcompanyname">Company Name*</label>
<nlcompanyname>
</nlcompanyname>
</div></div>
<br>
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="email">Email*</label>
<nlemail>
</nlemail>
</div>
</div>
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="Phone">Phone</label>
<nlphone>
</nlphone>
</div>
</div>
<br>
<div class="col-sm-12">
<div class="sub_head">
<br><p>Preferential contact option</p>
</div>
<div class="radio_section">
<div class="col-sm-12">
<div class="inlinediv">
<NLCUSTEVENT_BYEMAIL>
</NLCUSTEVENT_BYEMAIL>
<label>By Email</label>
</div></div>
<div class="col-sm-12">
<div class="inlinediv">
<NLCUSTEVENT_BYPHONE>
</NLCUSTEVENT_BYPHONE>
<label>By Phone</label>
</div> </div>
</div>
</div>
<div class="col-md-12">
<div class="sub_head">
<br><p>Let us know exactly what you’re looking for—
the more details the better!</p><br>
</div> </div>
<br>
<div class="col-sm-12 hide_fields">
<nltitle>
</nltitle>
</div>
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="Subject">Do you already have a logo*</label>
<nlcustevent_already_have_logo>
</nlcustevent_already_have_logo>
</div></div>
<div class="col-sm-6">
<div class="control-group">
<label class="control-label" for="Subject">Upload your existing logo or inspiration*</label>
<nlfile>
</nlfile>
</div></div>
<div class="col-sm-12">
<div class="control-group">
<label class="control-label" for="Subject">Describe how your logo should look like. Describe your ideas and requirements.*</label>
<nlcustevent_describe_ideas>
</nlcustevent_describe_ideas>
</div></div>
<br>
</div>
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="Subsidiary"></label>
<nlsubsidiary>
</nlsubsidiary>
</div>
</div>
<div class="control-group">
<nlcategory>
</nlcategory>
</div>
<div class="control-group">
<NLCUSTEVENT_CU_NA_CASE_TYPE>
</NLCUSTEVENT_CU_NA_CASE_TYPE>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="Message">Do you want a word or a picture mark?</label>
<nlcustevent_word_or_picturemark>
</nlcustevent_word_or_picturemark>
</div>
</div>
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="Message"> Preferred color(s)</label>
<NLCUSTEVENT_COLOR>
</NLCUSTEVENT_COLOR>
</div>
</div>
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="Message">Is there a special font/style of text?</label>
<nlcustevent_special_font_style>
</nlcustevent_special_font_style>
</div>
</div>
<div class="col-md-6">
<div class="control-group">
<label class="control-label" for="Message">Text for logo + slogan/tagline</label>
<nlcustevent_text_logo_slogan_tagline>
</nlcustevent_text_logo_slogan_tagline>
</div>
</div>
<div class="col-md-12">
<div class="control-group">
<label class="control-label control-msg" for="Message">Message</label>
<nlincomingmessage>
</nlincomingmessage>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-action">
<button type="submit" class="button1">Submit>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-9">
<hr>
<footer class="text-muted">
<p class="pull-right">* Required fields
</p>
</footer>
</div>
</body>
//Section for hiding mandatory fields
<script type="text/javascript">
document.getElementById("category").defaultValue=5;
document.getElementById("custevent_cu_na_case_type").defaultValue=4;
document.getElementById("title").defaultValue="Logo Request";
</script>
//Section for hiding mandatory fields
</html>
</div>