# Form Layouts

This section of the documentation will guide you how to apply different form styles for your need, There 3 different new styles that you can use, Please follow the steps in achieving this. There is no need of external JS or CSS libraries.

## Creating a Standard Bootstrap Form

To create a native bootstrap form, the following tags are a must, It is the standard procedure in Bootstrap

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LEA0aBiI0H7A-WLuk6P%2F-LEA13TYi7_UQxPVVAnJ%2FScreen%20Shot%202018-06-04%20at%207.10.36%20PM.png?alt=media\&token=9abf56ea-527e-4336-beec-b6d3af060673)

1. You should have a form tag
2. A label for your input is conditional
3. Both label and input should be wrapped in `form-group`

```markup
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
```

{% hint style="info" %}
For more detailed documentation of Bootstrap forms [ Bootstrap Form Guideline](https://getbootstrap.com/docs/4.4/components/forms/)
{% endhint %}

## Pages Default Form Layout

To create a pages default form layout, append the class `form-group-default` to `form-group`.&#x20;

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LEA0aBiI0H7A-WLuk6P%2F-LEA0w8d6c1m1bqf52dM%2FScreen%20Shot%202018-06-04%20at%207.10.18%20PM.png?alt=media\&token=224d0991-e4eb-45fa-8c09-bdf61a252765)

```markup
<form role="form">
    
    <div class="form-group form-group-default ">
        <label>Project</label>
        <input type="email" class="form-control" required>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>First name</label>
                <input type="text" class="form-control" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Last name</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>

    <div class="form-group form-group-default">
        <label>Password</label>
        <input type="password" class="form-control" required>
    </div>

    <div class="form-group form-group-default">
        <label>Placeholder</label>
        <input type="email" class="form-control" placeholder="ex: some@example.com" required>
    </div>

    <div class="form-group form-group-default disabled">
        <label>Disabled</label>
        <input type="email" class="form-control" value="You can put anything here" disabled>
    </div>
</form>
```

## Pages Attached Form Layout

To create a attached form layout follow the following steps

1. Create a form following the Pages Default Form layout. Attached layout can ONLY be applied to the Pages Default style.
2. Wrap a set of `form-group-default` elements with `form-group-attached`

EXAMPLE :PROJECT NAMEFIRST NAMELAST NAME

```markup
<form role="form">
    <div class="form-group-attached">
        <div class="form-group form-group-default required">
            <label>Project name</label>
            <input type="text" class="form-control" name="projectName" required>
        </div>
        <div class="row clearfix">
            <div class="col-sm-6">
                <div class="form-group form-group-default required">
                    <label>First name</label>
                    <input type="text" class="form-control" name="firstName" required>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group form-group-default">
                    <label>Last name</label>
                    <input type="text" class="form-control" name="lastName">
                </div>
            </div>
        </div>
    </div>
</form>
```

## Pages Horizontal Form Layout

To create a pages default form layout, add the class `form-horizontal`.

EXAMPLE :

```markup
<form class="form-horizontal" role="form">
...
</form>
```