Difference between revisions of "ContactTest.rythm"

From BITPlan Wiki
Jump to navigation Jump to search
(Created page with "= Links = https://codepen.io/jaycbrf/pen/iBszr = Rythm template = <source lang='html'> </source>")
 
Line 3: Line 3:
 
= Rythm template =
 
= Rythm template =
 
<source lang='html'>
 
<source lang='html'>
 +
<html>
 +
<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>

Revision as of 12:20, 4 November 2017

Links

https://codepen.io/jaycbrf/pen/iBszr

Rythm template

<html>
<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>
Retrieved from "https://wiki.bitplan.com/index.php?title=ContactTest.rythm&oldid=3458"