form.php

<?php

function form_endpoint($data) {

    $args = array(
        'ID'                     => $data['ID'],
        'post_type'               => array('wpcf7_contact_form')
    );

    // The Query
    $query = new WP_Query($args);

    // The Loop
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $result = array( stripForms([
                get_post(get_the_id()),
                get_post_meta(get_the_id()),
            ]));
        }
    } else {
        $result = "no result";
    }

    // Restore original Post Data
    $arr = (array) getACFValues($result[1]);
    $result = array_merge($result, $arr);
    $result = json_decode(json_encode($result), true);
    return $result;
}

function stripForms($data) {
    $arr = (array) getACFValues($data[1]);
    $newpost = array_merge($data, $arr);
    $formHtml = do_shortcode('[contact-form-7 id="'.$newpost[0]->ID.'" title="'.$newpost[0]->post_title.'"]');
    $formStart = explode(' action="', $formHtml)[0];
    $formEnd = explode('" method="post"', $formHtml)[1];
    $newpost['post'] = "http://{$_SERVER['HTTP_HOST']}/wp-json/contact-form-7/v1/contact-forms/".$newpost[0]->ID."/feedback";
    // $form = $formStart." action=".$formEnd;
    // $form = $formStart." onsubmit='return false'" .$formEnd;
    $newpost['html'] = $formHtml    ;
    //DEFAULT VALUE
    $newpost['defaultEmail'] = 'alexanderddking@gmail.com';
    return $newpost;
}

function all_forms_endpoint()
{
    $result =  array();
    // WP_Query arguments
    $args = array(
        'post_type'  => array('wpcf7_contact_form'),
        'numberposts'   => -1
    );

    // The Query
    $query = new WP_Query($args);

    // The Loop
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            array_push($result, stripForms([
                get_post(get_the_id()),
                get_post_meta(get_the_id()),
            ]));
        }
    } else {
        $result = "no result";
    }

    // Restore original Post Data
    wp_reset_postdata();

    $result = json_decode(json_encode($result), true);
    return $result;
}

function send_mail($data)
{
    $to = $data['to'];
    $subject = $data['subject'];
    $body = $data['message'];
    $headers = array('Content-Type: text/html; charset=UTF-8');
    $succuss = wp_mail( $to, $subject, $body, $headers );
    return [
        $to,
        $subject,
        $body,
        $headers,
        $succuss
    ];
}

page-contact-us.vue

<template>
  <div id="contact-us">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-6">
          <div class="contact-us-details">
            <h2>{{this.pageDetails.pageDetails.post_title}}</h2>
            <p class="p3" v-html="this.pageDetails.pageDetails.post_content"></p>
          </div>
        </div>
        <div class="col-xs-12 col-md-6">
          <div class="form-group" v-if="this.pageDetails.pageDetails['contact-form']">
            <div v-html="this.pageDetails.pageDetails['contact-form'][0].html"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Hero from "../../components/Hero.vue";
import Columns from "../../components/Columns.vue";
import AccordTab from "../../components/AccordTab.vue";
import LogoWall from "../../components/LogoWall.vue";
import BlogCards from "../../components/BlogCards.vue";
import CtaBanner from "../../components/CtaBanner.vue";
import Footer from "../../components/Footer.vue";
import TestimonialCarousel from "../../components/Carousel.vue";

export default Vue.extend({
  name: "TemplateContactUsPage",
  props: ["pageDetails"],

  components: {
    Hero,
    Columns,
    AccordTab,
    LogoWall,
    BlogCards,
    CtaBanner,
    TestimonialCarousel,
    Footer
  },
  methods: {
    serialize(form) {
      let kvpairs:string[] = [];
      for ( var i = 0; i < form.elements.length; i++ ) {
        const e = form.elements[i];
        kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));
      }
      let queryString = kvpairs.join("&");
      return queryString;
    },
    addListener(form){
      form.addEventListener('submit', (e, data) => {
        e.preventDefault();
        const query = `?${this.serialize(e.currentTarget)}`;
        fetch(this.pageDetails.pageDetails['contact-form'][0].post+query,{
          method: 'POST'
        }).then(res => {
          res.json().then(data => {
            console.log(data.message);
          });
        });
      })
    },
    waitForForm(form){
      console.log('form', form);
      if(typeof form !== 'undefined'){
        this.addListener(form);
        console.log('added!', form)
      } else {
        this.waitForForm(document.getElementsByTagName('form')[0]);
      }
    }
  },
  mounted() {
    const theForm = document.getElementsByTagName('form')[0];
    this.waitForForm(theForm);
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#contact-us {
  padding: 80px 0 160px;
  .contact-us-details {
    margin: 0 0 80px;
  }
  .form-group {
    max-width: 440px;
    margin: 0 auto;
  }
}

.form-group {
  clear: both;
}
</style>