Forms

Code example

<form>
    <div class="zen-row">
        <div class="zg-col zg-col-6">
            <label for="exampleEmailInput">Your email</label>
            <input class="full-width" type="email" placeholder="This email address is being protected from spambots. You need JavaScript enabled to view it." id="exampleEmailInput">
        </div>
        <div class="zg-col zg-col-6">
            <label for="exampleRecipientInput">Reason for contacting</label>
                <select class="full-width" id="exampleRecipientInput">
                    <option value="Option 1">Questions</option>
                    <option value="Option 2">Admiration</option>
                    <option value="Option 3">Can I get your number?</option>
                </select>
        </div>
    </div>
    <label for="exampleMessage">Message</label>
        <textarea class="full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
        <label class="example-send-yourself-copy">
        <input type="checkbox">
        <span class="label-body">Send a copy to yourself</span>
    </label>
    <input class="btn btn-primary" type="submit" value="Submit">
</form>

Input addons

@
@example.com
$.00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>