# Forms: Directory

## Component #1

- Preview
- HTML
- CSS
- JS

# Submit App

Submit your products today and get more exposure.

Product logo
Upload Logo
Project name
App website
Preview image
Browse your device and upload images Maximum file size is 2MB
Category
Short description
Detailed description

                    <!-- Form Card -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="w-lg-75 mx-lg-auto">
                        <!-- Heading -->
                        <div class="text-center mb-7">
                          <h1 class="card-title">Submit App</h1>
                          <p class="card-text">Submit your products today and get more exposure.</p>
                        </div>
                        <!-- End Heading -->

                        <!-- Card -->
                        <div class="card card-bordered shadow-none">
                          <div class="card-body">
                            <!-- Form -->
                            <form>
                              <!-- Form -->
                              <div class="row mb-3">
                                <label class="col-sm-3 col-form-label form-label">Product logo</label>

                                <div class="col-sm-9">
                                  <!-- Media -->
                                  <div class="d-flex align-items-center">
                                    <!-- Avatar -->
                                    <label class="avatar avatar-xl avatar-circle" for="avatarUploader">
                                      <img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
                                    </label>

                                    <div class="d-grid d-sm-flex gap-2 ms-4">
                                      <div class="btn btn-primary btn-sm form-attachment-btn">Upload Logo
                                        <input type="file" class="js-file-attach form-attachment-btn-label" id="avatarUploader"
                                               data-hs-file-attach-options='{
                                                  "textTarget": "#avatarImg",
                                                  "mode": "image",
                                                  "targetAttr": "src",
                                                  "resetTarget": ".js-file-attach-reset-img",
                                                  "resetImg": "../assets/img/160x160/img2.jpg",
                                                  "allowTypes": [".png", ".jpeg", ".jpg"]
                                               }'>
                                      </div>
                                      <!-- End Avatar -->

                                      <button type="button" class="js-file-attach-reset-img btn btn-white btn-sm">Delete</button>
                                    </div>
                                  </div>
                                  <!-- End Media -->
                                </div>
                              </div>
                              <!-- End Form -->

                              <!-- Form -->
                              <div class="row mb-3">
                                <label for="submitAppProjectName" class="col-sm-3 col-form-label">Project name</label>
                                <div class="col-sm-9">
                                  <input type="password" class="form-control form-control-lg" id="submitAppProjectName" placeholder="project name" aria-label="project name">
                                </div>
                              </div>
                              <!-- End Form -->

                              <!-- Form -->
                              <div class="row mb-3">
                                <label for="submitAppWebsite" class="col-sm-3 col-form-label form-label">App website</label>
                                <div class="col-sm-9">
                                  <input type="password" class="form-control form-control-lg" id="submitAppWebsite" placeholder="https://example.com" aria-label="https://example.com">
                                </div>
                              </div>
                              <!-- End Form -->

                              <!-- Form -->
                              <div class="row mb-3">
                                <label class="col-sm-3 col-form-label form-label">Preview image</label>

                                <div class="col-sm-9">
                                  <!-- File Attachment Input -->
                                  <div id="dropzoneUpload" class="js-dropzone dz-dropzone dz-dropzone-card">
                                    <div class="dz-message">
                                      <img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="Image Description">
                                      <span class="d-block">Browse your device and upload images</span>
                                      <span class="d-block text-muted small">Maximum file size is 2MB</span>
                                    </div>
                                  </div>
                                  <!-- End File Attachment Input -->
                                </div>
                              </div>
                              <!-- End Form -->

                              <!-- Form -->
                              <div class="row mb-3">
                                <label for="submitAppCategoryLabel" class="col-sm-3 col-form-label form-label">Category</label>

                                <div class="col-sm-9">
                                  <!-- Select -->
                                  <select class="form-select form-select-lg" id="submitAppCategoryLabel">
                                    <option value="Ecommerce">Ecommerce</option>
                                    <option value="Finance">Finance</option>
                                    <option value="Marketplace">Marketplace</option>
                                    <option value="Social">Social</option>
                                    <option value="Others">Others</option>
                                  </select>
                                  <!-- End Select -->
                                </div>
                              </div>
                              <!-- End Form -->

                              <!-- Form-->
                              <div class="row mb-3">
                                <label for="shortDescriptionLabel" class="col-sm-3 col-form-label form-label">Short description</label>

                                <div class="col-sm-9">
                                  <div class="d-flex justify-content-end">
                                    <span id="maxLengthShortDescriptionCountCharacters" class="form-label-secondary"></span>
                                  </div>

                                  <textarea class="js-count-characters form-control" id="shortDescriptionLabel" placeholder="This is to provide an idea of what does your product do. A good short summary will entice users to click and visit your page." maxlength="70"
                                          data-hs-count-characters-options='{
                                            "output": "#maxLengthShortDescriptionCountCharacters"
                                          }'></textarea>
                                </div>
                              </div>
                              <!-- End Form -->

                              <!-- Form-->
                              <div class="row mb-3">
                                <label class="col-sm-3 col-form-label form-label">Detailed description</label>

                                <div class="col-sm-9">
                                  <!-- Quill -->
                                  <div class="quill-custom">
                                    <div class="js-quill" style="height: 15rem;"
                                         data-hs-quill-options='{
                                         "placeholder": "A detailed summary will better explain your products to the audiences. Our users will see this in your dedicated product page.",
                                          "modules": {
                                            "toolbar": [
                                              ["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
                                            ]
                                          }
                                         }'>
                                    </div>
                                  </div>
                                  <!-- End Quill -->
                                </div>
                              </div>
                              <!-- End Form-->

                              <div class="text-center mt-5">
                                <button type="submit" class="btn btn-primary btn-lg">Submit your project</button>
                              </div>
                            </form>
                            <!-- End Form -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>
                    <!-- End Form Card -->

                    <link rel="stylesheet" href="../node_modules/quill/dist/quill.snow.css">

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
                    <script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
                    <script src="../node_modules/quill/dist/quill.min.js"></script>
                    <script src="../node_modules/dropzone/dist/min/dropzone.min.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.quill.js"></script>
                    <script src="../assets/js/hs.dropzone.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF FILE ATTACH
                        // =======================================================
                        new HSFileAttach('.js-file-attach')

                        // INITIALIZATION OF COUNT CHARACTERS
                        // =======================================================
                        new HSCountCharacters('.js-count-characters')

                        // INITIALIZATION OF QUILLJS EDITOR
                        // =======================================================
                        HSCore.components.HSQuill.init('.js-quill')

                        // INITIALIZATION OF DROPZONE
                        // =======================================================
                        HSCore.components.HSDropzone.init('.js-dropzone')
                      })()
                    </script>

## Component #2

- Preview
- HTML
- CSS
- JS

# Real estate listing upload form

Please proofread your submission carefully before submitting.

Submissions which exceed maximum word counts will be edited.

#### Listing agent information

Listing agent name
Phone number
Real estate agency
Website address

#### Type of listing

House
Flat
Multi-family
Farms/Land

#### Listing information

Price
Year built
Address
City/Province
Lot size
Postal code
Bedroom
Bathroom
Listing description

#### Estimated running costs

Mortgage
Energy
Water
Home insurance

#### Upload images

Property media
Browse your device and upload images Maximum file size is 2MB
Floorplan
Upload floorplan Maximum file size is 1MB

                    <!-- Form -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="w-lg-75 mx-lg-auto">
                        <!-- Heading -->
                        <div class="text-center mb-2">
                          <h1 class="h2">Real estate listing upload form</h1>
                          <p class="mb-0">Please proofread your submission carefully before submitting.</p>
                          <p>Submissions which exceed maximum word counts will be edited.</p>
                        </div>
                        <!-- End Heading -->

                        <form>
                          <div class="mb-5">
                            <h4 class="my-7">Listing agent information</h4>

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="listingAgentNameUploadForm">Listing agent name</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-person-fill"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="listingAgentNameUploadForm" placeholder="Listing agent name" aria-label="Listing agent name">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="phoneNumberUploadForm">Phone number</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-telephone-inbound-fill"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="phoneNumberUploadForm" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="realEstateAgencyUploadForm">Real estate agency</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-briefcase-fill"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="realEstateAgencyUploadForm" placeholder="Real estate agency" aria-label="Real estate agency">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="websiteAddressUploadForm">Website address</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-globe2"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="websiteAddressUploadForm" placeholder="Website address" aria-label="Website address">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <h4 class="my-7">Type of listing</h4>

                            <div class="row gx-3">
                              <div class="col-6 col-md-3 mb-3">
                                <!-- Radio Check -->
                                <div class="form-check form-check-card text-center">
                                  <input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing1">
                                  <label class="form-check-label" for="typeOfListing1">
                                    <img class="w-50 mb-3" src="../assets/svg/illustrations/small-house.svg" alt="SVG">
                                    <span class="d-block">House</span>
                                  </label>
                                </div>
                                <!-- End Radio Check -->
                              </div>
                              <!-- End Col -->

                              <div class="col-6 col-md-3 mb-3">
                                <!-- Radio Check -->
                                <div class="form-check form-check-card text-center">
                                  <input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing2" checked>
                                  <label class="form-check-label" for="typeOfListing2">
                                    <img class="w-50 mb-3" src="../assets/svg/illustrations/flat-house.svg" alt="SVG">
                                    <span class="d-block">Flat</span>
                                  </label>
                                </div>
                                <!-- End Radio Check -->
                              </div>
                              <!-- End Col -->

                              <div class="col-6 col-md-3 mb-3">
                                <!-- Radio Check -->
                                <div class="form-check form-check-card text-center">
                                  <input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing3">
                                  <label class="form-check-label" for="typeOfListing3">
                                    <img class="w-50 mb-3" src="../assets/svg/illustrations/multi-family-house.svg" alt="SVG">
                                    <span class="d-block">Multi-family</span>
                                  </label>
                                </div>
                                <!-- End Radio Check -->
                              </div>
                              <!-- End Col -->

                              <div class="col-6 col-md-3 mb-3">
                                <!-- Radio Check -->
                                <div class="form-check form-check-card text-center">
                                  <input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing4">
                                  <label class="form-check-label" for="typeOfListing4">
                                    <img class="w-50 mb-3" src="../assets/svg/illustrations/farm-land.svg" alt="SVG">
                                    <span class="d-block">Farms/Land</span>
                                  </label>
                                </div>
                                <!-- End Radio Check -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <h4 class="my-7">Listing information</h4>

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="currencyUploadForm">Price</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 288 512"><path d="M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z"/></svg>
                                      </span>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="currencyUploadForm" placeholder="Price" aria-label="Price">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <label class="form-label" for="yearBuiltUploadForm">Year built</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-calendar-week"></i>
                                    </span>
                                    <select id="yearBuiltUploadForm" class="form-select form-select-lg">
                                      <option selected disabled>Select year</option>
                                      <option value="yearBuiltSelectOlder">Older</option>
                                      <option value="yearBuiltSelect1985">1985</option>
                                      <option value="yearBuiltSelect1986">1986</option>
                                      <option value="yearBuiltSelect1987">1987</option>
                                      <option value="yearBuiltSelect1988">1988</option>
                                      <option value="yearBuiltSelect1989">1989</option>
                                      <option value="yearBuiltSelect1990">1990</option>
                                      <option value="yearBuiltSelect1991">1991</option>
                                      <option value="yearBuiltSelect1992">1992</option>
                                      <option value="yearBuiltSelect1993">1993</option>
                                      <option value="yearBuiltSelect1994">1994</option>
                                      <option value="yearBuiltSelect1995">1995</option>
                                      <option value="yearBuiltSelect1996">1996</option>
                                      <option value="yearBuiltSelect1997">1997</option>
                                      <option value="yearBuiltSelect1998">1998</option>
                                      <option value="yearBuiltSelect1999">1999</option>
                                      <option value="yearBuiltSelect2000">2000</option>
                                      <option value="yearBuiltSelect2001">2001</option>
                                      <option value="yearBuiltSelect2002">2002</option>
                                      <option value="yearBuiltSelect2003">2003</option>
                                      <option value="yearBuiltSelect2004">2004</option>
                                      <option value="yearBuiltSelect2005">2005</option>
                                      <option value="yearBuiltSelect2006">2006</option>
                                      <option value="yearBuiltSelect2007">2007</option>
                                      <option value="yearBuiltSelect2008">2008</option>
                                      <option value="yearBuiltSelect2009">2009</option>
                                      <option value="yearBuiltSelect2010">2010</option>
                                      <option value="yearBuiltSelect2011">2011</option>
                                      <option value="yearBuiltSelect2012">2012</option>
                                      <option value="yearBuiltSelect2013">2013</option>
                                      <option value="yearBuiltSelect2014">2014</option>
                                      <option value="yearBuiltSelect2015">2015</option>
                                      <option value="yearBuiltSelect2016">2016</option>
                                      <option value="yearBuiltSelect2017">2017</option>
                                    </select>
                                  </div>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="addressUploadForm">Address</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-geo-alt-fill"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="addressUploadForm" placeholder="Address" aria-label="Address">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="cityUploadForm">City/Province</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-building"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="cityUploadForm" placeholder="City/Province" aria-label="City/Province">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="lotSizeUploadForm">Lot size</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-rulers"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="lotSizeUploadForm" placeholder="Lot size" aria-label="Lot size">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="postalCodeUploadForm">Postal code</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-envelope-open-fill"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="postalCodeUploadForm" placeholder="Postal code" aria-label="Postal code">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="bedroomUploadForm">Bedroom</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
                                      </span>
                                    </span>
                                    <select id="bedroomUploadForm" class="form-select form-select-lg">
                                      <option selected disabled>Select amount</option>
                                      <option value="bedroom1">1</option>
                                      <option value="bedroom2">2</option>
                                      <option value="bedroom3">3</option>
                                      <option value="bedroom4">4</option>
                                      <option value="bedroom5plus">5+</option>
                                    </select>
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="BathroomUploadForm">Bathroom</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
                                      </span>
                                    </span>
                                    <select id="BathroomUploadForm" class="form-select form-select-lg">
                                      <option selected disabled>Select amount</option>
                                      <option value="bathroom1">1</option>
                                      <option value="bathroom2">2</option>
                                      <option value="bathroom3">3</option>
                                      <option value="bathroom4">4</option>
                                      <option value="bathroom5plus">5+</option>
                                    </select>
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <!-- Form -->
                            <div class="mb-4">
                              <label class="form-label">Listing description</label>

                              <!-- Quill -->
                              <div class="quill-custom">
                                <div class="js-quill" style="height: 15rem;"
                                     data-hs-quill-options='{
                                     "placeholder": "Type your message...",
                                      "modules": {
                                        "toolbar": [
                                          ["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
                                        ]
                                      }
                                     }'>
                                </div>
                              </div>
                              <!-- End Quill -->
                            </div>
                            <!-- End Form -->

                            <h4 class="my-7">Estimated running costs</h4>

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="mortgageUploadForm">Mortgage</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><path d="M271.06,144.3l54.27,14.3a8.59,8.59,0,0,1,6.63,8.1c0,4.6-4.09,8.4-9.12,8.4h-35.6a30,30,0,0,1-11.19-2.2c-5.24-2.2-11.28-1.7-15.3,2l-19,17.5a11.68,11.68,0,0,0-2.25,2.66,11.42,11.42,0,0,0,3.88,15.74,83.77,83.77,0,0,0,34.51,11.5V240c0,8.8,7.83,16,17.37,16h17.37c9.55,0,17.38-7.2,17.38-16V222.4c32.93-3.6,57.84-31,53.5-63-3.15-23-22.46-41.3-46.56-47.7L282.68,97.4a8.59,8.59,0,0,1-6.63-8.1c0-4.6,4.09-8.4,9.12-8.4h35.6A30,30,0,0,1,332,83.1c5.23,2.2,11.28,1.7,15.3-2l19-17.5A11.31,11.31,0,0,0,368.47,61a11.43,11.43,0,0,0-3.84-15.78,83.82,83.82,0,0,0-34.52-11.5V16c0-8.8-7.82-16-17.37-16H295.37C285.82,0,278,7.2,278,16V33.6c-32.89,3.6-57.85,31-53.51,63C227.63,119.6,247,137.9,271.06,144.3ZM565.27,328.1c-11.8-10.7-30.2-10-42.6,0L430.27,402a63.64,63.64,0,0,1-40,14H272a16,16,0,0,1,0-32h78.29c15.9,0,30.71-10.9,33.25-26.6a31.2,31.2,0,0,0,.46-5.46A32,32,0,0,0,352,320H192a117.66,117.66,0,0,0-74.1,26.29L71.4,384H16A16,16,0,0,0,0,400v96a16,16,0,0,0,16,16H372.77a64,64,0,0,0,40-14L564,377a32,32,0,0,0,1.28-48.9Z"/></svg>
                                      </span>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="mortgageUploadForm" placeholder="Mortgage" aria-label="Mortgage">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="energyUploadForm">Energy</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512"><path d="M192 0C79.7 101.3 0 220.9 0 300.5 0 425 79 512 192 512s192-87 192-211.5c0-79.9-80.2-199.6-192-300.5zm0 448c-56.5 0-96-39-96-94.8 0-13.5 4.6-61.5 96-161.2 91.4 99.7 96 147.7 96 161.2 0 55.8-39.5 94.8-96 94.8z"/></svg>
                                      </span>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="energyUploadForm" placeholder="Energy" aria-label="Energy">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <div class="row">
                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="waterUploadForm">Water</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                        <i class="bi-droplet-half"></i>
                                      </span>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="waterUploadForm" placeholder="Mortgage" aria-label="Mortgage">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-6">
                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="homeInsuranceUploadForm">Home insurance</label>

                                  <div class="input-group input-group-merge">
                                    <span class="input-group-prepend input-group-text">
                                      <i class="bi-shield-shaded"></i>
                                    </span>
                                    <input type="text" class="form-control form-control-lg" id="homeInsuranceUploadForm" placeholder="Home insurance" aria-label="Home insurance">
                                  </div>
                                </div>
                                <!-- End Form -->
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <h4 class="my-7">Upload images</h4>

                            <div class="row">
                              <div class="col-lg-6 mb-3">
                                <label class="form-label">Property media</label>

                                <!-- File Attachment Input -->
                                <div id="imageDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
                                  <div class="dz-message">
                                    <img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
                                    <span class="d-block">Browse your device and upload images</span>
                                    <span class="d-block text-muted small">Maximum file size is 2MB</span>
                                  </div>
                                </div>
                                <!-- End File Attachment Input -->
                              </div>

                              <div class="col-lg-6 mb-3">
                                <label class="form-label">Floorplan</label>

                                <!-- File Attachment Input -->
                                <div id="floorplanDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
                                  <div class="dz-message">
                                    <img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
                                    <span class="d-block">Upload floorplan</span>
                                    <span class="d-block text-muted small">Maximum file size is 1MB</span>
                                  </div>
                                </div>
                                <!-- End File Attachment Input -->
                              </div>
                            </div>
                          </div>
                          <!-- End Row -->

                          <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                          </div>
                        </form>
                      </div>
                    </div>
                    <!-- End Form -->

                    <link rel="stylesheet" href="../node_modules/quill/dist/quill.snow.css">

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
                    <script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
                    <script src="../node_modules/quill/dist/quill.min.js"></script>
                    <script src="../node_modules/dropzone/dist/min/dropzone.min.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.quill.js"></script>
                    <script src="../assets/js/hs.dropzone.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF FILE ATTACH
                        // =======================================================
                        new HSFileAttach('.js-file-attach')

                        // INITIALIZATION OF COUNT CHARACTERS
                        // =======================================================
                        new HSCountCharacters('.js-count-characters')

                        // INITIALIZATION OF QUILLJS EDITOR
                        // =======================================================
                        HSCore.components.HSQuill.init('.js-quill')

                        // INITIALIZATION OF DROPZONE
                        // =======================================================
                        HSCore.components.HSDropzone.init('.js-dropzone')
                      })()
                    </script>

## Component #3

- Preview
- HTML

#### Billing address

First name
Valid first name is required.
Last name
Valid last name is required.
Email
Please enter a valid email address for shipping updates.
Address
Please enter your shipping address.
Address 2 (Optional)
Country
Please select a valid country.
State
Please provide a valid state.
Zip
Zip code required.

Shipping address is the same as my billing address
Save this information for next time

#### Payment

Credit card
Debit card
PayPal
Name on card Full name as displayed on card
Name on card is required
Credit card number
Credit card number is required
Expiration
Expiration date required
CVV
Security code required

Return to cart

                    <!-- Content -->
                    <div class="container content-space-1 content-space-lg-2">
                      <h4 class="mb-3">Billing address</h4>

                      <!-- Form -->
                      <form class="needs-validation" novalidate>
                        <div class="row g-3">
                          <div class="col-sm-6">
                            <label for="firstNameShopCheckout" class="form-label">First name</label>
                            <input type="text" class="form-control form-control-lg" id="firstNameShopCheckout" placeholder="" value="" required>
                            <div class="invalid-feedback">
                              Valid first name is required.
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-6">
                            <label for="lastNameShopCheckout" class="form-label">Last name</label>
                            <input type="text" class="form-control form-control-lg" id="lastNameShopCheckout" placeholder="" value="" required>
                            <div class="invalid-feedback">
                              Valid last name is required.
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-12">
                            <label for="emailShopCheckout" class="form-label">Email</label>
                            <input type="email" class="form-control form-control-lg" id="emailShopCheckout" placeholder="you@example.com">
                            <div class="invalid-feedback">
                              Please enter a valid email address for shipping updates.
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-12">
                            <label for="addressShopCheckout" class="form-label">Address</label>
                            <input type="text" class="form-control form-control-lg" id="addressShopCheckout" placeholder="1234 Main St" required>
                            <div class="invalid-feedback">
                              Please enter your shipping address.
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-12">
                            <label for="address2ShopCheckout" class="form-label">Address 2 <span class="form-label-secondary">(Optional)</span></label>
                            <input type="text" class="form-control form-control-lg" id="address2ShopCheckout" placeholder="Apartment or suite">
                          </div>
                          <!-- End Col -->

                          <div class="col-md-5">
                            <label for="countryShopCheckout" class="form-label">Country</label>

                            <!-- Select -->
                            <select class="form-select" id="countryShopCheckout" required>
                              <option value="">Choose...</option>
                              <option value="">Select country</option>
                              <option value="AF">Afghanistan</option>
                              <option value="AX">Åland Islands</option>
                              <option value="AL">Albania</option>
                              <option value="DZ">Algeria</option>
                              <option value="AS">American Samoa</option>
                              <option value="AD">Andorra</option>
                              <option value="AO">Angola</option>
                              <option value="AI">Anguilla</option>
                              <option value="AQ">Antarctica</option>
                              <option value="AG">Antigua and Barbuda</option>
                              <option value="AR">Argentina</option>
                              <option value="AM">Armenia</option>
                              <option value="AW">Aruba</option>
                              <option value="AU">Australia</option>
                              <option value="AT">Austria</option>
                              <option value="AZ">Azerbaijan</option>
                              <option value="BS">Bahamas</option>
                              <option value="BH">Bahrain</option>
                              <option value="BD">Bangladesh</option>
                              <option value="BB">Barbados</option>
                              <option value="BY">Belarus</option>
                              <option value="BE">Belgium</option>
                              <option value="BZ">Belize</option>
                              <option value="BJ">Benin</option>
                              <option value="BM">Bermuda</option>
                              <option value="BT">Bhutan</option>
                              <option value="BO">Bolivia, Plurinational State of</option>
                              <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                              <option value="BA">Bosnia and Herzegovina</option>
                              <option value="BW">Botswana</option>
                              <option value="BV">Bouvet Island</option>
                              <option value="BR">Brazil</option>
                              <option value="IO">British Indian Ocean Territory</option>
                              <option value="BN">Brunei Darussalam</option>
                              <option value="BG">Bulgaria</option>
                              <option value="BF">Burkina Faso</option>
                              <option value="BI">Burundi</option>
                              <option value="KH">Cambodia</option>
                              <option value="CM">Cameroon</option>
                              <option value="CA">Canada</option>
                              <option value="CV">Cape Verde</option>
                              <option value="KY">Cayman Islands</option>
                              <option value="CF">Central African Republic</option>
                              <option value="TD">Chad</option>
                              <option value="CL">Chile</option>
                              <option value="CN">China</option>
                              <option value="CX">Christmas Island</option>
                              <option value="CC">Cocos (Keeling) Islands</option>
                              <option value="CO">Colombia</option>
                              <option value="KM">Comoros</option>
                              <option value="CG">Congo</option>
                              <option value="CD">Congo, the Democratic Republic of the</option>
                              <option value="CK">Cook Islands</option>
                              <option value="CR">Costa Rica</option>
                              <option value="CI">Côte d'Ivoire</option>
                              <option value="HR">Croatia</option>
                              <option value="CU">Cuba</option>
                              <option value="CW">Curaçao</option>
                              <option value="CY">Cyprus</option>
                              <option value="CZ">Czech Republic</option>
                              <option value="DK">Denmark</option>
                              <option value="DJ">Djibouti</option>
                              <option value="DM">Dominica</option>
                              <option value="DO">Dominican Republic</option>
                              <option value="EC">Ecuador</option>
                              <option value="EG">Egypt</option>
                              <option value="SV">El Salvador</option>
                              <option value="GQ">Equatorial Guinea</option>
                              <option value="ER">Eritrea</option>
                              <option value="EE">Estonia</option>
                              <option value="ET">Ethiopia</option>
                              <option value="FK">Falkland Islands (Malvinas)</option>
                              <option value="FO">Faroe Islands</option>
                              <option value="FJ">Fiji</option>
                              <option value="FI">Finland</option>
                              <option value="FR">France</option>
                              <option value="GF">French Guiana</option>
                              <option value="PF">French Polynesia</option>
                              <option value="TF">French Southern Territories</option>
                              <option value="GA">Gabon</option>
                              <option value="GM">Gambia</option>
                              <option value="GE">Georgia</option>
                              <option value="DE">Germany</option>
                              <option value="GH">Ghana</option>
                              <option value="GI">Gibraltar</option>
                              <option value="GR">Greece</option>
                              <option value="GL">Greenland</option>
                              <option value="GD">Grenada</option>
                              <option value="GP">Guadeloupe</option>
                              <option value="GU">Guam</option>
                              <option value="GT">Guatemala</option>
                              <option value="GG">Guernsey</option>
                              <option value="GN">Guinea</option>
                              <option value="GW">Guinea-Bissau</option>
                              <option value="GY">Guyana</option>
                              <option value="HT">Haiti</option>
                              <option value="HM">Heard Island and McDonald Islands</option>
                              <option value="VA">Holy See (Vatican City State)</option>
                              <option value="HN">Honduras</option>
                              <option value="HK">Hong Kong</option>
                              <option value="HU">Hungary</option>
                              <option value="IS">Iceland</option>
                              <option value="IN">India</option>
                              <option value="ID">Indonesia</option>
                              <option value="IR">Iran, Islamic Republic of</option>
                              <option value="IQ">Iraq</option>
                              <option value="IE">Ireland</option>
                              <option value="IM">Isle of Man</option>
                              <option value="IL">Israel</option>
                              <option value="IT">Italy</option>
                              <option value="JM">Jamaica</option>
                              <option value="JP">Japan</option>
                              <option value="JE">Jersey</option>
                              <option value="JO">Jordan</option>
                              <option value="KZ">Kazakhstan</option>
                              <option value="KE">Kenya</option>
                              <option value="KI">Kiribati</option>
                              <option value="KP">Korea, Democratic People's Republic of</option>
                              <option value="KR">Korea, Republic of</option>
                              <option value="KW">Kuwait</option>
                              <option value="KG">Kyrgyzstan</option>
                              <option value="LA">Lao People's Democratic Republic</option>
                              <option value="LV">Latvia</option>
                              <option value="LB">Lebanon</option>
                              <option value="LS">Lesotho</option>
                              <option value="LR">Liberia</option>
                              <option value="LY">Libya</option>
                              <option value="LI">Liechtenstein</option>
                              <option value="LT">Lithuania</option>
                              <option value="LU">Luxembourg</option>
                              <option value="MO">Macao</option>
                              <option value="MK">Macedonia, the former Yugoslav Republic of</option>
                              <option value="MG">Madagascar</option>
                              <option value="MW">Malawi</option>
                              <option value="MY">Malaysia</option>
                              <option value="MV">Maldives</option>
                              <option value="ML">Mali</option>
                              <option value="MT">Malta</option>
                              <option value="MH">Marshall Islands</option>
                              <option value="MQ">Martinique</option>
                              <option value="MR">Mauritania</option>
                              <option value="MU">Mauritius</option>
                              <option value="YT">Mayotte</option>
                              <option value="MX">Mexico</option>
                              <option value="FM">Micronesia, Federated States of</option>
                              <option value="MD">Moldova, Republic of</option>
                              <option value="MC">Monaco</option>
                              <option value="MN">Mongolia</option>
                              <option value="ME">Montenegro</option>
                              <option value="MS">Montserrat</option>
                              <option value="MA">Morocco</option>
                              <option value="MZ">Mozambique</option>
                              <option value="MM">Myanmar</option>
                              <option value="NA">Namibia</option>
                              <option value="NR">Nauru</option>
                              <option value="NP">Nepal</option>
                              <option value="NL">Netherlands</option>
                              <option value="NC">New Caledonia</option>
                              <option value="NZ">New Zealand</option>
                              <option value="NI">Nicaragua</option>
                              <option value="NE">Niger</option>
                              <option value="NG">Nigeria</option>
                              <option value="NU">Niue</option>
                              <option value="NF">Norfolk Island</option>
                              <option value="MP">Northern Mariana Islands</option>
                              <option value="NO">Norway</option>
                              <option value="OM">Oman</option>
                              <option value="PK">Pakistan</option>
                              <option value="PW">Palau</option>
                              <option value="PS">Palestinian Territory, Occupied</option>
                              <option value="PA">Panama</option>
                              <option value="PG">Papua New Guinea</option>
                              <option value="PY">Paraguay</option>
                              <option value="PE">Peru</option>
                              <option value="PH">Philippines</option>
                              <option value="PN">Pitcairn</option>
                              <option value="PL">Poland</option>
                              <option value="PT">Portugal</option>
                              <option value="PR">Puerto Rico</option>
                              <option value="QA">Qatar</option>
                              <option value="RE">Réunion</option>
                              <option value="RO">Romania</option>
                              <option value="RU">Russian Federation</option>
                              <option value="RW">Rwanda</option>
                              <option value="BL">Saint Barthélemy</option>
                              <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
                              <option value="KN">Saint Kitts and Nevis</option>
                              <option value="LC">Saint Lucia</option>
                              <option value="MF">Saint Martin (French part)</option>
                              <option value="PM">Saint Pierre and Miquelon</option>
                              <option value="VC">Saint Vincent and the Grenadines</option>
                              <option value="WS">Samoa</option>
                              <option value="SM">San Marino</option>
                              <option value="ST">Sao Tome and Principe</option>
                              <option value="SA">Saudi Arabia</option>
                              <option value="SN">Senegal</option>
                              <option value="RS">Serbia</option>
                              <option value="SC">Seychelles</option>
                              <option value="SL">Sierra Leone</option>
                              <option value="SG">Singapore</option>
                              <option value="SX">Sint Maarten (Dutch part)</option>
                              <option value="SK">Slovakia</option>
                              <option value="SI">Slovenia</option>
                              <option value="SB">Solomon Islands</option>
                              <option value="SO">Somalia</option>
                              <option value="ZA">South Africa</option>
                              <option value="GS">South Georgia and the South Sandwich Islands</option>
                              <option value="SS">South Sudan</option>
                              <option value="ES">Spain</option>
                              <option value="LK">Sri Lanka</option>
                              <option value="SD">Sudan</option>
                              <option value="SR">Suriname</option>
                              <option value="SJ">Svalbard and Jan Mayen</option>
                              <option value="SZ">Swaziland</option>
                              <option value="SE">Sweden</option>
                              <option value="CH">Switzerland</option>
                              <option value="SY">Syrian Arab Republic</option>
                              <option value="TW">Taiwan, Province of China</option>
                              <option value="TJ">Tajikistan</option>
                              <option value="TZ">Tanzania, United Republic of</option>
                              <option value="TH">Thailand</option>
                              <option value="TL">Timor-Leste</option>
                              <option value="TG">Togo</option>
                              <option value="TK">Tokelau</option>
                              <option value="TO">Tonga</option>
                              <option value="TT">Trinidad and Tobago</option>
                              <option value="TN">Tunisia</option>
                              <option value="TR">Turkey</option>
                              <option value="TM">Turkmenistan</option>
                              <option value="TC">Turks and Caicos Islands</option>
                              <option value="TV">Tuvalu</option>
                              <option value="UG">Uganda</option>
                              <option value="UA">Ukraine</option>
                              <option value="AE">United Arab Emirates</option>
                              <option value="GB">United Kingdom</option>
                              <option value="US">United States</option>
                              <option value="UM">United States Minor Outlying Islands</option>
                              <option value="UY">Uruguay</option>
                              <option value="UZ">Uzbekistan</option>
                              <option value="VU">Vanuatu</option>
                              <option value="VE">Venezuela, Bolivarian Republic of</option>
                              <option value="VN">Viet Nam</option>
                              <option value="VG">Virgin Islands, British</option>
                              <option value="VI">Virgin Islands, U.S.</option>
                              <option value="WF">Wallis and Futuna</option>
                              <option value="EH">Western Sahara</option>
                              <option value="YE">Yemen</option>
                              <option value="ZM">Zambia</option>
                              <option value="ZW">Zimbabwe</option>
                            </select>
                            <!-- End Select -->

                            <div class="invalid-feedback">
                              Please select a valid country.
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md-4">
                            <label for="stateShopCheckout" class="form-label">State</label>

                            <!-- Select -->
                            <select class="form-select" id="stateShopCheckout" required>
                              <option value="">Choose...</option>
                              <option>California</option>
                            </select>
                            <!-- End Select -->

                            <div class="invalid-feedback">
                              Please provide a valid state.
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md-3">
                            <label for="zipShopCheckout" class="form-label">Zip</label>
                            <input type="text" class="form-control form-control-lg" id="zipShopCheckout" placeholder="" required>
                            <div class="invalid-feedback">
                              Zip code required.
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>

                        <hr class="my-4">

                        <div class="d-grid gap-2">
                          <!-- Check -->
                          <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="sameAddressShopCheckout">
                            <label class="form-check-label" for="sameAddressShopCheckout">Shipping address is the same as my billing address</label>
                          </div>
                          <!-- End Check -->

                          <!-- Check -->
                          <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="saveInfoShopCheckout">
                            <label class="form-check-label" for="saveInfoShopCheckout">Save this information for next time</label>
                          </div>
                          <!-- End Check -->
                        </div>

                        <hr class="my-4">

                        <h4 class="mb-3">Payment</h4>

                        <div class="my-3">
                          <!-- Check -->
                          <div class="form-check">
                            <input id="creditShopCheckout" name="paymentMethod" type="radio" class="form-check-input" checked required>
                            <label class="form-check-label" for="creditShopCheckout">Credit card</label>
                          </div>
                          <!-- End Check -->

                          <!-- Check -->
                          <div class="form-check">
                            <input id="debitShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
                            <label class="form-check-label" for="debitShopCheckout">Debit card</label>
                          </div>
                          <!-- End Check -->

                          <!-- Check -->
                          <div class="form-check">
                            <input id="paypalShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
                            <label class="form-check-label" for="paypalShopCheckout">PayPal</label>
                          </div>
                          <!-- End Check -->
                        </div>

                        <div class="row gy-3">
                          <div class="col-md-6">
                            <label for="ccNameShopCheckout" class="form-label">Name on card</label>
                            <input type="text" class="form-control form-control-lg" id="ccNameShopCheckout" placeholder="" required>
                            <small class="text-muted">Full name as displayed on card</small>
                            <div class="invalid-feedback">
                              Name on card is required
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md-6">
                            <label for="ccNumberShopCheckout" class="form-label">Credit card number</label>
                            <input type="text" class="form-control form-control-lg" id="ccNumberShopCheckout" placeholder="" required>
                            <div class="invalid-feedback">
                              Credit card number is required
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md-3">
                            <label for="ccExpirationShopCheckout" class="form-label">Expiration</label>
                            <input type="text" class="form-control form-control-lg" id="ccExpirationShopCheckout" placeholder="" required>
                            <div class="invalid-feedback">
                              Expiration date required
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md-3">
                            <label for="ccCvvShopCheckout" class="form-label">CVV</label>
                            <input type="text" class="form-control form-control-lg" id="ccCvvShopCheckout" placeholder="" required>
                            <div class="invalid-feedback">
                              Security code required
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <hr class="my-4">

                        <div class="row align-items-center">
                          <div class="col-sm-6 order-sm-1 mb-3 mb-sm-0">
                            <div class="d-grid">
                              <button type="submit" class="btn btn-primary btn-lg">Place order</button>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-sm text-center text-sm-start">
                            <a class="link" href="../demo-shop/cart.html">
                              <i class="bi-chevron-left small ms-1"></i> Return to cart
                            </a>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </form>
                      <!-- End Form -->
                    </div>
                    <!-- End Content -->