Start with this basic HTML template, or modify these existing template. We hope you'll customize our template, adapting them to suit your needs. Use .gsui-card class to form layout.
<html>
<head>
<title>GupshupUI</title>
<link rel="stylesheet" href="//res.cloudinary.com/dymdnyadb/raw/upload/v1487660504/gsui.css" />
//Include this script for Date and Time field compatibility for Firefox
<script type="text/javascript">
var datefield=document.createElement("input")
datefield.setAttribute("type", "date")
var timefield=document.createElement("input")
timefield.setAttribute("type", "time")
if (datefield.type!="date"){
document.write('<link href="https://unpkg.com/flatpickr/dist/flatpickr.min.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src="https://unpkg.com/flatpickr/dist/flatpickr.min"><\/script>')
}
</script>
//End of Script
</head>
<body>
<div class="gsui-card">
<form id="smartForm">
<div class="gsui-input">
<label>Name</label>
<input type="text" name="name" placeholder="Enter your name" />
<p class="gsui_error_text" id="err_name"></p>
</div>
<div class="gsui-textarea">
<label>Address</label>
<textarea name="address" placeholder="Enter your address" cols="4" rows="4"></textarea>
<p class="gsui_error_text" id="err_address"></p>
</div>
<div class="gsui-input">
<label>Date</label>
<input type="date" name="date" id="cmsg-date" class="gsui-input" />
<p class="gsui_error_text" id="err_date"></p>
</div>
<div class="gsui-input">
<label>Time</label>
<input type="time" name="time" id="cmsg-time" class="gsui-input" />
<p class="gsui_error_text" id="err_time"></p>
</div>
<div class="gsui-select">
<label>Account Type</label>
<select name="account">
<option>Select</option>
<option>Savings</option>
<option>Current</option>
</select>
<div class="gsui-select-arrow"></div>
<p class="gsui_error_text" id="err_account"></p>
</div>
<div class="gsui-checkbox">
<label>Interests</label>
<label class="gsui-control gsui-control-checkbox">
<input type="checkbox" name="reading" checked="checked" />Reading
<div class="gsui-control-indicator"></div>
</label>
<label class="gsui-control gsui-control-checkbox">
<input type="checkbox" name="cooking" />Cooking
<div class="gsui-control-indicator"></div>
</label>
<p class="gsui_error_text" id="err_interest"></p>
</div>
<div class="gsui-radio">
<label>Gender</label>
<label class="gsui-control gsui-control-radio">Male
<input type="radio" name="gender" value="male" checked="checked" />
<div class="gsui-control-indicator"></div>
</label>
<label class="gsui-control gsui-control-radio">Female
<input type="radio" name="gender" value="female" />
<div class="gsui-control-indicator"></div>
</label>
<p class="gsui_error_text" id="err_gender"></p>
</div>
<input type="submit" name="Submit" class="gsui-btn gsui-btn-primary" />
</form>
</div>
</body>
//Include this script for Date and Time field compatibility for Firefox
<script type="text/javascript">
if (datefield.type!="date" && timefield.type!="time" ){
flatpickr(".gsui-input-date", {
allowInput:true
});
flatpickr(".gsui-input-time",{
allowInput:true,
noCalendar:true,
enableTime:true,
minuteIncrement:1
});
}
</script>
//End of Script
</html>