Career page in wordpress

[response]
         <div class=" ass" >
           [hidden apply_for  id:test class:hgjghf]
        </div>
       <div class="form-group">
           <label class="control-label col-sm-5" for="apply">Applying For:</label>
            <div class="col-xs-12 col-sm-10 col-md-7">
            [text apply_for class:form-control readonly ]
           </div>
           </div>
        <div class="form-group">
          <label class="control-label col-sm-5" for="experience">Minimum Experience Needed:</label>
           <div class="col-xs-12 col-sm-10 col-md-7">
          [text experience class:form-control readonly]
        </div>
        </div>
       <div class="form-group">
          <label class="control-label col-sm-5" for="location">Location:</label>
         <div class="col-xs-12 col-sm-10 col-md-7">
           [text location class:form-control readonly]
        </div>
        </div>
     
          <div class="form-group">
          <label class="control-label col-sm-5" for="qualification">Qualification:</label>
           <div class="col-xs-12 col-sm-10 col-md-7">
          [text qualification class:form-control readonly]
        </div>
        </div>
     
       <div class="form-group">
          <label class="control-label col-sm-5" for="first_name">Name^*:</label>
            <div class="col-xs-12 col-sm-10 col-md-7">
             [text* name1 class:form-control  placeholder"Your Name" ]
       </div>
       </div>

          <div class="form-group">
          <label class="control-label col-sm-5" for="email">Email^*:</label>
           <div class="col-xs-12 col-sm-10 col-md-7">
          [text* email class:form-control  placeholder"Your Email" ]
        </div>
        </div>
     
          <div class="form-group">
          <label class="control-label col-sm-5" for="mobile">Mobile^*:</label>
           <div class="col-xs-12 col-sm-10 col-md-7">
             [text* phone class:form-control  placeholder"Mobile No"]
        </div>
        </div>
         <div class="form-group">
          <label class="control-label col-sm-5" for="resume">Upload Resume / C.V.^*:</label>
       <div class="col-xs-12 col-sm-10 col-md-7">
          [file file filetypes:pdf|doc|docx|odf|rtf limit:2mb class:form-control]
       </div>
       </div>
        <div class="form-group">
          <label>&nbsp;</label>
           [submit id:enqury class:submit_right_home "Submit" ]
        </div>


/* template Page : carrier template */

<?php
 /* template name: carrier template */
wp_reset_query();?>
<?php get_header(); ?>
Note Contact form tag sarting id

<div role="form" class="wpcf7" id="wpcf7-f556-o2" lang="en-US" dir="ltr">

<script type="text/javascript">
// $(document).ready(function(){
 
function pop_up_form (id,experience,location,qualification){
        $('#wpcf7-f556-o2 input[name="apply_for"]').attr('value',id);
$('#wpcf7-f556-o2 input[name="experience"]').attr('value',experience);
        $('#wpcf7-f556-o2 input[name="location"]').attr('value',location);
$('#wpcf7-f556-o2 input[name="qualification"]').attr('value',qualification);
}
</script>
<section class="contact_header top">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2><?php echo the_title();?></h2>
                </div>
            </div>
        </div>
    </section>
<!-- about -->
<section class="about-features-area">
  <div class="container">
   <div class="row">
     <div class="col-md-9 col-sm-12">
       <div class="innerblock career-block">
       <?php ?>
       <ul>
        <?php $query=new WP_Query(
array(
'post_type' => 'career',
'posts_per_page' => -1
   ));
   if($query->have_posts()): while($query->have_posts()):$query->the_post();?>
                <li>
                  <h3><?php the_title(); ?></h3>
                  <p><strong>Experience :</strong><?php the_field('experience'); ?></p>
                  <p><strong>Location :</strong> <?php the_field('location'); ?></p>
                  <p><strong>Qualification :</strong> <?php the_field('qualification'); ?></p>
                  <p><strong>Skills Required :</strong> <?php the_field('skills_required'); ?></p>
                  <p class="job-description"><strong>job Description:</strong> <?php the_content()?></p>
                  <p><strong>Closing date :</strong> <?php the_field('closing_date'); ?></p>
                  <p><strong>Vacancies :</strong> <?php the_field('vacancies'); ?></p>
                  <a class="apply btn-default" id="<?php the_title(); ?>" onclick="pop_up_form('<?php the_title(); ?>','<?php the_field('experience'); ?>','<?php the_field('location'); ?>','<?php the_field('qualification'); ?>');" data-toggle="modal" data-target="#jobModal" title="Apply Now" > Apply Now</a>
              </li>
  <?php endwhile;
                endif;
                wp_reset_query();
                ?>
      </ul>
    </div>
   </div>
    <div class="col-md-3 col-sm-12">
          <div class="news-wpr quick-contact-wprr">
            <h2 class="news-heading">QUICK CONTACT</h2>
            <div class="quick-contact">
              <ul>
                <li><?php echo ot_get_option('phone_number');?></li>
                <?php /*?> <li><?php echo ot_get_option('phone_number_two');?></li>

            <li><?php echo ot_get_option('phone_number_three');?></li><?php */?>
                <li><?php echo ot_get_option('email_one');?></li>
                <?php /*?>  <li><?php echo ot_get_option('email_two');?></li><?php */?>
              </ul>
            </div>
          </div>
          <div class="news-wpr">
            <h2 class="news-heading"> News & Updates</h2>
            <div class="demo5 demof">
              <ul>
                <?php

                $query = new WP_Query('category_name=news&posts_per_page=4');

                if($query->have_posts()) : while($query->have_posts()) : $query->the_post();?>
                <li>
                  <p>
                    <?php the_content(); ?>
                  </p>
                </li>
                <?php endwhile;endif;

wp_reset_query();

            ?>
              </ul>
            </div>
          </div>
       
        </div>
 
   </div>
  </div>
</section>
<?php get_footer(); ?>
<div class="job-form">
 <div class="modal fade" id="jobModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Apply Now  </h4>
        </div>
        <div class="modal-body">
<?php echo do_shortcode('[contact-form-7 id="556" title="Job Opening Form"]'); ?>
        </div>
     
      </div>
   
    </div>
  </div>
</div>