每个帖子的自定义按钮的弹出表单 Wordpress

有多个自定义的帖子显示在一个页面上，帖子类型是'property'，其中我放了一个按钮

<button class="btn btn-primary">Submit Offer</button>

这个按钮是一个循环，显示在每篇文章的下面。我想要的是弹出一个自定义的html表单，它应该包含Post ID作为隐藏字段。

这是在Post的列表页面上获取Post ID和title的方式:

global $post;
global $wpdb;
$the_query = new WP_Query( array(
'post_type' => 'property'
) );
$id = $the_query->post->ID;
$title = get_the_title( $id );

HTML表单:

<h2 class="text center">
Submit Your Offer
</h2>
<form action="" method="POST" enctype="multipart/form-data">
<div class="form-group row">
<label class="col-md-12"  for="Name"><?php  esc_html_e( 'Name', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input  class="col-md-12" id="name" name ="name" type="text" required>
</div>
<div class="form-group row">
<label for="email" class="col-md-12"><?php  esc_html_e( 'Email', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-12"  name="email" type="text" required>
</div>
<div class="form-group row">
<label for="price" class="col-md-12"><?php  esc_html_e( 'Price', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-12"  name="price" type="number" required>
</div>
<div class="form-group row">
<label for="purchase_type" class="col-md-12"><?php  esc_html_e( 'Purchase Type', 'ivproperty' ); ?><span class="red-star">*</span></label>
<select class="col-md-12" name="purchase_type" required>
<option disabled selected value> -- select an option -- </option>
<option value="Cash">Cash</option>
<option value="Conventional Loan">Conventional Loan</option>
<option value="FHA Loan">FHA Loan</option>
<option value="MSHDA Conventional Loan">MSHDA Conventional Loan</option>
<option value="MSHDA FHA Loan">MSHDA FHA Loan</option>
<option value="Land Contract">Land Contract</option>
</select>
</div>
<div class="form-group row">

<label for="closing_date"><?php  esc_html_e( 'Closing Date', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-12 date_box"  name="closing_date" type="date" required>   
</div>
<div class="form-group row">
<label for="closing_date"><?php  esc_html_e( 'Concessions Amount', 'ivproperty' ); ?></label>
<input class="col-md-12"  name="concessions_amount" type="number">

</div>
<div class="form-group row">
<label for="closing_date" class="col-md-12"><?php  esc_html_e( 'Inspection Period', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-6 date_box"  name="insp_from" type="date" required>
<input class="col-md-6 date_box"  name="insp_to" type="date" required>
</div>
<div class="form-group row">
<label for="closing_date" class="col-md-12"><?php  esc_html_e( 'Seller Occupancy & Charge', 'ivproperty' ); ?></label>
<input class="col-md-6"  name="seller_occupancy" type="text" placeholder="Occupancy">
<input class="col-md-6"  name="seller_charge" type="number" placeholder="Charge">
</div>
<div class="form-group row">
<label for="price" class="col-md-12"><?php  esc_html_e( 'EMD', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-12"  name="emd" type="number" placeholder="Earnest Money Deposit" required>
</div>
<div class="form-group row">
<label for="warranty" class="col-md-12"><?php  esc_html_e( 'Home Warranty', 'ivproperty' ); ?><span class="red-star">*</span></label>
<select class="col-md-12" name="home_warranty" required>
<option disabled selected value> -- select an option -- </option>
<option value="Conventional Loan">Yes</option>
<option value="FHA Loan">No</option>
</select>
</div>
<div class="form-group row">
<label for="price" class="col-md-12"><?php  esc_html_e( 'Attachment', 'ivproperty' ); ?></label>
<input type="file" name="attachment">
</div>

<div class="modal-footer">                 

<input type="submit" name="submit_offers" class="btn btn-secondary col-md-12 ml-2">                     
</div>  
</form>

我还想处理这个表单内弹出仅作为ajax和显示成功消息。

有人能帮忙吗?

<button type="button" id="but" >Open Popup</button>
<div id="dialogForm">
<form id="myform" method="post">
Name:
<input type="text"/><br/>
Phone:
<input type="text"/><br/>
<button type="submit"> Submit </button>
</form>
</div>

$('#but').click(function() {
$("#dialogForm").dialog("open");
});
$("#dialogForm").dialog({
modal: true,
autoOpen: true,
show: {effect: "blind", duration: 800}
});