# Form - Layout

## [Interactive demo](https://vision.crimsonlogic.studio/jds/2.1/page-with-form.html)

## Form Panel Title (Label on Top)

Form fields are grouped and wrapped inside `form-panel`div

<div align="left"><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZwwgsO-M5oqyxJxAoq%2F-MZx-6VZ1s9-mEdbCTzH%2Fimage.png?alt=media&#x26;token=bae5dceb-02ec-42f7-bb83-97eb23e0715c" alt=""></div>

<div align="left"><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZwwgsO-M5oqyxJxAoq%2F-MZx-clpI1tz-6uQEaJC%2Fimage.png?alt=media&#x26;token=a184577a-33c8-4d6b-8502-5a57829b81c2" alt=""></div>

<div align="left"><figure><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5tcH1W94H2w1w4BOYwsj%2Fuploads%2F2naft5abhNNiY2WGzBpy%2Fimage.png?alt=media&#x26;token=59ff3a1d-6f83-4fb2-b1be-89b07896f08b" alt=""><figcaption></figcaption></figure></div>

{% code overflow="wrap" %}

```html
<div class="form-panel">
          <div class="form-panel-header">
            <h2>Form Panel  Title (Label on Top) </h2>
            <p>Form fields are grouped and wrapped inside <code>form-panel</code> div.</p>
          </div>
          <div class="form-panel-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="col-form-label">Full Name</label>
                  <input class="form-control" type="text">
                  <small class="form-text text-muted">Please enter your full name</small> </div>
                <div class="form-group">
                  <label class="col-form-label">Email Address</label>
                  <input class="form-control" id="email" name="email" type="email" aria-describedby="email" autocomplete="email" spellcheck="false">
                  <small class="form-text text-muted">We will never share your email with anyone else</small> </div>
                <div class="form-group">
                  <label class="col-form-label">Postal code</label>
                  <div class="input-group">
                    <input type="text" class="form-control form-control-xsm" placeholder="" aria-label="" aria-describedby="">
                    <div class="input-group-append">
                      <button class="btn btn-primary" type="button">Find</button>
                    </div>
                  </div>
                  <small class="form-text text-muted">This is example helper text!</small> </div>
                <div class="form-group">
                  <label class="col-form-label">Block / house no.</label>
                  <input type="text" value="53A" class="form-control form-control-sm">
                </div>
                <div class="form-group">
                  <label class="col-form-label">Street Name</label>
                  <input type="text" value="Tampines Street 12" class="form-control">
                </div>
                <div class="multi-field">
                  <div class="form-group">
                    <label class="col-form-label">Floor no.<br>
                      (optional)</label>
                    <input type="text" value="12" class="form-control form-control-sm">
                  </div>
                  <div class="form-group">
                    <label class="col-form-label">Unit no.<br>
                      (optional)</label>
                    <input type="text" value="12" class="form-control form-control-sm">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-form-label">Subscription</label>
                  <div class="input-group">
                    <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm"><i class="far fa-dollar-sign"></i></span> </div>
                    <input type="text" class="form-control form-control-sm">
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-form-label">Communication</label>
                  <div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" name="Communication">
                        Email <span class="checkbox-overlay "></span> </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" name="Communication">
                        SMS <span class="checkbox-overlay "></span> </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" name="Communication">
                        Phone <span class="checkbox-overlay "></span> </label>
                    </div>
                  </div>
                </div>
                <div class="form-group required">
                  <label class="col-form-label">Communication</label>
                  <div>
                    <div class="form-check">
                      <label class="form-check-label" for="RadioDefault211">
                        <input class="form-check-input" type="radio" name="RadioDefault111" id="RadioDefault211">
                        Radio 1 (Default) <span class="radio-overlay "></span> </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label" for="RadioDefault212">
                        <input class="form-check-input" type="radio" name="RadioDefault111" id="RadioDefault212">
                        Radio 2 (Default) <span class="radio-overlay "></span> </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label" for="RadioDefault213">
                        <input class="form-check-input" type="radio" name="RadioDefault111" id="RadioDefault213">
                        Radio 3 (Default) <span class="radio-overlay "></span> </label>
                    </div>
                  </div>
                  <span class="message text-danger"><i class="fas fa-exclamation-circle mr-1"></i>This is an error message. </span> </div>
                <div class="form-group required">
                  <label class="col-form-label">Input with success message</label>
                  <div class="field-icon field-success">
                    <input class="form-control" type="text">
                  </div>
                  <span class="message text-success"><i class="fas fa-check-circle mr-1"></i>This is a success message.</span> <small class="form-text text-muted">Example help text which will remains unchanged</small> </div>
				  
				  <div class="form-group required">
                  <label class="col-form-label">Input with warning message</label>
                  <div class="field-icon field-warning">
                    <input class="form-control" type="text">
                  </div>
                  <span class="message text-warning"><i class="fas fa-exclamation-triangle mr-1"></i>This is a warning message.</span> <small class="form-text text-muted">Example help text which will remains unchanged</small> </div>
                <div class="form-group required field-has-error">
                  <label class="col-form-label">Input with error</label>
                  <div class="field-icon field-danger">
                    <input class="form-control" type="text">
                  </div>
                  <span class="message text-danger"><i class="fas fa-exclamation-circle mr-1"></i>This is an error message. </span> <small class="form-text text-muted">Example help text which will remains unchanged</small> </div>
              </div>
            </div>
          </div>
          <div class="form-panel-footer text-center">
            <button type="button" class="btn btn-primary my-1">Action</button>
            <button type="button" class="btn btn-dark my-1">Action</button>
          </div>
        </div>
```

{% endcode %}

## Form Panel (Label on left)

<div align="left"><figure><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5tcH1W94H2w1w4BOYwsj%2Fuploads%2F0i9ZFfdapvXJKxobpE5Z%2Fimage.png?alt=media&#x26;token=4c30ad57-d085-46b9-abff-6321d2963983" alt=""><figcaption></figcaption></figure></div>

{% code overflow="wrap" %}

```html
<div class="form-panel-boxed">
          <div class="form-panel-header">
            <h2>Form Panel Title (Label on left)</h2>
            <p>Form fields are grouped and wrapped inside <code>form-panel-boxed</code> div.</p>
          </div>
          <div class="form-panel-body">
            <div class="form-group row">
              <label class="col-form-label col-lg-4">Full Name</label>
              <div class="col-lg-6">
                <input class="form-control" type="text">
                <small class="form-text text-muted">Please enter your full name</small> </div>
            </div>
            <div class="form-group row">
              <label class="col-form-label col-lg-4">Email Address</label>
              <div class="col-lg-6">
                <input class="form-control" id="email2" name="email" type="email" aria-describedby="email" autocomplete="email" spellcheck="false">
                <small class="form-text text-muted">We will never share your email with anyone else</small> </div>
            </div>
            <div class="form-group row">
              <label class="col-form-label col-lg-4">Subscription</label>
              <div class="col-lg-6">
                <div class="input-group">
                  <div class="input-group-prepend"> <span class="input-group-text" id="sizing-sm"><i class="far fa-dollar-sign"></i></span> </div>
                  <input type="text" class="form-control form-control-sm">
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-form-label col-lg-4">Communication</label>
              <div class="col-lg-6">
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="Communication">
                    Email <span class="checkbox-overlay "></span> </label>
                </div>
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="Communication">
                    SMS <span class="checkbox-overlay "></span> </label>
                </div>
                <div class="form-check form-check-inline">
                  <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="Communication">
                    Phone <span class="checkbox-overlay "></span> </label>
                </div>
              </div>
            </div>
            <div class="form-group row required">
              <label class="col-form-label col-lg-4">Communication</label>
              <div class="col-lg-6">
                <div class="form-check form-check-inline">
                  <label class="form-check-label" for="RadioDefault2111">
                    <input class="form-check-input" type="radio" name="RadioDefault1111" id="RadioDefault2111">
                    Radio 1 (Default) <span class="radio-overlay "></span> </label>
                </div>
                <div class="form-check form-check-inline">
                  <label class="form-check-label" for="RadioDefault2122">
                    <input class="form-check-input" type="radio" name="RadioDefault1111" id="RadioDefault2122">
                    Radio 2 (Default) <span class="radio-overlay "></span> </label>
                </div>
                <div class="form-check form-check-inline">
                  <label class="form-check-label" for="RadioDefault2133">
                    <input class="form-check-input" type="radio" name="RadioDefault1111" id="RadioDefault2133">
                    Radio 3 (Default) <span class="radio-overlay "></span> </label>
                </div>
                <span class="message text-danger"><i class="fas fa-exclamation-circle mr-1"></i>This is an error message. </span> </div>
            </div>
            <div class="form-group required row">
              <label class="col-form-label col-lg-4">Input with success message</label>
              <div class="col-lg-6">
                <div class="field-icon field-success">
                  <input class="form-control" type="text">
                </div>
                <span class="message text-success"><i class="fas fa-check-circle mr-1"></i>This is a success message.</span> <small class="form-text text-muted">Example help text which will remains unchanged</small> </div>
            </div>
			  
			<div class="form-group required row">
              <label class="col-form-label col-lg-4">Input with warning message</label>
              <div class="col-lg-6">
                <div class="field-icon field-warning">
                  <input class="form-control" type="text">
                </div>
                <span class="message text-warning"><i class="fas fa-exclamation-triangle mr-1"></i>This is a warning message.</span> <small class="form-text text-muted">Example help text which will remains unchanged</small> </div>
            </div>
            <div class="form-group required row  field-has-error">
              <label class="col-form-label col-lg-4">Input with error message</label>
              <div class="col-lg-6">
                <div class="field-icon field-danger">
                  <input class="form-control" type="text">
                </div>
                <span class="message text-danger"><i class="fas fa-exclamation-circle mr-1"></i>This is an error message. </span> <small class="form-text text-muted">Example help text which will remains unchanged</small> </div>
            </div>
          </div>
          <div class="form-panel-footer text-center">
            <button type="button" class="btn btn-primary my-1">Action</button>
            <button type="button" class="btn btn-dark my-1">Action</button>
          </div>
        </div>
```

{% endcode %}
