// Adding an Inline HTML field for the questionnaire
var inlineHtmlField = form.addField({
id: ‘custpage_questionnaire’,
type: serverWidget.FieldType.INLINEHTML,
label: ‘questionnaire’
});
// Define the HTML content for the survey form here
var surveyHTML = `
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
#outside {
background-color: #fff;
padding: 30px;
margin: 0 auto;
width: 70%;
}
h1 {
font-size: 2em;
text-align: center;
text-transform: capitalize;
color: #333;
}
form {
border: 1px solid #CCC;
border-radius: 1em;
background-color: #f9f9f9;
padding: 30px;
}
fieldset {
border: 1px solid #ddd;
border-radius: 0.5em;
margin: 20px 0;
padding: 20px;
}
legend {
font-weight: bold;
font-size: 1.8em;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
font-size: 1.2em;
}
input[type="text"],
input[type="number"],
input[type="datetime-local"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
button[type="submit"] {
background-color: #0074cc;
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
}
#map {
height: 300px;
}
</style>
<div id="outside">
<form id="survey-form" action="/app/site/hosting/scriptlet.nl?script=2490&deploy=1" method="post">
<h1 id="title">Survey Questions</h1>
<p id="description"><b>Note:</b> Please answer the following questions.</p>
<!-- ------------------Survey Questions---------------------------- -->
<fieldset>
<legend>Survey Questions</legend>
<div>
<label for="date-time">Date/time:</label>
<input type="datetime-local" required id="date-time" name="date_time">
</div>
<div>
<label for="caller">Caller name & Phone No:</label>
<input type="text" required id="caller" name="caller_name_phone">
</div>
<div>
<label for="company">Company name:</label>
<input type="text" required id="company" name="company_name">
</div>
<div>
<label for="po">PO or Payment:</label>
<input type="text" id="po" name="po_payment">
</div>
<div>
<label for="site-contact">Site contact & Phone Number:</label>
<input type="text" required id="site-contact" name="site_contact_phone">
</div>
<div>
<label for="site-address">Site Address:</label>
<input type="text" required id="site-address" name="site_address">
</div>
<div>
<label for="unit">Unit Number/Description:</label>
<input type="text" id="unit" name="unit_number_description">
</div>
<div>
<label for="vehicle">Vehicle Make/Model:</label>
<input type="text" id="vehicle" name="vehcile_make_model">
</div>
<div>
<label for="tires-no">No of tires:</label>
<input type="number" id="tires-no" name="no_of_tires" min="1">
</div>
<div>
<label for="tires-size">Tires Size:</label>
<input type="text" id="tires-size" name="tires_size">
</div>
<div>
<label for="tire-condition">General condition of tire:</label>
<input type="text" id="tire-condition" name="general_condition_of_tire">
</div>
<div>
<label for="wheel-position">Wheel position:</label>
<input type="text" id="wheel-position" name="wheel_position">
</div>
<div>
<label for="time-frame">Time Frame:</label>
<input type="text" id="time-frame" name="time_frame">
</div>
<div>
<label for="call-taken">Call taken by:</label>
<input type="text" id="call-taken" name="call_taken_by">
</div>
<div>
<label for="estimate-time">Estimate Time for job:</label>
<input type="text" id="estimate-time" name="estimate_time_job">
</div>
<div>
<label for="time-left">Time left shop:</label>
<input type="text" id="time-left" name="time_left_shop">
</div>
<div>
<label for="technician">Technician name and W/O No:</label>
<input type="text" id="technician" name="technician_name_wo">
</div>
<div>
<label for="location">Location:</label>
<input type="text" id="location" name="location">
<div id="map"></div>
</div>
</fieldset>
<div id="submitbutton">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 0, lng: 0 },
zoom: 8
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
});
google.maps.event.addListener(marker, 'dragend', function (event) {
var location = event.latLng.lat() + ', ' + event.latLng.lng();
document.getElementById('location').value = location;
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
`;
// Set the HTML content for the Inline HTML field
inlineHtmlField.defaultValue = surveyHTML;