Insert Post Data FrontEnd side with Custom Field and Validation in Wordpress

Hello,

First create template file in in your wordpress theme.

<?php /* Template Name: Account*/ ?>

after go to pages in wordpress create page in  your page and set template Account in wordpress.

after go to your post when you added insert data in frond end side. go to screen option
and checked custom fields.

here I am create email address,first name,last name,and phone.

you can also inset data in texonomy.

<?php /* Template Name: Account */

get_header(); ?>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#appoment_date').datepicker({
        dateFormat : 'yy-mm-dd'
    });
    jQuery("#appmoment_form").validate({
   
        // Specify the validation rules
        rules: {
         
            f_name: "required",
            l_name: "required",
            email: {
                required: true,
                email: true
               
            },
            time_appoment:"required",
            c_email:{
               
                 equalTo: '#email'
            },
            appoment_date:{
                 required: true,
                date: true
            },
            phone:"required",
             center_term: {
                required: true,
            },
            casetype: {
                required: true,
            }
         
         
        },
       
        // Specify the validation error messages
        messages: {
            f_name: "Please enter your first name",
            l_name: "Please enter your last name",
            email: "Please enter a valid email address",
            appoment_date:{
                required:"Please enter date",
                date:"Please validate date"
            },
            phone:"Please enter Phone Number",
            center_term:"Please select the center",
            casetype:"Please Select Reson for visist",
            c_email:"Please Conform Email Address"
        },
       
        submitHandler: function(form) {
            form.submit();
        }
    });
    jQuery('#appoment_date').change(function () {alert('changed');
    if (document.getElementById("appoment_date").value === "") {
                document.getElementById("time_appoment").disabled='true';
    } else {
    document.getElementById("time_appoment").disabled='';
 
  }

  });
});
</script>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
// Start the loop.
        /*
while ( have_posts() ) : the_post();

// Include the page content template.
get_template_part( 'content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

// End the loop.
endwhile;*/
?>
       
        <form method="post" id="appmoment_form">
       
        <?php $terms = $categories = get_terms( 'your-custom-texonomy', 'orderby=count&hide_empty=0' ); ?>
        <select name="center_term" id="center_term">
        <option value="">Select a Center</option>
      <?php   foreach ( $terms as $term ) { ?>
        <option value="<?php echo $term->name ?>"><?php echo $term->name ?></option>
        <?php } ?>
     
        </select>
       
       
      <input type="text" id="appoment_date" name="appoment_date" placeholder="Select a date" />
     
      <select name="time_appoment" id="time_appoment" disabled="disabled">
      <option>Select a Available Time</option>
      <option value="12PM to 1 AM">12PM to 1 AM</option>
      <option value="">1PM to 2 AM</option>
      <option value="">2PM to 3 AM</option>
      <option>3PM to 4 AM</option>
      <option>4PM to 5 AM</option>
      <option>5PM to 6 AM</option>
      <option>6PM to 7 AM</option>
      <option>7PM to 8 AM</option>
      <option>8PM to 9 AM</option>
      </select>
      <input type="text" name="f_name" id="f_name" placeholder="First Name" />
      <input type="text" name="l_name" id="l_name" placeholder="Last Name" />
      <input type="text" name="email" id="email" placeholder="Email Address" />
      <input type="text" name="c_email" id="" placeholder="Conform Email Address" />
      <input type="text" name="phone" id="phone" placeholder="Phone" />
      <?php $texonomys1 = $categories = get_terms( 'your-custom-texonomy', 'orderby=count&hide_empty=0' ); ?>
      <select name="casetype" id="casetype">
      <option value="">Reason for Visit</option>
      <?php   foreach ( $texonomys1 as $texonomy1 ) { ?>
       <option value="<?php echo $texonomy1->name ?>"><?php echo $texonomy1->name ?></option>
       <?php } ?>
      </select>
      <input type="submit" name="submit" />
        </form>
        <?php
       if (isset( $_POST['submit'] ) ) {
// create post object with the form values
                    $appoment_date =    $_POST['appoment_date'];
                   
                    echo $appoment_date;
                 
                   
                    $firstname = $_POST['f_name'];
                    $lastname = $_POST['l_name'];
                    $email_address = $_POST['email'];
                    $phone = $_POST['phone'];
                    $term = $_POST['center_term'];
                    $texonomy1 = $_POST['casetype'];

        $my_cptpost_args = array(
           
            'post_title' => 'test',
            'post_status'   => 'publish',
            'post_type' => "pgs_appointments",
            'post_date' => $appoment_date,
            'tax_input'    => array( 'your-custom-texonomy' => array( $texonomy1 ),'your-custom-texonomy' => array( $term ) ) //here insert two texonomy data.
           
           
        );
        $email_address = sanitize_email($email_address);
        $first_name = sanitize_meta( 'first_name', $first_name, 'user' );
        $lastname = sanitize_meta( 'lastname', $lastname, 'user' );
        $email_address = sanitize_meta( 'email_address', $email_address, 'user' );
        $phone = sanitize_meta( 'phone', $phone, 'user' );

// insert the post into the database
            $cpt_id = wp_insert_post($my_cptpost_args, $wp_error );
         add_post_meta($cpt_id, 'first_name', $first_name, true);//here insert two custom field data.
         add_post_meta($cpt_id, 'email_address', $email_address, true);//here insert two custom field data.
         add_post_meta($cpt_id, 'lastname', $lastname, true); //here insert two custom field data..
         add_post_meta($cpt_id, 'phone', $phone, true);//here insert two custom field data.
       
           
        }
        ?>
   
</main><!-- .site-main -->
</div><!-- .content-area -->

<?php get_footer(); ?>

Tweet