【EC-CUBE4】WordPressのContact Form 7とVue.jsを使ってお問合せフォームを作る方法

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を設定している場合は解除する必要があります。

    お気軽にコメントをどうぞ

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください