The <form> tag is utilized to make a HTML frame for client input. The <form> component can contain at least one of the accompanying structure components:

 <input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>

 i will explain at end what is all that elements means. but i think if you see live demo for this form it will be better

1- be sure that you have already jquery in your template HTML document. if you do not have ,you can add this

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>


2- we need to add styleshet which means appearance for your form, too you can change the size ( width and height) also you can change the colors as you like or as suitable your template ,and more you can do with CSS.

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

body { 
  background: #1E1E28; 
}

form { 
  max-width:420px; 
  margin:50px auto 30px;
  padding: 20px
}

.feedback-input {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #2980b9;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
  outline: 0;
}

.feedback-input:focus { 
  border: 2px solid #2ecc71; 
}

textarea {
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

.submit-btn {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background: #2980b9;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  color: white;
  font-size: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 100;
}

.submit-btn:hover { 
  background:#3498db;
  letter-spacing: 8px;
}

.submit-feedback {      
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 30px;
  text-align: center;
  color: #fff;
  display: none;
}


3- let we do CSS for Submit Loader, i am sure it give you beautiful appearance but this code with the one above

.spinner {
  display: none;
  margin: 0 auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #2980b9;

  border-radius: 100%;
  display: inline-block;
  animation: bouncedelay 1.4s infinite ease-in-out;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  animation-delay: -0.16s;
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
  }
}


4- now we will add the html code and load code which appear after sent message

<form>      
  <input name="name" type="text" class="feedback-input" placeholder="Name" />   
  <input name="email" type="text" class="feedback-input" placeholder="Email" />
  <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
  <button type="button" class="submit-btn">SUBMIT</button>
</form>

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

<h1 class="submit-feedback">YOUR FORM HAS BEEN SENT</h1>
5-insert the java script options to end your plugin then will be ready to work 
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>

$(document).ready(function(){
   $('.submit-btn').on('click', function(){
      $('.spinner')
      .fadeIn("fast")
      .delay(2000)
      .fadeOut('slow', function() {
          $('.submit-feedback').fadeIn();
      });
   });
});



right now after you understand well ,i give you full code




Remember Definition and Usage:


<input>
         The <input> tag indicates an information field where the client can enter information. <input> components are utilized inside a <form> component to proclaim input controls that enable clients to include information. An info field can shift from multiple points of view, contingent upon the sort trait.


<textarea>
          The <textarea> tag characterizes a multi-line content information control.
A content zone can hold a boundless number of characters, and the content renders in a settled width text style (generally Courier).
The measure of a content range can be indicated by the cols and lines characteristics, or far superior; through CSS' tallness and width properties.

<button>
         The <button> tag characterizes an interactive catch.
Inside a <button> component you can put content, similar to content or pictures. This is the contrast between this component and catches made with the <input> component.
Tip: Always determine the sort property for a <button> component. Distinctive programs utilize diverse default sorts for the <button> component.

<select>
       The <select> component is utilized to make a drop-down rundown.
The <option> labels inside the <select> component characterize the accessible alternatives in the rundown.

<option>
       The <option> tag characterizes an alternative in a select rundown.
<option> components go inside a <select> or <datalist> component.

<optgroup>
       The <optgroup> is utilized to aggregate related choices in a drop-down rundown.
On the off chance that you have a not insignificant rundown of choices, gatherings of related choices are simpler to deal with for a client.

<fieldset>
      The <fieldset> tag is utilized to gather related components in a frame.
The <fieldset> label draws a container around the related components.

<label>
       The <label> tag characterizes a mark for a <input> component.
The <label> component does not render as anything exceptional for the client. Be that as it may, it gives a convenience change to mouse clients, in light of the fact that if the client taps on the content inside the <label> component, it flips the control.
The for characteristic of the <label> tag ought to be equivalent to the id property of the related component to tie them together.