Difference between revisions of "ContactTest.rythm"

From BITPlan Wiki
Jump to navigation Jump to search
 
(59 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
= Links =
 
= Links =
−
https://codepen.io/jaycbrf/pen/iBszr
+
* https://codepen.io/jaycbrf/pen/iBszr
 +
* {{Link|target=MediaWiki:BITPlan.rythm}}
 +
 
 
= Rythm template =
 
= Rythm template =
 
<source lang='html'>
 
<source lang='html'>
 
@// Rythm template for the WikiCMS approach
 
@// Rythm template for the WikiCMS approach
−
@include(wiki.MediaWiki.Bootstrap.rythm)
+
@include(wiki.MediaWiki.BITPlan.rythm)
−
@header("en","ContactTest")
+
@{
−
@bootstrap()
+
   SelectField selectField=new SelectField("training","Seminar","Training","CPSA-F","CPSA-F","book",0);
−
  <style>
+
   String [] trainings={"Certified Professional for Software Architecture Foundation-Level CPSA-F","Certified Professional for Requirements Engineering Foundation-Level CPRE-FL"};
−
#success_message{ display: none;}
+
   selectField.addSelections(trainings);
−
   </style>
+
   Field[] fields={
−
  <script>
+
     selectField,
−
$(document).ready(function() {
+
     new TextField("name","Name","Name","John Doe","Erika Mustermann","user",2),
−
    $('#contact_form').bootstrapValidator({
+
     new TextField("organisation","Organization","Organiation","Doe Inc.","Mustermann GmbH","user",2),
−
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
+
    new TextField("email","E-Mail Address","E-Mail Adresse","john@doe.com","erika@mustermann.de","envelope",5),
−
        feedbackIcons: {
+
     new TextField("phone","Phone number","Telefon","+1 845 555-1212","+49 30 675797","earphone",8),
−
            valid: 'glyphicon glyphicon-ok',
+
     new TextField("address","Address","Adresse","12 Westend Ave","Mauerstr. 12","home",8),
−
            invalid: 'glyphicon glyphicon-remove',
+
     new TextField("zip","ZIP Code","PLZ","10023","10117","home",3),
−
            validating: 'glyphicon glyphicon-refresh'
+
    new TextField("city","City","Ort","New York","Berlin","home",2),
−
        },
+
     new TextField("country","Country","Land","US","DE","home",2),
−
        fields: {
+
     new TextAreaField("message","Your Message to us","Ihre Nachricht an us","Your Message","Ihre Nachricht","pencil",10)
−
            first_name: {
+
   };
−
                validators: {
+
   Form form=new Form(de,postService,postToken,fields);
−
                        stringLength: {
+
   form.setTitle("Your contact with us","Ihre Nachricht an uns");
−
                        min: 2,
+
  form.setSuccess("Thanks for contacting us, we will get back to you shortly","Vielen Dank für Ihre Kontaktaufnahme, wir melden uns unverzüglich");
−
                    },
+
   for (Field field:form.getFields()) {
−
                        notEmpty: {
+
    field.labelClass="bitplanorange";
−
                        message: 'Please supply your first name'
+
   }
−
                    }
+
}
−
                }
+
@BITPlanHeader(languageCode,"ContactTest")
−
            },
+
@formvalidate(form)
−
            last_name: {
+
   </head>
−
                validators: {
+
  <body>
−
                    stringLength: {
+
@BITPlanMenu(de)
−
                        min: 2,
+
  <div class="container">
−
                    },
+
@showform(form)
−
                    notEmpty: {
+
@formDebug(form)
−
                        message: 'Please supply your last name'
+
  </div><!-- /.container -->
−
                    }
+
@footer(de)
−
                }
 
−
            },
 
−
            email: {
 
−
                validators: {
 
−
                    notEmpty: {
 
−
                        message: 'Please supply your email address'
 
−
                    },
 
−
                    emailAddress: {
 
−
                        message: 'Please supply a valid email address'
 
−
                    }
 
−
                }
 
−
            },
 
−
            phone: {
 
−
                validators: {
 
−
                    notEmpty: {
 
−
                        message: 'Please supply your phone number'
 
−
                    },
 
−
                    phone: {
 
−
                        country: 'US',
 
−
                        message: 'Please supply a vaild phone number with area code'
 
−
                    }
 
−
                }
 
−
            },
 
−
            address: {
 
−
                validators: {
 
−
                    stringLength: {
 
−
                        min: 8,
 
−
                    },
 
−
                    notEmpty: {
 
−
                        message: 'Please supply your street address'
 
−
                    }
 
−
                }
 
−
            },
 
−
            city: {
 
−
                validators: {
 
−
                    stringLength: {
 
−
                        min: 4,
 
−
                    },
 
−
                    notEmpty: {
 
−
                        message: 'Please supply your city'
 
−
                    }
 
−
                }
 
−
            },
 
−
            state: {
 
−
                validators: {
 
−
                    notEmpty: {
 
−
                        message: 'Please select your state'
 
−
                    }
 
−
                }
 
−
            },
 
−
            zip: {
 
−
                validators: {
 
−
                    notEmpty: {
 
−
                        message: 'Please supply your zip code'
 
−
                    },
 
−
                    zipCode: {
 
−
                        country: 'US',
 
−
                        message: 'Please supply a vaild zip code'
 
−
                    }
 
−
                }
 
−
            },
 
−
            comment: {
 
−
                validators: {
 
−
                      stringLength: {
 
−
                        min: 10,
 
−
                        max: 200,
 
−
                        message:'Please enter at least 10 characters and no more than 200'
 
−
                    },
 
−
                    notEmpty: {
 
−
                        message: 'Please supply a description of your project'
 
−
                    }
 
−
                    }
 
−
                }
 
−
            }
 
−
        })
 
−
        .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>
 
−
 
 
−
<!-- Text input-->
 
−
 
 
−
<div class="form-group">
 
−
  <label class="col-md-4 control-label">First Name</label> 
 
−
   <div class="col-md-4 inputGroupContainer">
 
−
  <div class="input-group">
 
−
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
 
−
   <input  name="first_name" placeholder="First Name" class="form-control"  type="text">
 
−
    </div>
 
−
   </div>
 
−
</div>
 
−
 
 
−
<!-- Text input-->
 
−
 
 
−
<div class="form-group">
 
−
  <label class="col-md-4 control-label" >Last Name</label>
 
−
     <div class="col-md-4 inputGroupContainer">
 
−
     <div class="input-group">
 
−
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
 
−
  <input name="last_name" placeholder="Last Name" class="form-control" type="text">
 
−
     </div>
 
−
  </div>
 
−
</div>
 
−
 
 
−
<!-- Text input-->
 
−
      <div class="form-group">
 
−
  <label class="col-md-4 control-label">E-Mail</label> 
 
−
    <div class="col-md-4 inputGroupContainer">
 
−
    <div class="input-group">
 
−
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
 
−
  <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
 
−
    </div>
 
−
  </div>
 
−
</div>
 
−
 
 
−
 
 
−
<!-- Text input-->
 
−
     
 
−
<div class="form-group">
 
−
  <label class="col-md-4 control-label">Phone #</label> 
 
−
     <div class="col-md-4 inputGroupContainer">
 
−
    <div class="input-group">
 
−
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
 
−
  <input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
 
−
     </div>
 
−
  </div>
 
−
</div>
 
−
 
 
−
<!-- Text input-->
 
−
     
 
−
<div class="form-group">
 
−
  <label class="col-md-4 control-label">Address</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="address" placeholder="Address" class="form-control" type="text">
 
−
     </div>
 
−
  </div>
 
−
</div>
 
−
 
 
−
<!-- 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>
 
 
</source>
 
</source>
 +
[[Category:RythmTemplate]]

Latest revision as of 16:43, 30 November 2017

Links

Rythm template

@// Rythm template for the WikiCMS approach
@include(wiki.MediaWiki.BITPlan.rythm)
@{
  SelectField selectField=new SelectField("training","Seminar","Training","CPSA-F","CPSA-F","book",0);
  String [] trainings={"Certified Professional for Software Architecture Foundation-Level CPSA-F","Certified Professional for Requirements Engineering Foundation-Level CPRE-FL"};
  selectField.addSelections(trainings);
  Field[] fields={
    selectField,
    new TextField("name","Name","Name","John Doe","Erika Mustermann","user",2),
    new TextField("organisation","Organization","Organiation","Doe Inc.","Mustermann GmbH","user",2),
    new TextField("email","E-Mail Address","E-Mail Adresse","john@doe.com","erika@mustermann.de","envelope",5),
    new TextField("phone","Phone number","Telefon","+1 845 555-1212","+49 30 675797","earphone",8),
    new TextField("address","Address","Adresse","12 Westend Ave","Mauerstr. 12","home",8),
    new TextField("zip","ZIP Code","PLZ","10023","10117","home",3),
    new TextField("city","City","Ort","New York","Berlin","home",2),
    new TextField("country","Country","Land","US","DE","home",2),
    new TextAreaField("message","Your Message to us","Ihre Nachricht an us","Your Message","Ihre Nachricht","pencil",10)
  };
  Form form=new Form(de,postService,postToken,fields);
  form.setTitle("Your contact with us","Ihre Nachricht an uns");
  form.setSuccess("Thanks for contacting us, we will get back to you shortly","Vielen Dank für Ihre Kontaktaufnahme, wir melden uns unverzüglich");
  for (Field field:form.getFields()) { 
    field.labelClass="bitplanorange";
  }
}
@BITPlanHeader(languageCode,"ContactTest")
@formvalidate(form)
  </head>
  <body>
@BITPlanMenu(de)
  <div class="container">
@showform(form) 
@formDebug(form)
   </div><!-- /.container -->
@footer(de)
Retrieved from "https://wiki.bitplan.com/index.php?title=ContactTest.rythm&oldid=5247"