ContactTest.rythm
Jump to navigation
Jump to search
Links
https://codepen.io/jaycbrf/pen/iBszr
Rythm template
@// Rythm template for the WikiCMS approach
@include(wiki.MediaWiki.Bootstrap.rythm)
@def static {
class Field {
String name;
String label_en;
String label_de;
String placeholder_en;
String placeholder_de;
String icon;
int min;
public Field(String name,String label_en, String label_de, String placeholder_en,String placeholder_de, String icon, int min) {
this.name=name;
this.label_en=label_en;
this.label_de=label_de;
this.placeholder_de=placeholder_de;
this.placeholder_en=placeholder_en;
this.icon=icon;
this.min=min;
}
public Field(String name,String label_en, String label_de, String icon, int min) {
this(name,label_en,label_de,label_en,label_de,icon,min);
}
}
}
@{
Field[] fields={
new Field("firstname","First name","Vorname","user",2),
new Field("lastname","Last name","Nachname","user",2),
new Field("email","E-Mail Address","E-Mail Adresse","envelope",5),
new Field("phone","Phone number","Telefonnummer","+1 845 555-1212","+49 30 675797","earphone",8),
new Field("address","Address","Adresse","home",8)
};
}
@// add a validation
@def fieldvalidate(boolean de,Field field) {
@(field.name): @("{")
validators: @("{")
stringLength: @("{")
min: @(field.min),
@("}"),
notEmpty: @("{")
message: '@(de?"Bitte "+field.label_de+"eingeben":"Please supply your "+field.label_en)'
@("}")
@("}")
@("}")
}
@// add a form field
@def field(boolean de,Field field) {
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">@(de?field.label_de:field.label_en)</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-@(field.icon)"></i></span>
<input name="@(field.name)" placeholder="@(de?field.placeholder_de:field.placeholder_en)" class="form-control" type="text">
</div>
</div>
</div>
}
@{ boolean de=true;}
@header("en","ContactTest")
@bootstrap()
<style>
#success_message{ display: none;}
</style>
<script>
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
@{ String delim="";}
@for (Field field:fields) {
@(delim)@fieldvalidate(de,field)
@{ delim=",";}
}
@("}")
@("}"))
.on('success.form.bv', function(e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
</script>
</head>
<body>
<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Us Today!</legend>
@for (Field field:fields) {
@field(de,field)
}
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="city" class="form-control" type="text">
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">State</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="state" class="form-control selectpicker" >
<option value=" " >Please select your state</option>
<option>Alabama</option>
<option>Alaska</option>
<option >Arizona</option>
<option >Arkansas</option>
<option >California</option>
<option >Colorado</option>
<option >Connecticut</option>
<option >Delaware</option>
<option >District of Columbia</option>
<option> Florida</option>
<option >Georgia</option>
<option >Hawaii</option>
<option >daho</option>
<option >Illinois</option>
<option >Indiana</option>
<option >Iowa</option>
<option> Kansas</option>
<option >Kentucky</option>
<option >Louisiana</option>
<option>Maine</option>
<option >Maryland</option>
<option> Mass</option>
<option >Michigan</option>
<option >Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option> Uttah</option>
<option>Vermont</option>
<option>Virginia</option>
<option >Washington</option>
<option >West Virginia</option>
<option>Wisconsin</option>
<option >Wyoming</option>
</select>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Zip Code</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="Zip Code" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Website or domain name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input name="website" placeholder="Website or domain name" class="form-control" type="text">
</div>
</div>
</div>
<!-- radio checks -->
<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" /> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" /> No
</label>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /.container -->
<body>
</html>