【EC-CUBE4】WordPressのContact Form 7とVue.jsを使ってお問合せフォームを作る方法
目次
WordPressのContact Form 7とVue.jsを使ってEC-CUBE4でお問合せフォームを作る方法です。
WordPressにContact Form 7をインストールしてお問合せフォームを作成
WordPressにContact Form 7というプラグインをインストールして、コンタクトフォームを新規作成して下さい。
コンタクトフォームを作成すると以下のようなショートコードが発行されます。
1 | [contact-form-7 id="4167" title="サンプル"] |
EC-CUBE4でお問合せフォームを作るときにショートコードのidを使用しますのでメモしておいて下さい。
EC-CUBE4のページ管理でお問い合わせページを作成
フォーム送信はContact Form 7のREST APIを使って行います。
EC-CUBE4のページ管理でお問合せフォーム用のページを作成して、以下のコードを貼り付けて下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | {% 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を設定している場合は解除する必要があります。
