registration-form.html
<!DOCTYPE html>
<html lang=”en-GB”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>{{title}}</title>
<link rel="shortcut icon" href="https://www.dwyl.io/images/favicon.ico" type="image/x-icon">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
</head>
<body class='center'>
<style>
body {
margin-top:0.3em
}
.center {
margin: auto;
width: 90%;
padding: 10px;
}
.form-control {
font-size: 1.5em;
height: 1.8em;
}
.input-error {
border: #ffcdd2 solid 3px;
background-color: #ffebee;
}
.help-block {
font-size: 1em;
color: #e74c3c;
}
.required-field {
color: red;
font-size: 1.3em;
}
</style>
<login>
<h3>Welcome to ACME Co!</h3>
<h4>Please <em>register</em> to use our awesome widgets!</h4>
<br>
<form class="form-horizontal" action="/register" method="POST">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name <span class="required-field">*</span></label>
<div class="col-sm-10">
<input class="form-control {{error.name.class}}" required
id="name" name="name" placeholder="Your Name" value="{{values.name}}">
<p class='help-block'>{{error.name.message}}</p>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email <span class="required-field">*</span></label>
<div class="col-sm-10">
<input class="form-control {{error.email.class}}" required
id="email" name="email" placeholder="Email Address" value="{{values.email}}">
<p class='help-block'>{{error.email.message}}</p>
</div>
</div>
<div class="form-group pull-right">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn-success btn btn-lg">Register</button>
</div>
</div>
</form>
</login>
</body>
</html>