WordPressのContact Form 7とVue.jsを使ってEC-CUBE4でお問合せフォームを作る方法です。
WordPressにContact Form 7をインストールしてお問合せフォームを作成
WordPressにContact Form 7というプラグインをインストールして、コンタクトフォームを新規作成して下さい。
コンタクトフォームを作成すると以下のようなショートコードが発行されます。
EC-CUBE4でお問合せフォームを作るときにショートコードのidを使用しますのでメモしておいて下さい。
EC-CUBE4のページ管理でお問い合わせページを作成
フォーム送信はContact Form 7のREST APIを使って行います。
EC-CUBE4のページ管理でお問合せフォーム用のページを作成して、以下のコードを貼り付けて下さい。
{% extends 'default_frame.twig' %}
{% block main %}
<div class="ec-layoutRole__contents">
<div class="ec-layoutRole__main">
<div class="ec-contactRole">
<div class="ec-pageHeader">
<h1>お問い合わせ</h1>
</div>
</div>
<div class="ec-off1Grid">
<div class="ec-off1Grid__cell">
<form id="vueform" v-on:submit.prevent="onSubmit" ref="form" novalidate>
<p>
<label for="name">
お名前<br>
<input type="text" id="name" name="your-name" /><br />
<span class="wpcf7-form-control-wrap your-name"></span>
</label>
</p>
<p>
<label for="email">
メールアドレス<br>
<input type="text" id="email" name="your-email" /><br />
<span class="wpcf7-form-control-wrap your-email"></span>
</label>
</p>
<p>
<label for="subject">
題名<br>
<input type="text" id="subject" name="your-subject" /><br />
<span class="wpcf7-form-control-wrap your-subject"></span>
</label>
</p>
<p>
<label for="message">
メッセージ本文<br>
<textarea id="message" name="your-message"></textarea><br />
<span class="wpcf7-form-control-wrap your-message"></span>
</label>
</p>
<input type="submit" value="送信" />
<input type="hidden" name="_wpcf7" v-model="formId" />
<input type="hidden" name="_wpcf7_unit_tag" v-model="unitTag" />
<input type="hidden" name="_wpcf7_locale" value="ja" />
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#vueform",
delimiters: ['{$', '$}'],
data: {
formId: 4167, // 作成したContact Form 7のフォームIDを設定
},
computed: {
unitTag() {
return "wpcf7-f"+this.formId+"-o1";
}
},
methods: {
onSubmit() {
let form = this.$refs.form;
const formData = new FormData(form);
if(danger = form.getElementsByClassName("text-danger")) {
for(let i=0; i<danger.length; i++) {
danger[i].textContent = "";
}
}
if(alert = form.querySelector(".alert")) {
alert.remove();
}
let message = document.createElement('p');
// 所有しているドメインに書き換えて下さい
axios.post(`https://mydomain.com/wp-json/contact-form-7/v1/contact-forms/${this.formId}/feedback`, formData)
.then(function(response) {
switch(response.data.status) {
case "validation_failed":
for(i in response.data.invalidFields) {
let error = document.querySelector(response.data.invalidFields[i].into);
error.textContent = response.data.invalidFields[i].message;
error.classList.add("text-danger")
}
break;
case "mail_sent":
message.textContent = response.data.message;
message.classList.add("alert");
message.classList.add("alert-success");
form.append(message);
if(inputs = form.querySelectorAll("p input, p textarea")){
for(let i=0; i<inputs.length; i++) {
inputs[i].value = "";
}
}
break;
default:
message.textContent = response.data.message;
message.classList.add("danger");
form.append(message);
}
})
.catch(function(error){
message.textContent = "エラーが発生しました。";
message.classList.add("alert");
message.classList.add("alert-danger");
form.append(form);
})
.finally(function(){
if(overlay = document.querySelector(".bg-load-overlay")) {
overlay.parentNode.removeChild(overlay);
}
});
},
}
})
</script>
{% endblock %}
formIdにはContact Form 7で発行したショートコードのidを設定して下さい。
POST送信するときのドメインをコンタクトフォームを作成したWordPressのドメインに変更して下さい。
送信後やエラー時のメッセージの編集
送信後やエラー時のメッセージ編集はContact Form 7の編集画面で行えば反映されます。
注意
Contact Form 7のインテグレーションでreCAPTCHAを設定した場合、送信時にspam判定されてしまい送信出来ませんので、reCAPTCHAを設定している場合は解除する必要があります。