Checkout form

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

Your cart 3

Product name
Brief description
$12
Second product
Brief description
$8
Third item
Brief description
$5
Promo code
EXAMPLECODE
-$5
Total (USD) $20

Billing address

@
Your username is required.


Payment

Full name as displayed on card

Template-Code in blade

  <div class="container">
    <div class="py-5 text-center">
      @headline([
        'title' => 'Checkout form',
      ])

      <p class="lead">
        Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
      </p>
    </div>

    <div class="row">
      <div class="col-md-4 order-md-2 mb-4">
        @headline([
          'headlineClass' => 'd-flex justify-content-between align-items-center mb-3',
          'headlineTag' => 'h4',
          'title' => '<span class="text-muted">Your cart</span>
          <span class="badge badge-secondary badge-pill">3</span>',
        ])

        @component('lbc.components.list-group', [
          'listGroupClass' => 'mb-3',
          'listGroupItemClass' => 'd-flex justify-content-between lh-condensed'
        ])
          @slot('slot1')
            <div>
              <h6 class="my-0">Product name</h6>

              <small class="text-muted">Brief description</small>
            </div>

            <span class="text-muted">$12</span>
          @endslot

          @slot('slot2')
            <div>
              <h6 class="my-0">Second product</h6>

              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$8</span>
          @endslot

          @slot('slot3')
            <div>
              <h6 class="my-0">Third item</h6>

              <small class="text-muted">Brief description</small>
            </div>

            <span class="text-muted">$5</span>
          @endslot

          @slot('slot4')
            <div class="text-success">
              <h6 class="my-0">Promo code</h6>

              <small>EXAMPLECODE</small>
            </div>

            <span class="text-success">-$5</span>
          @endslot

          @slot('slot5')
            <span>Total (USD)</span>
            <strong>$20</strong>
          @endslot
        @endcomponent

        <form class="card p-2">
          {{--Input group coming soon--}}
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Promo code">

            <div class="input-group-append">
              <button type="submit" class="btn btn-secondary">Redeem</button>
            </div>
          </div>
        </form>
      </div>

      <div class="col-md-8 order-md-1">
        <h4 class="mb-3">Billing address</h4>

        <form class="needs-validation" novalidate="">
          <div class="row">
            <div class="col-md-6 mb-3">
              @input([
                'name' => 'name',
                'labelName' => 'First name',
              ])
            </div>

            <div class="col-md-6 mb-3">
              @input([
                'name' => 'lastname',
                'labelName' => 'Last name',
                'required' => true,
                'validation' => [
                  'state' => 'invalid',
                  'message' => 'Your lastname is required.'
                  ],
              ])
            </div>
          </div>

          <div class="mb-3">
            <label for="username">Username</label>
            {{--Input groups coming soon--}}
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">@</span>
              </div>

              <input type="text" class="form-control" id="username" placeholder="Username" required="">

              <div class="invalid-feedback" style="width: 100%;">
                Your username is required.
              </div>
            </div>
          </div>

          <div class="mb-3">
            @input([
              'name' => 'email',
              'type' => 'email',
              'placeholder' => 'you@example.com',
              'labelName' => 'Email <span class="text-muted">(Optional)</span>',
            ])
          </div>

          <div class="mb-3">
            @input([
              'name' => 'address',
              'placeholder' => '1234 Main St',
              'labelName' => 'Address',
                'validation' => [
                  'state' => 'invalid',
                  'message' => 'Your address is required.'
                  ],
            ])
          </div>

          <div class="mb-3">
            @input([
              'name' => 'address2',
              'placeholder' => 'Apartment or suite',
              'labelName' => 'Address 2 <span class="text-muted">(Optional)</span>',
            ])
          </div>

          <div class="row">
            <div class="col-md-5 mb-3">
              @select([
                'inputClass' => 'custom-select d-block w-100',
                'name' => 'country',
                'labelName' => 'Country',
                'items' => ['Choose...', 'Germany'],
                'validation' => [
                  'state' => 'invalid',
                  'message' => 'Your country is required.'
                ],
              ])
            </div>

            <div class="col-md-4 mb-3">
              @select([
                'inputClass' => 'custom-select d-block w-100',
                'name' => 'state',
                'labelName' => 'State',
                'items' => ['Choose...', 'Frankfurt']
              ])
            </div>

            <div class="col-md-3 mb-3">
              @input([
                'name' => 'zip',
                'labelName' => 'Zip',
              ])
            </div>
          </div>

          <hr class="mb-4">

          @checkbox([
            'formGroupClass' => 'mb-0',
            'name' => 'same-address',
            'labelName' => 'Shipping address is the same as my billing address',
          ])

          @checkbox([
            'formGroupClass' => 'mb-0',
            'name' => 'save-info',
            'labelName' => 'Save this information for next time',
            'validation' => [
              'state' => 'invalid',
              'message' => 'Your save-info is required.'
            ],
          ])

          <hr class="mb-4">

          @headline([
            'headlineClass' => 'mb-3',
            'headlineTag' => 'h4',
            'title' => 'Payment',
          ])

          <div class="d-block my-3">
            {{--Radios coming soon--}}
            <div class="custom-control custom-radio">
              <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked="" required="">

              <label class="custom-control-label" for="credit">Credit card</label>
            </div>

            <div class="custom-control custom-radio">
              <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required="">

              <label class="custom-control-label" for="debit">Debit card</label>
            </div>

            <div class="custom-control custom-radio">
              <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required="">

              <label class="custom-control-label" for="paypal">PayPal</label>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              @input([
                'name' => 'cc-name',
                'labelName' => 'Name on card',
                'formText' => 'Full name as displayed on card',
              ])
            </div>

            <div class="col-md-6">
              @input([
                'name' => 'cc-number',
                'labelName' => 'Credit card number',
                'validation' => [
                  'state' => 'invalid',
                  'message' => 'Your credit card number is required.'
                ],
              ])
            </div>
          </div>

          <div class="row">
            <div class="col-md-3">
              @input([
                'name' => 'cc-expiration',
                'labelName' => 'Expiration',
              ])
            </div>

            <div class="col-md-3">
              @input([
                'name' => 'cc-cvv',
                'labelName' => 'CVV',
              ])
            </div>
          </div>

          <hr class="mb-4">

          <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
        </form>
      </div>
    </div>

    <footer class="my-5 pt-5 text-muted text-center text-small">
      <p class="mb-1">© 2017-2019 Company Name</p>
      @php
        $example = [
          [
            'title' => 'Privacy',
            'url' => '#',
          ],
          [
            'title' => 'Terms',
            'url' => '#',
          ],
          [
            'title' => 'Support',
            'url' => '#',
          ],
        ]
      @endphp

      <ul class="list-inline">
        @foreach($example as $item)
          <li class="list-inline-item">
            @link($item)
          </li>
        @endforeach
      </ul>
    </footer>
  </div>

  @push('js')
    <script>
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function () {
        'use strict'

        window.addEventListener('load', function () {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation')

          // Loop over them and prevent submission
          Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
              if (form.checkValidity() === false) {
                event.preventDefault()
                event.stopPropagation()
              }
              form.classList.add('was-validated')
            }, false)
          })
        }, false)
      }())
    </script>
  @endpush