A basic example contact from in php and store data from it

//contact form in php page
 <form id="contact-form" method="post" action="">
   <h2>Contact Us</h2>
   <div class="row two-col">
    <div class="first-col">
     <label>First Name</label>
     <input type="text" name="firstname" class="contact-firstname">
     <i class="first-i"></i>
    </div>
    <div class="second-col">
     <label>Last Name</label>
     <input type="text" name="lastname" class="contact-lastname">
     <i class="last-i"></i>
    </div>
   </div>
   
   <div class="row two-col">
    <div class="first-col">
     <label>Email</label>
     <input type="text" name="email" class="contact-email">
    </div>
    <div class="second-col">
     <label>Phone</label>
     <input type="text" name="phone" class="contact-phone">
    </div>
   </div>
   
   <div class="row one-col">
    <div class="single-col">
     <label>Message</label>
     <textarea name="message" class="contact-message"></textarea>
    </div>
   </div>
   
   <div class="row one-col">
    <div class="single-col">
     <input type="submit" name="contactformsubmit" class="contact-submit">
     
     <?php echo $msg; ?>
    </div>
   </div>
   
  </form>

// for storing data from contact form in database table


if(isset($_POST['contactformsubmit']))
{
 extract($_POST);
 
 global $wpdb;
 $table_name = $wpdb->prefix . "my_plugintable";
 
 if(($wpdb->insert($table_name, array(
    'firstname' => $firstname,
    'lastname' => $lastname,
    'email' => $email, // ... and so on
    'phone' => $phone, // ... and so on
    'message' => $message, // ... and so on
    'time' => date('d-m-Y'), // ... and so on
)))){

$msg = "Your message has been sent!";
 
}
else
{
 $msg = "Something is wrong!";
}

}

// css style


#contact-form
{
 width:100%;
 max-width:600px;
 margin:80px auto;
 display:table;
}

#contact-form textarea
{
 height:130px;
 resize:none;
}

#contact-form input,
#contact-form textarea
{
 width:100%;
 outline:none !important;
 font-size:14px;
 font-family:roboto;
}

#contact-form input:focus,
#contact-form textarea:focus
{
 border:1px solid #ff9900;
}


.two-col
{
 display:flex;
 flex-wrap:wrap;
 float:left;
 width:100%;
}

.first-col, .second-col {
    width: 50%;
    padding: 10px;
}

.single-col
{
 padding:10px;
}

#contact-form label {
    font-size: 16px;
    font-family: roboto;
    color: #333;
}

#contact-form h2 {
 text-align:center;
 position:relative;
 margin-bottom:30px;
}

#contact-form h2:after {
 content:"";
 height:4px;
 width:100px;
 background:#ff9900;
 position:absolute;
 left:50%;
 margin-left:-50px;
 top:70px;
}


.contact-submit
{
width:100%;
background:#ff9900 !important;
color:#fff;
font-size:16px;
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
outline:none;
border-radius:4px;
border:none; 
}


#contact-form i {
    font-size: 14px;
    color: #ff9900;
    font-style: normal;
    font-family: roboto;
}

//for making it attractive you can use these code in js also.

 $(".contact-submit").click(function(e){
  
  //e.preventDefault();
  
  var firstname = $(".contact-firstname").val();
  var lastname = $(".contact-lastname").val();
  var email = $(".contact-email").val();
  var phone = $(".contact-phone").val();
  var message = $(".contact-message").val();
  
  
  if(firstname == ""){
   $(".contact-firstname").focus();
   $(".first-i").html("Please input firstname here");
   return false;
  }
  
  
  if(lastname == ""){
   $(".contact-lastname").focus();
   $(".contact-lastname").after("<i>Please input lastname here</i>")
   return false;
  }
  
  if(email == ""){
   $(".contact-email").focus();
   $(".contact-email").after("<i>Please input email here</i>")
   return false;
  }
  
  
 });
 

 $("input[type='text']").click(function(){
  $("i").html("");
 });
 
});