Focusform is a form that at first glance looks minimalist, but when the user interacts with the focusform, detailed options will be visible.

Basic HTML code for Focusform

<div id="focusform" class="focusform">

    <a class="focusform-backdrop modal-backdrop collapsed" data-bs-toggle="collapse" href="#focusFormCollapse" role="button" aria-expanded="false" aria-controls="focusFormCollapse"></a>
    
    <form class="focusform-form position-relative">
      <div class="bg focusform-bg position-absolute if-focusform-is-active--visible"></div>
   
      <div class="input-group position-relative focusform-keyword">

        <input id="focusForm-fieldFocusFormKeyword" name="focusForm-fieldFocusFormKeyword" type="text" class="form-control px-0 py-2 form-control-lg position-relative z-3" data-show-bs-collapse-id="#focusFormCollapse" data-scroll-to="focusForm" data-spy="status" placeholder="Click Here">
        
      </div>
      <!-- /.input-group -->
      
          <div class="focusform-options if-focusform-is-active--visible position-absolute top-100 start-0 w-100">
      
            <div class="bg focusform-options-bg position-absolute"></div>
  
              <div class="collapse focusform-collapse position-relative" id="focusFormCollapse">

                <div class="mt-4"></div>                
                <p>options here</p>

              </div>
              <!-- /.collapse -->
            </div>
            <!-- /.collapse -->
          
          </div>
          <!-- /.focusform-options -->

    </form>
    <!-- /.focusform-form -->
    
  </div>
  <!-- /.focusform --> 

Put your mouse in text field below.

And here more advance sample. Included with more options toggler.