I implemented a simple contact form with Recaptcha in Vue.js, see live demo and the source code.
What is the right way to add this form on a WordPress page? I have not worked with WordPress, so it is not clear where to include the script and where to put HTML and PHP. Developing a plugin is probably too complicated, is it possible to have the contact form that can be added to a WordPress page with couple lines of code?
solution with webpack:
create vue component which you want to include
create some index.js or index.ts file that you can include in webpack entry
add component in wordpress by some hook. e.g add_menu_page
add_action( 'admin_menu',array($this, 'register_form_menu_page'));
function register_form_menu_page(){
add_menu_page(
__( 'captcha form', 'theme' ),
__( 'captcha form', 'theme' ),
'edit_posts',
'captchaform',
array($this, 'init_menu_form'),
'dashicons-schedule',
6
);
}
function init_menu_form() { ?>
<div>
<captcha-form class="app-vue"></captcha-form>
</div>
<?php }
in javascript index file include vue, vue component, and create vue instance
`
import Vue from 'vue';
import CaptchaForm from "./components/CaptchaForm.vue";
Vue.component('CaptchaForm', CaptchaForm);
var apps = document.getElementsByClassName('app-vue');
for (let i = 0; i < apps.length; i++) {
let element = apps[i];
let id = 'app-vue-' + i;
element.setAttribute('id', id);
new Vue({
el: '#' + id,
});
}
export default apps;
run webpack
