Skip to content

Instantly share code, notes, and snippets.

@redgeoff

redgeoff/index.html

Created March 17, 2017 17:44
Show Gist options
  • Save redgeoff/46320afe82c98424366e3b5910f37c92 to your computer and use it in GitHub Desktop.
Save redgeoff/46320afe82c98424366e3b5910f37c92 to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal Auto Width Help Right With Errors Form
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Auto Width Help Right With Errors Form</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container padding">
<form class="form-horizontal">
<div class="form-group">
<ol class="breadcrumb">
<li>
<h3 class="panel-title">Directory Contact:</h3>
</li>
</ol>
</div>
<div class="form-group">
<div class="ff-description container">The following information will be used in the printed show directory and published in other printed materials.</div>
</div>
<div class="form-group">
<label id="billing_contact_sameLabel" for="billing_contact_same" class="col-sm-2 control-label">Same as Internal/Contract</label>
<div class="col-sm-10">
<div class="ff-field">
<div class="ff-field-field">
<input class="ff-checkbox" type="checkbox" id="billing_contact_same" name="billing_contact_same" />
</div>
<div class="ff-field-help">
<p class="help-block">Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text.</p>
</div>
</div>
</div>
</div>
<div class="form-group has-error has-feedback">
<label id="contact_titleLabel" for="contact_title" class="col-sm-2 control-label">
Job Title <p class="ff-error">cannot be blank</p>
</label>
<div class="col-sm-10">
<div class="ff-field">
<div class="ff-field-field">
<input class="FORMfieldsText form-control" type="text" id="contact_title" name="contact_title" maxlength="40" size="40" aria-describedby="contact_titleStatus"/>
</div>
<div class="ff-field-help">
<p class="help-block">Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text. Example help text.</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<label id="contact_first_nameLabel" for="contact_first_name" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<div class="ff-field">
<div class="ff-field-field">
<input class="FORMfieldsText form-control" type="text" id="contact_first_name" name="contact_first_name" maxlength="40" size="40" value="John" aria-describedby="contact_first_nameStatus"/>
</div>
<div class="ff-field-help">
<p class="help-block">Note: This is also the name of the person who will appear in the show directory.</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<label id="contact_last_nameLabel" for="contact_last_name" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<div class="ff-field">
<div class="ff-field-field">
<input class="FORMfieldsText form-control" type="text" id="contact_last_name" name="contact_last_name" maxlength="40" size="40" value="Smith" aria-describedby="contact_last_nameStatus"/>
</div>
<div class="ff-field-help">
<p class="help-block">Example help text. Example help text.</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<label id="contact_emailLabel" for="contact_email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<div class="ff-field">
<div class="ff-field-field">
<input class="FORMfieldsText form-control" type="text" id="contact_email" name="contact_email" maxlength="50" size="30" value="[email protected]" aria-describedby="contact_emailStatus"/>
</div>
<div class="ff-field-help">
<p class="help-block">Example help text. Example help text.</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<label id="contact_phoneLabel" for="contact_phone" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-10">
<div class="ff-field">
<div class="ff-field-field">
<div class="ff-margin-bottom">
<span class="ffSubFields input-group ff-input-group"><span class="FORMfields input-group-addon ff-field-text"> ( </span><input class="FORMfieldsText form-control" type="text" id="contact_phone_usa_p1" name="contact_phone_usa_p1" maxlength="3" size="3" value="212" aria-describedby="contact_phone_usa_p1Status"/>
<span class="FORMfields input-group-addon ff-field-text"> ) </span><input class="FORMfieldsText form-control" type="text" id="contact_phone_usa_p2" name="contact_phone_usa_p2" maxlength="3" size="3" value="344" aria-describedby="contact_phone_usa_p2Status" />
<span class="FORMfields input-group-addon ff-field-text"> - </span><input class="FORMfieldsText form-control" type="text" id="contact_phone_usa_p3" name="contact_phone_usa_p3" maxlength="4" size="4" value="2344" aria-describedby="contact_phone_usa_p3Status" />
<span class="FORMfields input-group-addon ff-field-text"> x </span><input class="FORMfieldsText form-control" type="text" id="contact_phone_usa_ext" name="contact_phone_usa_ext" maxlength="5" size="5" value="" aria-describedby="contact_phone_usa_extStatus" />
</span>
</div>
<input class="FORMfieldsCheckbox" type="checkbox" id="contact_phone_check" name="contact_phone_check"/>
<label id="contact_phone_intlLabel" for="contact_phone_intl" class="disabled ff-sub-label control-label ff-margin-bottom">International</label>
<input class="FORMfieldsText form-control" type="text" id="contact_phone_intl" name="contact_phone_intl" maxlength="30" size="20" value="" aria-describedby="contact_phone_intlStatus" disabled="disabled" />
</div>
<div class="ff-field-help">
<p class="help-block">Example help text. Example help text.</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<label id="imgLabel" for="img" class="col-sm-2 control-label">Profile Photo</label>
<div class="col-sm-10">
<div class="ff-field">
<div class="ff-field-field">
<div id="imgContainer"><input class="FORMfieldsFile" type="file" id="img" name="img" value=""aria-describedby="imgStatus"/></div>
</div>
<div class="ff-field-help">
<p class="help-block">Note: Changes are not complete until after you've clicked the Save button below. You can upload any .gif, .jpg, .jpeg, or .png image that is smaller than 2 MB. RGB files only (no CMYK).</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<style>
.padding {
padding: 20px;
}
.ff-margin-bottom {
margin-bottom: 10px !important;
}
.form-control {
width: auto;
}
/* Place help below fields when on a small screen */
@media screen and (min-width: 768px) {
.ff-field {
display: table;
}
.ff-field-field {
display: table-cell;
vertical-align: top;
}
.ff-field-help {
padding-left: 10px;
display: table-cell;
}
.ff-checkbox {
margin-top: 10px !important;
}
}
.ff-sub-label {
font-weight: normal;
}
.ff-field-text {
background-color: #ffffff;
border: none;
}
.ff-error {
font-weight: normal;
}
</style>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment