Forms
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Bootstrap Forms On Steroids
With WoodPecker®, you get the advantage of using bootstrap layout and classes for building your forms with the advantage of using the additional features offered by WoodPecker®. We add the features that are missing in Bootstrap to supercharge the Bootstrap Forms.
Code Snippet To Achieve The Above Results
<form class = "wdpk-form">
<div class = "form-group">
<label for = "exampleInputEmail1">Email Field</label>
<input type = "email" class = "form-control" id = "exampleInputEmail1"
aria-describedby = "emailHelp" placeholder = "Enter email">
<small id = "emailHelp" class = "form-text text-muted">We'll never share your email with
anyone else.
</small>
</div>
<div class = "form-group">
<label for = "exampleInputPassword1">Password</label>
<input type = "password" class = "form-control" id = "exampleInputPassword1"
placeholder = "Password">
</div>
<div class = "form-group">
<label for = "exampleFormControlSelect1">Example select</label>
<select class = "form-control" id = "exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class = "form-group">
<label for = "exampleFormControlSelect2">Example multiple select</label>
<select multiple class = "form-control" id = "exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class = "form-group">
<label for = "exampleFormControlTextarea1">Example textarea</label>
<textarea class = "form-control" id = "exampleFormControlTextarea1"
rows = "3"></textarea>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput">Disabled input</label>
<input type = "text" id = "disabledTextInput" class = "form-control"
placeholder = "Disabled input">
</div>
<div class = "form-group">
<label for = "disabledSelect">Disabled select menu</label>
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</fieldset>
<div class="input-group mb-4">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
</div>
<fieldset class = "form-group">
<div class = "row">
<legend class = "col-form-label col-sm-2 align-self-start">Radios</legend>
<div class = "col-sm-10">
<div class = "form-check wdpk-radio-wrapper">
<input class = "form-check-input wdpk-radio" type = "radio" name = "gridRadios"
id = "gridRadios1" value = "option1">
<label class = "form-check-label wdpk-radio-label" for = "gridRadios1">
First Radio
</label>
<span class = "wdpk-radio-on"></span>
</div>
<div class = "form-check wdpk-radio-wrapper">
<input class = "form-check-input wdpk-radio" type = "radio" name = "gridRadios"
id = "gridRadios2" value = "option2">
<label class = "form-check-label wdpk-radio-label" for = "gridRadios2">
Second Radio
</label>
<span class = "wdpk-radio-on"></span>
</div>
<div class = "form-check wdpk-radio-wrapper">
<input class = "form-check-input wdpk-radio" type = "radio" name = "gridRadios"
id = "gridRadios3" value = "option3">
<label class = "form-check-label wdpk-radio-label" for = "gridRadios3">
Third radio
</label>
<span class = "wdpk-radio-on"></span>
</div>
</div>
</div>
</fieldset>
<div class = "form-group row">
<div class = "col-sm-2 align-self-center">Checkbox</div>
<div class = "col-sm-10">
<div class = " form-check wdpk-checkbox-wrapper">
<input class = "form-check-input wdpk-checkbox" type = "checkbox" id = "exampleCheckbox">
<label class = "form-check-label wdpk-checkbox-label" for = "exampleCheckbox">
Example checkbox
</label>
<span class = "wdpk-checkmark"></span>
</div>
</div>
</div>
<button type = "submit" class = "btn btn-info">Submit</button>
</form>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Create Complex Form Structures
Code Snippet To Achieve The Above Results
<form class = "wdpk-from">
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputEmail4">Email</label>
<input type = "email" class = "form-control" id = "inputEmail4"
placeholder = "Email">
</div>
<div class = "form-group col-md-6">
<label for = "inputPassword4">Password</label>
<input type = "password" class = "form-control" id = "inputPassword4"
placeholder = "Password">
</div>
</div>
<div class = "form-group">
<label for = "inputAddress">Address</label>
<input type = "text" class = "form-control" id = "inputAddress"
placeholder = "1234 Main St">
</div>
<div class = "form-group">
<label for = "inputAddress2">Address 2</label>
<input type = "text" class = "form-control" id = "inputAddress2"
placeholder = "Apartment, studio, or floor">
</div>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputCity">City</label>
<input type = "text" class = "form-control" id = "inputCity">
</div>
<div class = "form-group col-md-4">
<label for = "inputState">State</label>
<select id = "inputState" class = "form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class = "form-group col-md-2">
<label for = "inputZip">Zip</label>
<input type = "text" class = "form-control" id = "inputZip">
</div>
</div>
<div class = "form-group">
<div class = "form-check wdpk-checkbox-wrapper">
<input class = "form-check-input wdpk-checkbox" type = "checkbox" id = "exampleCheckbox2">
<label class = "form-check-label wdpk-checkbox-label" for = "exampleCheckbox2">
Check Me Out
</label>
<span class = "wdpk-checkmark"></span>
</div>
</div>
<button type = "submit" class = "btn btn-info">Sign in</button>
</form>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
