Form Sections

<!--Hire jamstack start-->
<section class="pattern-square bg-info bg-opacity-10">
    <div class="container position-relative z-1 py-xl-9 py-6">
        <div class="row">
            <div class="col-lg-10 offset-lg-1 col-md-12">
                <div class="row align-items-center g-5">
                    <div class="col-lg-6 col-12 order-2">
                        <div class="me-xl-7">
                            <div class="mb-5">
                                <h2 class="h1 mb-4">Hire experienced
                                    Jamstack developer</h2>
                                <p class="mb-0">
                                    Book a free consultation call with one
                                    of our experts and get help with your
                                    next moves. It's always good to talk to
                                    an expert. It's free!
                                </p>
                            </div>
                            <div class="mb-5">
                                <ul class="list-unstyled">
                                    <li class="mb-2 d-flex">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            width="20" height="20"
                                            fill="currentColor"
                                            class="bi bi-dot"
                                            viewBox="0 0 16 16">
                                            <path
d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
                                        </svg>
                                        <span class="ms-1">Not sure which
                                            technology to choose?</span>
                                    </li>
                                    <li class="mb-2 d-flex">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            width="20" height="20"
                                            fill="currentColor"
                                            class="bi bi-dot"
                                            viewBox="0 0 16 16">
                                            <path
d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
                                        </svg>
                                        <span class="ms-1">Need advice on
                                            the next steps?</span>
                                    </li>
                                    <li class="mb-2 d-flex">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            width="20" height="20"
                                            fill="currentColor"
                                            class="bi bi-dot"
                                            viewBox="0 0 16 16">
                                            <path
d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
                                        </svg>
                                        <span class="ms-1">Hesitating on how
                                            to plan the execution?</span>
                                    </li>
                                </ul>
                            </div>
                            <div
                                class="d-md-flex align-items-center justify-content-between">
                                <div
                                    class="d-flex align-items-center mb-3 mb-md-0 small">
                                    <div class="d-flex align-items-center">
                                        <img src="../assets/images/avatar/avatar-7.jpg"
                                            alt="Avatar"
                                            class="avatar avatar-lg rounded-circle" />
                                        <div class="ms-3">
                                            <h5 class="mb-0">Jitu Chauhan
                                            </h5>
                                            <small class="me-4">Head of
Sales</small>
                                            <small>sales@blockui.com</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12 order-lg-2">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <form class="row needs-validation g-3"
                                    novalidate>
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <h3 class="mb-0">Schedule a free
estimate call</h3>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <label for="ScheduleFirstnameInput"
                                            class="form-label">
                                            First Name
                                            <span
class="text-danger">*</span>
                                        </label>
                                        <input type="text"
                                            class="form-control"
                                            id="ScheduleFirstnameInput"
                                            required />
                                        <div class="invalid-feedback">Please
                                            enter firstname.</div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <label for="scheduleLastnameInput"
                                            class="form-label">
                                            Last Name
                                            <span
class="text-danger">*</span>
                                        </label>
                                        <input type="text"
                                            class="form-control"
                                            id="scheduleLastnameInput"
                                            required />
                                        <div class="invalid-feedback">Please
                                            enter lastname.</div>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="scheduleEmailInput"
                                            class="form-label">
                                            Email
                                            <span
class="text-danger">*</span>
                                        </label>
                                        <input type="email"
                                            class="form-control"
                                            id="scheduleEmailInput"
                                            required />
                                        <div class="invalid-feedback">Please
                                            enter email.</div>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="scheduleTextarea"
                                            class="form-label">Message</label>
                                        <textarea class="form-control"
                                            id="scheduleTextarea"
                                            placeholder="Write to us"
                                            rows="3" required></textarea>
                                        <div class="invalid-feedback">Please
                                            write message.</div>
                                    </div>
                                    <div class="d-grid">
                                        <button class="btn btn-primary"
                                            type="submit">Let’s work
                                            together!</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Hire jamstack end-->

<!--free estimate call-->
<section class="py-lg-9 my-lg-10">
    <div
        class="container bg-light rounded-3 d-flex align-items-center pb-6 pb-md-0">
        <div class="row align-items-center">
            <div class="col-lg-6 col-12">
                <div class="position-relative p-lg-6 p-4">
                    <div class="mb-4">
                        <h2 class="mb-4">
                            Hire experienced
                            <br />
                            Jamstack developer
                        </h2>
                        <p class="mb-0 me-xl-7">
                            Book a free consultation call with one of our
                            experts and get help with your next moves. It's
                            always good to talk to an expert. It's free!
                        </p>
                    </div>

                    <div class="row">
                        <div class="col">
                            <img src="./assets/images/client-logo/clients-logo-1.svg"
                                alt="logo" />
                        </div>
                        <div class="col">
                            <img src="./assets/images/client-logo/clients-logo-2.svg"
                                alt="logo" />
                        </div>
                        <div class="col">
                            <img src="./assets/images/client-logo/clients-logo-5.svg"
                                alt="logo" />
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="col-xxl-3 col-xl-4 col-lg-5 col-12 position-lg-absolute start-50 ms-lg-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <form class="row needs-validation g-3" novalidate>
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <h2 class="h3">Schedule a free estimate
                                        call</h2>
                                    <p class="mb-0">Schedule a short 20-min
                                        discovery call and get a look inside
                                        the way we design, develop and scale
                                        websites.</p>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <label for="ServiceFirstnameInput"
                                    class="form-label">
                                    First Name
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control"
                                    id="ServiceFirstnameInput" required />
                                <div class="invalid-feedback">Please enter
                                    firstname.</div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <label for="serviceLastnameInput"
                                    class="form-label">
                                    Last Name
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control"
                                    id="serviceLastnameInput" required />
                                <div class="invalid-feedback">Please enter
                                    lastname.</div>
                            </div>
                            <div class="col-12">
                                <label for="serviceEmailInput"
                                    class="form-label">
                                    Email
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="email" class="form-control"
                                    id="serviceEmailInput" required />
                                <div class="invalid-feedback">Please enter
                                    email.</div>
                            </div>
                            <div class="col-12">
                                <label for="servieTextarea"
                                    class="form-label">Message</label>
                                <textarea class="form-control"
                                    id="servieTextarea"
                                    placeholder="Write to us" rows="5"
                                    required></textarea>
                                <div class="invalid-feedback">Please write
                                    message.</div>
                            </div>
                            <div class="d-grid">
                                <button class="btn btn-primary"
                                    type="submit">Let’s work
                                    together!</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--free estimate call-->

<!--newsletter-->
<section class="mb-7">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <div
                    class="bg-primary bg-opacity-10 px-5 pt-5 pb-7 mb-2 rounded-3 text-center">
                    <div
                        class="icon-shape bg-primary bg-opacity-10 icon-xl rounded-circle mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24"
                            height="24" fill="currentColor"
                            class="bi bi-envelope-check text-primary"
                            viewBox="0 0 16 16">
                            <path
                                d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z" />
                            <path
                                d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z" />
                        </svg>
                    </div>
                    <div class="mb-4">
                        <h3>Subscribe to our newsletter</h3>
                        <p class="mb-0 mx-md-7 px-md-4">Lorem ipsum dolor
                            sit amet consectetur adipiscing elit phasellus
                            amet dui quam vitae quis leo velit aliquam.</p>
                    </div>
                    <form
                        class="row g-3 needs-validation d-flex mx-md-7 px-md-4">
                        <div class="col-md-7 col-xl-8 col-12">
                            <label for="subscribeEmail"
                                class="form-label visually-hidden">Email</label>

                            <input type="email" class="form-control"
                                id="subscribeEmail"
                                placeholder="Enter your email address"
                                aria-label="Enter your business email"
                                required />
                        </div>
                        <div class="col-md-5 col-xl-4 col-12">
                            <div class="d-grid">
                                <button class="btn btn-primary shadow-sm"
                                    type="submit">Subscribe</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!--newsletter-->

                                            <!--event form-->
<div class="col-lg-4 offset-lg-1 col-md-12 order-lg-2">
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="mb-6 text-center">
                <h3 class="mb-0">Register for our next live group demo session</h3>
            </div>
            <form class="row g-3 needs-validation" novalidate="">
                <div class="col-md-12">
                    <label for="eventSingleNameInput" class="form-label">
                        First Name
                        <span class="text-danger">*</span>
                    </label>
                    <input type="text" class="form-control" id="eventSingleNameInput" required="" />
                    <div class="invalid-feedback">Please enter first name.</div>
                </div>
                <div class="col-md-12">
                    <label for="eventSingleLastNameInput" class="form-label">
                        Last Name
                        <span class="text-danger">*</span>
                    </label>
                    <input type="text" class="form-control" id="eventSingleLastNameInput" required="" />
                    <div class="invalid-feedback">Please enter last name.</div>
                </div>
                <div class="col-md-12">
                    <label for="eventSingleEmailInput" class="form-label">
                        Email
                        <span class="text-danger">*</span>
                    </label>
                    <input type="email" class="form-control" id="eventSingleEmailInput" required="" />
                    <div class="invalid-feedback">Please enter email.</div>
                </div>
                <div class="col-md-12">
                    <label for="eventSinglePhoneInput" class="form-label">
                        Phone Number
                        <span class="text-body">(optional)</span>
                    </label>
                    <input type="tel" class="form-control" id="eventSinglePhoneInput" />
                    <div class="invalid-feedback">Please enter phone.</div>
                </div>
                <div class="col-md-12">
                    <label for="eventSingleJobTitleInput" class="form-label">
                        Job Title
                        <span class="text-danger">*</span>
                    </label>
                    <select class="form-select" id="eventSingleJobTitleInput" aria-label="Job Title" required>
                        <option selected disabled value="">Job Title</option>
                        <option value="1">Job 1</option>
                        <option value="2">Job 2</option>
                        <option value="3">Job 3</option>
                        <option value="4">Job 4</option>
                    </select>
                    <div class="invalid-feedback">Please select job title.</div>
                </div>

                <div class="col-md-12">
                    <label for="eventCompanyInput" class="form-label">
                        Company
                        <span class="text-danger">*</span>
                    </label>
                    <input type="text" class="form-control" id="eventCompanyInput" required="" />
                    <div class="invalid-feedback">Please enter company.</div>
                </div>
                <div class="col-md-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="blockCheck" required />
                        <label class="form-check-label ms-2 fs-6" for="blockCheck">
                            By continuing, you agree to Black
                            <a href="#">Terms of Use</a>
                            Read our
                            <a href="#">Privacy Policy</a>
                        </label>
                        <div class="invalid-feedback">You must agree before submitting.</div>
                    </div>
                </div>
                <div class="d-grid">
                    <button class="btn btn-primary" type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--event form-->

 <!--Form section start-->
<section class="bg-light py-lg-9 py-5">
   <div class="container">
      <div class="row justify-content-center">
         <div class="col-lg-10">
            <div class="card shadow-lg">
               <div class="row g-0">
                  <div
                     class="col-md-6 d-none d-md-block rounded-start-3"
                     style="
                        background-image: url(../assets/images/landings/it-company/it-company-form-img.jpg);
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;

                     ">
                     <!-- for mobile img-->
                  </div>
                  <div class="col-xl-6 col-md-6">
                     <div class="card-body p-md-5">
                        <form class="row needs-validation g-3" novalidate>
                           <div class="col-lg-12">
                              <div>
                                 <h3>Ready to Transform Your Business?</h3>
                                 <p class="mb-0">
                                    Drop us a line about your project at
                                    <span><a href="#!" class="">contact@example.com</a></span>
                                    or via the contact form below, and we will contact you soon.
                                 </p>
                              </div>
                           </div>
                           <div class="col-lg-6 col-12">
                              <label for="companyFirstnameInput" class="form-label">
                                 First Name
                                 <span class="text-danger">*</span>
                              </label>
                              <input type="text" class="form-control" id="companyFirstnameInput" required />
                              <div class="invalid-feedback">Please enter firstname.</div>
                           </div>
                           <div class="col-lg-6 col-12">
                              <label for="companyNameInput" class="form-label">
                                 Company
                                 <span class="text-danger">*</span>
                              </label>
                              <input type="text" class="form-control" id="companyNameInput" required />
                              <div class="invalid-feedback">Please enter lastname.</div>
                           </div>
                           <div class="col-md-12">
                              <label for="companyEmailInput" class="form-label">
                                 Work Email
                                 <span class="text-danger">*</span>
                              </label>
                              <input type="email" class="form-control" id="companyEmailInput" required />
                              <div class="invalid-feedback">Please enter email.</div>
                           </div>
                           <div class="col-md-12">
                              <label for="companyPhoneInput" class="form-label">
                                 Phone
                                 <span class="text-danger">*</span>
                              </label>
                              <input type="tel" class="form-control" id="companyPhoneInput" required />
                              <div class="invalid-feedback">Please enter phone.</div>
                           </div>
                           <div class="col-md-12">
                              <label for="companyTextarea" class="form-label">Describe your idea</label>
                              <textarea class="form-control" id="companyTextarea" placeholder="Write to us" rows="3" required></textarea>
                              <div class="invalid-feedback">Please write message.</div>
                           </div>
                           <div class="col-12">
                              <div class="form-check">
                                 <input class="form-check-input" type="checkbox" value="" id="companyCheckagree" required />
                                 <label class="form-check-label" for="companyCheckagree">
                                    I agree to the
                                    <a href="#!">privacy policy</a>
                                 </label>
                                 <div class="invalid-feedback">You must agree before submitting.</div>
                              </div>
                           </div>
                           <div class="d-grid">
                              <button class="btn btn-primary rounded-pill" type="submit">Let’s work together!</button>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<!--Form section end-->