WordPress Custom Article Button Popup Form with AJAX Submission Guide

This tutorial details how to add a Submit Quotation button to the list item of each custom post type (such as "Real Estate") in WordPress, and a custom HTML form with a specific post ID pops up after clicking it. The article will cover how to create modal popups using jQuery UI Dialog, dynamically pass the article ID through data attributes, and use WordPress AJAX mechanism to implement asynchronous submission of forms, while processing file uploads and displaying submission results, thus providing a seamless user experience.

1. Overview and core requirements

In WordPress development, we often need to provide specific interactive features for each entry on the article list page. This tutorial aims to address the following core requirements:

• In the loop list of custom post types, such as property, add a Submit Quotation button for each post.
• After clicking the button, a modal form pops up.
• The form should contain the ID of the current article as a hidden field to be associated to a specific article when submitted.
• The form submission process should be completed asynchronously through AJAX to avoid page refresh and display success or failure messages in pop-up windows.
• The form supports file upload function.

We will use WordPress built-in features, jQuery UI Dialog library, and AJAX technology to achieve this.

2. HTML structure: buttons and forms

First, we need to set the button in the WordPress article loop and place a form structure for popups on the page.

2.1 Buttons in the article loop

In your custom post type template file (such as archive-property.php or pages built with WP_Query), add a button for each post while iterating through the post and store the post ID and title via HTML5's data-* attribute.

 <?php // Suppose you are in a loop with custom article type &#39;property&#39; $args = array(
    &#39;post_type&#39; => 'property',
    'posts_per_page' => -1, // Show all posts 'post_status' => 'publish'
);
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
        $post_id = get_the_ID();
        $post_title = get_the_title();
?>
        <div class="property-item">
            <h2><?php echo esc_html( $post_title ); ?></h2>
            <p>Article ID: <?php echo esc_html( $post_id ); ?></p>
            <!-- Other real estate information-->

            <button class="btn btn-primary submit-offer-btn" data-post-id="<?php echo esc_attr( $post_id ); ?>" data-post-title="<?php echo esc_attr( $post_title ); ?>">
                Submit a quote</button>
        </div>
<?php endwhile;
    wp_reset_postdata(); // Reset query else:
    echo &#39;<p>No property information was found. ';
endif;
?>

illustrate:

• The submit-offer-btn class is used in JavaScript selectors.
• The data-post-id and data-post-title attributes are used to store the ID and title of the current post, and JavaScript will obtain the data through these attributes.

2.2 HTML structure of pop-up form

Place your full form in a hidden div container that should appear only once on the page, not inside the loop. This div will be converted into a pop-up window by jQuery UI Dialog.

 <div id="offerFormDialog" style="display:none;">
    <h2 class="text-center">Submit your quotation</h2>
    <form id="offerForm" method="POST" enctype="multipart/form-data">
        <div class="form-group row">
            <label class="col-md-12" for="name"><?php esc_html_e( &#39;Name&#39;, &#39;ivproperty&#39; ); ?><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( &#39;Email&#39;, &#39;ivproperty&#39; ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" name="email" type="email" required>
        </div>
        <div class="form-group row">
            <label for="price" class="col-md-12"><?php esc_html_e( &#39;Price&#39;, &#39;ivproperty&#39; ); ?><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( &#39;Purchase Type&#39;, &#39;ivproperty&#39; ); ?><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( &#39;Closing Date&#39;, &#39;ivproperty&#39; ); ?><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="concessions_amount"><?php esc_html_e( &#39;Concessions Amount&#39;, &#39;ivproperty&#39; ); ?></label>
            <input class="col-md-12" name="concessions_amount" type="number">
        </div>
        <div class="form-group row">
            <label for="inspection_period" class="col-md-12"><?php esc_html_e( &#39;Inspection Period&#39;, &#39;ivproperty&#39; ); ?><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="seller_occupancy" class="col-md-12"><?php esc_html_e( &#39;Seller Occupancy & Charge&#39;, &#39;ivproperty&#39; ); ?></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="emd" class="col-md-12"><?php esc_html_e( &#39;EMD&#39;, &#39;ivproperty&#39; ); ?><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="home_warranty" class="col-md-12"><?php esc_html_e( &#39;Home Warranty&#39;, &#39;ivproperty&#39; ); ?><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="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </div>
        <div class="form-group row">
            <label for="attachment" class="col-md-12"><?php esc_html_e( &#39;Attachment&#39;, &#39;ivproperty&#39; ); ?></label>
            <input type="file" name="attachment">
        </div>

        <!-- Hide fields are used to store article ID -->
        <input type="hidden" name="property_id" id="property_id_hidden_field" value="">

        <!-- Area for displaying AJAX messages-->
        <div id="form_messages" style="margin-top: 15px;"></div>

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

illustrate:

• id="offerFormDialog" is the unique identifier of the pop-up container.
• style="display:none;" Make sure the pop-up is hidden when the page loads.
• id="property_id_hidden_field" is a hidden field whose value will be dynamically populated by JavaScript when the pop-up window is opened.
• id="form_messages" is used to display success or error messages after AJAX submission.

3. JavaScript/jQuery: Pop-up window control and AJAX submission

We will use jQuery UI Dialog to create the bomb

The above is the detailed content of WordPress Custom Article Button Popup Form with AJAX Submission Guide. For more information, please follow other related articles on the PHP Chinese website!