Contact Form With Details Forms

<section class="contact-us-3 py-5">
  <div class="fui-container bg-contain" style="background-image: linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),url(images/logo-green.png)">
    <div class="row">
      
      <!-- CONTACT INFO -->
      <div class="col-md-12 col-12 pb-2">
        <h2 class="uppercase weight-500">Get in touch</h2>
        
        <!-- CONTACT INFO -->
        <div class="contact-info">
          
          <!-- EMAIL -->
          <div class="single-contact-info">
            <i class="if if-envelope"></i>
            <a href="mailto:email@email.com">email@email.com</a>
          </div>
          
          <!-- EMAIL -->
          <div class="single-contact-info">
            <i class="if if-phone"></i>
            <a href="">(123) 123-1234</a>
          </div>
        </div>
      </div>
      
      <!-- COL -->
      <div class="col-md-6 col-12">
        <div class="group">
          <input type="text" name="name" class="fui-input" placeholder="Name*" required>
        </div>
      </div>
      
      <!-- COL -->
      <div class="col-md-6 col-12">
        <div class="group">
          <input type="email" name="email" class="fui-input" placeholder="Email*" required>
        </div>
      </div>
      
      <!-- COL -->
      <div class="col-md-6 col-12">
        <div class="group">
          <input type="tel" name="phone" class="fui-input" placeholder="Phone">
        </div>
      </div>
      
      <!-- COL -->
      <div class="col-md-6 col-12">
        <div class="group">
          <input type="text" name="address" class="fui-input" placeholder="Address">
        </div>
      </div>
      
      <!-- COL -->
      <div class="col-md-12 col-12">
        <div class="group">
          <input type="text" name="subject" class="fui-input" placeholder="Subject">
        </div>
      </div>
      
      <!-- COL -->
      <div class="col-md-12 col-12">
        <div class="group">
          <textarea name="message" class="fui-input" placeholder="Message*" required></textarea>
        </div>
      </div>
      
      <!-- SUBMIT -->
      <div class="col-md-12 col-12">
        <div class="group">
          <button class="fui-btn fui-btn-primary px-4 py-1" type="submit">SEND</button>
        </div>
      </div>
      
    </div>
  </div>
</section>
.contact-us-3 .contact-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.contact-us-3 .contact-info .single-contact-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-right: 20px;
  padding: 10px 0;
}

.contact-us-3 .contact-info .single-contact-info i {
  width: 40px;
  height: 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: black;
  color: white;
  border-radius: 50%;
  margin-right: 10px;
}

.contact-us-3 .contact-info .single-contact-info a {
  font-weight: 500;
  color: black;
}

.contact-us-3 .contact-info .single-contact-info a:hover {
  color: #008cff;
}

.contact-us-3 .fui-input {
  border-radius: 0;
  border-color: black;
  padding: 15px;
  background: transparent;
}

.contact-us-3 .fui-input::-webkit-input-placeholder {
  color: black;
}

.contact-us-3 .fui-input:-ms-input-placeholder {
  color: black;
}

.contact-us-3 .fui-input::-ms-input-placeholder {
  color: black;
}

.contact-us-3 .fui-input::placeholder {
  color: black;
}

.contact-us-3 .fui-input:focus {
  border-color: #008cff;
}

.contact-us-3 .fui-input:focus::-webkit-input-placeholder {
  color: gray;
}

.contact-us-3 .fui-input:focus:-ms-input-placeholder {
  color: gray;
}

.contact-us-3 .fui-input:focus::-ms-input-placeholder {
  color: gray;
}

.contact-us-3 .fui-input:focus::placeholder {
  color: gray;
}
Dependencies
CSS

Insert before the closing </head> tag

<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">
Javascript

Insert before the closing </body> tag

<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>