0

How can I use a shortcode on a custom page in a theme? Let say I have a page that has a jQuery ajax function. I am able to send the data via JQuery post on the my_form.php page. On the confirm.php page, I want to use a shortcode from Contact Form DB plugin. Below is the source code that I wrote,

my_form.php

<?php
get_header(); 
// Include all the theme functions    
?>

<form name="season-form" class="form-horizontal" method="post" action="">
  <div class="form-group form-group-lg">
    <label for="carNo" id="label-cust"> Vehicle Registration No</label>
    <input type="text" class="form-control" name="vehicle_no" id="vehicle_no" placeholder="BHK1991">
  </div>
  <div class="form-group form-group-lg">
    <label for="email" id="email">Email</label>
    <input type="email" class="form-control" name="email" id="email" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-primary" id="submit_payment">Make Payment</button>
</form>
<div id="result"></div>

<?php get_footer(); ?>

my_function.js

jQuery(document).ready(function($) {
    $('#submit_payment').click(function(e){
        e.preventDefault();
        var str = $("form[name=season-form]").serialize();
        //alert(str);
        $.ajax({
            type: "POST",
            url: url_to_confitm.php,
            data: str 
        }).done(function(data){
            $("#result").html(data);
        });
    });
});

confirm.php

if(isset($_POST['vehicle_no'])){
    $vehicle_no = $_POST['vehicle_no'];
    $email = $_POST['email'];

    echo "Your Data: <br>$vehicle_no <br>$email<p />";
}

echo do_shortcode('[cfdb-table form="season parking form_copy"]');
  1. I am able to get the result of post data but the shortcode appears to return nothing.
  2. If I use the shortcode on my_form.php page, it display the data perfectly.
1
  • You can't load php files directly, there is no WordPress environment in that context. You need to use WordPress Ajax hooks. There are many examples on this site if you search around.
    – Milo
    Apr 27, 2017 at 16:23

1 Answer 1

0

You should this way to handle ajax request. It's the recommended way to make a ajax call in WordPress.

my_function.js Update your jquery with this code.

jQuery(document).ready(function($) {
    $('#submit_payment').click(function(e){
        e.preventDefault();
        var str = $("form[name=season-form]").serialize();
        //alert(str);
        $.ajax({
            type: "POST",
            url: '//www.example.com/wp-admin/admin-ajax.php',
            data: str + '&action=confirmRequest' 
        }).done(function(data){
            $("#result").html(data);
        });
    });
});

ajax_request_handling Paste this in functions.php of your theme.

function _myConfirmHandler()
{
    if(isset($_POST['vehicle_no']))
    {
        $vehicle_no = $_POST['vehicle_no'];
        $email = $_POST['email'];

        echo "Your Data: <br>$vehicle_no <br>$email<p />";

    }
    echo do_shortcode('[cfdb-table form="season parking form_copy"]');
    echo do_shortcode('[contact-form-7 id="23" title="Contact form 1"]');
    exit;
}

add_action('wp_ajax_confirmRequest', '_myConfirmHandler');
add_action('wp_ajax_nopriv_confirmRequest', '_myConfirmHandler');

For more information refer to the link.

9
  • I am still new in Wordpress development. On my_function.js, regarding the url, do I have to send to admin-ajax.php as well because the page that I want it to display is confirm.php.
    – Amran
    Apr 28, 2017 at 1:05
  • Yes you have to send it to admin-ajax.php
    – BlueSuiter
    Apr 28, 2017 at 4:52
  • @Amran Happy Coding :)
    – BlueSuiter
    Apr 28, 2017 at 8:25
  • 1 last thing, how do I want to insert contact form 7 on functions.php? I put echo do_shortcode('[contact-form-7 id="6871" title="season parking form_copy"]'); after echo do_shortcode('[cfdb-table form="season parking form_copy"]'); but it just echo the text.
    – Amran
    Apr 28, 2017 at 9:22
  • Are you sure, you wrote it in between the php tag .
    – BlueSuiter
    Apr 28, 2017 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.