<div class="card mb-3 shadow-3" id="formCard">

  <div class="card-header border-0">

    <div class="d-flex align-items-center justify-content-between">

      <div>

        <span class="h6 pe-2" data-mdb-toggle="collapse" data-mdb-target="#formCardContent">

          Collapsible form

        </span>

      </div>

      <div class="flex-grow-1 py-3" data-mdb-toggle="collapse" data-mdb-target="#formCardContent"></div>

      <div>

        <i class="collapsible-card-icon fa-solid fa-chevron-down ps-3" data-mdb-toggle="collapse"

           data-mdb-target="#formCardContent"></i>

      </div>

    </div>

  </div>

  <div class="collapse border-2 border-top" id="formCardContent">

    <div class="card-body">

      <form id="myForm">

        <div class="form-outline" data-mdb-input-init>

          <input type="text" id="firstNameInput" class="form-control" required/>

          <label class="form-label" for="firstNameInput">First name</label>

        </div>

      </form>

    </div>

  </div>

</div>

​

<button type="submit" form="myForm" class="btn btn-primary shadow-0 px-5">Submit</button>