I know this question has been asked before, but I can't find a substantial answer for my specific use case.


I've been working developing a Wordpress based website using the REST API and Vue.js as the front end framework. I have no issue fetching posts, displaying data, etc.


Since Vue.js runs in the client side, I'm having some issues when working with plugins/shortcodes that require to be rendered server side within the php. I'm looking for a solution to render a shortcode in a php function and send the rendered data to my front end, to ultimately display it using Vue.js.


var http = new XMLHttpRequest();
var url = '/wp-admin/admin-ajax.php';
var data = { action: 'my_ajax_shortcode' };
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
        // response......


add_action('wp_ajax_my_ajax_shortcode', 'my_ajax_shortcode()');
add_action('wp_ajax_nopriv_my_ajax_shortcode', 'my_ajax_shortcode()');
function my_ajax_shortcode() {
    echo do_shortcode('[contact-form-7 id="98" title="Contact Test"]');


I'm not very familiar with the Ajax communication in the context of Wordpress, so maybe somebody can help me or give me some direction. My responses usually log '0' when I run this code. Although I'm using Contact Form 7 for this example, I'm just trying to grasp the general flow of this operation, so I can apply it to other cases.

Thanks! Any help or pointers would be useful to help me understand this problem.

  • Your JS is a bit off. Make sure you're using jQuery, then follow the example JS in this tutorial: codex.wordpress.org/AJAX_in_Plugins
    – scott
    Commented Jul 6, 2017 at 20:54
  • @scott Thank you for the link. I'm actually trying to avoid using jQuery and do pure JavaScript!
    – mmarquez
    Commented Jul 7, 2017 at 14:18

1 Answer 1


My solution was simpler than I thought....

Since I'm just trying to execute shortcodes in the frontend, I can just localize the script and pass the shortcodes as variables:


wp_localize_script( 'BUILD-script', 'sharedData',
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'mailchimpForm' => do_shortcode('[mc4wp_form id="100"]'),
        'contactForm' => do_shortcode('[contact-form-7 id="98" title="Contact form 1"]')

Basically I'm jus assigning the shortcodes to two variables and make them available in my main js bundle.


So now I can access those shortcodes, rendered, in my components.

export default {
    name: 'my-component',
    data() {
        return {
            mailchimp: '',
            contact: ''
    mounted() {
        this.mailchimp = sharedData.mailchimpForm;
        this.contact = sharedData.contactForm;

And rendered by simply using the Vue v-html directive:

<div id="mailchimp" class="chimp--container" v-html="mailchimp"></div>
<div id="contact" class="contact--container" v-html="contact"></div>

Hopefully this will help somebody!

  • @mmaruez I'm doing the same thing Vue app. Did you have any problems with conditional logic? I'm get this error conditional_logic.min.js?ver=2.3.3:1 Uncaught TypeError: Cannot read property '1' of undefined at gf_do_field_action (conditional_logic.min.js?ver=2.3.3:1) at gf_apply_field_rule (conditional_logic.min.js?ver=2.3.3:1) at gf_apply_rules (conditional_logic.min.js?ver=2.3.3:1) at HTMLSelectElement.onchange (aconcagua-360-5?lang=en:1) I have enqueued to gfrom scripts using gravity_form_enqueue_scripts( 1, false ); Any ideas? Thanks in advance.
    – Joe Dooley
    Commented Aug 12, 2018 at 17:50
  • @JoeDooley hmm it's been a while but I haven't experienced that error! Is conditional_logic.min.js a dependency of Gravity Forms? Not familiar with it, my use case for this project required Contact Form 7. I think it just depends on the plugin/library -- but I haven't had any issues doing shortcodes this way
    – mmarquez
    Commented Aug 14, 2018 at 2:47
  • I think this works because the first runs on the front end vs admin. Also because you are using static shortcodes. If you were wanting to generate unique shortcodes to be rendered based on ajax post ,I do not think this method would work, i.e. cart before horse, the data is not yet available to wp_localize_script Commented Dec 17, 2019 at 9:55

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.