Custom form HTML to store in database WordPress using Page Template

Custom form HTML to store in database WordPress using Page Template


<?php
/*
Template Name: Create Candidate
Template Post Type: post, page, event
*/
// Page code here...
get_header();
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.row {
width: 1200px;
margin: auto;
}
.additon-textarea input[type="textarea"] {
width: 97%;
height: 70px;
margin: 10px 0;
border: 1px solid #dce4ec;
}
</style>
<?php
if (!empty($_POST)) {
global $wpdb;
$table = candidate_details;
$data = array(
'firstname' => $_POST['firstname'],
'lastname' => $_POST['lastname'],
'emailid'    => $_POST['emailid'],
'contactnumber'    => $_POST['contactnumber'],
'displayname'    => $_POST['displayname'],
'education'    => $_POST['education'],
'jobtitle'    => $_POST['jobtitle'],
'experiance'    => $_POST['experiance'],
// 'summery'    => $_POST['summery'],
);
$format = array(
'%s','%s','%s','%s','%s','%s','%s','%s','%d'
);
//  echo "<pre>"; print_r($data);
$success=$wpdb->insert( $table, $data , $format );
if($success){
echo 'data has been save' ; 
}
}         ?>
<div class="row">
<main class="admin-main">
<section class="admin-content">
<div class="bg-dark">
<div class="container  m-b-30">
<div class="row">
<div class="col-12 text-white p-t-40 p-b-90">
<h4 class=""> Create Candidate
</h4>
<p class="opacity-75 ">
Here we can create new Candidate.
</p>
</div>
</div>
</div>
</div>
<div class="container  pull-up">
<div class="row">
<div class="col-lg-10">
<!--widget card begin-->
<div class="card m-b-30">
<div class="card-header">
<h5 class="m-b-0">
Candidate Forms
</h5>
</div>
<div class="card-body ">
<form method="post">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputFirstName">First Name</label>
<input type="text" class="form-control" id="firstname"
placeholder="First Name" name="firstname">
</div>
<div class="form-group col-md-6">
<label for="inputLastName">Last Name</label>
<input type="text" class="form-control" id="lastname"
placeholder="Last Name" name="lastname">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email ID</label>
<input type="text" class="form-control" id="emailid"
placeholder="Email ID" name="emailid">
</div>
<div class="form-group col-md-6">
<label for="inputContactNumber">Contact Number</label>
<input type="text" class="form-control" id="contactnumber"
placeholder="Contact Number" name="contactnumber">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputDisplayName">Display Name</label>
<input type="text" class="form-control" id="displayname"
placeholder="Display Name" name="displayname">
</div>
<div class="form-group col-md-6">
<label for="inputEducations">Educations</label>
<input type="text" class="form-control" id="education"
placeholder="Educations" name="education">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputJobTitle">Job Title</label>
<input type="text" class="form-control" id="jobtitle"
placeholder="Job Title" name="jobtitle">
</div>
<div class="form-group col-md-6">
<label for="inputExperiace">Experiace</label>
<input type="text" class="form-control" id="experiance"
placeholder="Experiace" name="experiance">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputSummary">Summary</label>
<div><input type="textarea" name="mytext[]" name="summery" id="summery"
style="width:97%; height:70px; border: 1px solid #dce4ec;"
>
<span class="add_form_field">+<i class="mdi mdi-plus"></i> </span>
</div>
<div class="container1"></div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<input type="submit" name="submit" value="Submit">    
</div>
</div>
</form>
</div>
</div>
<!--widget card ends-->
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<script>
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(
'<div class="additon-textarea"><input type="textarea" name="mytext[]"/><a href="#" class="delete" style="width:97%; height:70px; name="summery" id="summery"">- <i class="mdi mdi-minus"></i></a></div>'
); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
</script>
<?php get_footer(); ?>

Out Put as Follows

Custom form HTML to store in database WordPress using Page Template-1

Drop your queries

Table of Contents

Have A Project In Mind? Let's Get To Work