Welcome to Praful Bhuskute Black Spy Praful Bhuskute Black Spy Praful Bhuskute Black Spy

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